Comments (4)
I'd also like to see the variable font range improved to be more uniform with conventions and combine the italicized Cabin with the non-italicized Cabin into a single variable font:
Weight: 100-900 (400 being normal, 700 being bold)
font-variation-settings: 'wght' 400; // default
Width: 0-100 (0 being condensed, 100 being normal width)
font-variation-settings: 'wdth' 100; // default
Italic: 0-1 (o being normal, 1 being italicized)
font-variation-settings: 'ital' 0; // default
Thoughts on how best to implement this @m4rc1e @graphicore @impallari @kalapi?
from cabin.
Values from 1 to 999 and all intermediate values are valid so 100 - 900 are no longer the only way that you can write your weight declarations for variable fonts (they remain the standard for non variable fonts, however). You'll find yourself in this problem with every variable font you use, not just Cabin
Cabin also has predefined axes that give you the combinations that you need to get a given font weight. You can use font-variation-settings
directly when defining my elements and classes or I use tools like wakamaifondue to get a list of all the predefined instances along with open type features available for the font. It also generates CSS that you can drop into your own stylesheets.
If you don't feel like using the tools, this CSS works for me in browsers that support variable fonts.
/* Variable instances */
.cabin-vf-beta-regular {
font-variation-settings: "wght" 94, "wdth" 100;
}
.cabin-vf-beta-medium {
font-variation-settings: "wght" 109, "wdth" 100;
}
.cabin-vf-beta-semibold {
font-variation-settings: "wght" 116, "wdth" 100;
}
strong,
b,
.cabin-vf-beta-bold {
font-variation-settings: "wght" 128, "wdth" 100;
}
from cabin.
combine the italicized Cabin with the non-italicized Cabin
I disagree with this, unless there truly is an axis whereby the regular face gradually blends into the italic -- something hardly ever seen in practice.
Italic and Regular are two distinct faces (each of which may have variation axes such as width and weight), but there is no variation axis that links them. Package them together in a .ttc if you like, but don't create a spurious 'ital' axis.
(Unlike 'slnt', which makes perfectly good sense for a variable-slant Oblique style, if you have that in the family.)
from cabin.
I'm trying to pare down as much of Cabin, Cabin Condensed, Cabin Italic, and Cabin Condensed Italic into as few .woff2 variable font files as possible, so that they can be compressed and cached efficiently as webfonts. That was my rationale for using the ital
axis, as I've seen many variable fonts do it that way (see examples at https://v-fonts.com/).
from cabin.
Related Issues (16)
- Have you plans to add new weights? HOT 6
- variable font axes HOT 2
- any plans to change the @ sign? HOT 2
- width axis is reversed HOT 1
- smcp feature? HOT 6
- Font information in the italic variable font is a verbatum copy of the regular variable font
- Update sources to match TTF v1.007 HOT 1
- Any plans to expand the language support? HOT 1
- Move current @ to a stylistic set and introduce a new 'normal' one HOT 4
- Truetype version rendering incorrectly HOT 10
- Variable font not behaving in Adobe InDesign 16.1 for Mac
- Some weird issues prevent it to export as VF HOT 6
- Exported fonts have both /NULL and /.null HOT 2
- color in v w x y z in Bold Condensed HOT 1
- metrics out of sync in italics
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cabin.