I have a feeling that next year will be a big year for typography. Now that variable fonts are supported in all major browsers and a collection of supported fonts constantly growing, 2020 should see their popularity increase exponentially.
What are Variable Fonts?
Variable fonts are a collection of styles and settings bundled together into one font file that allow for greater flexibility and font variations. A typical font has control over font-weight
in steps of 100 units, and a font-style
of mostly normal
and italic
, with no room in between. Variable fonts have way more customization, with access to 5 registered axes, and the ability to create a multitude of custom axes:
-
font-weight
: Just any other font, this adjusts how thick or thin the font is, but it can have any value between1
and1000
. -
font-stretch
: This defines how narrow or wide the font is, such as differentiating between a standard and condensed style. This can have any value greater than0%
, with normal being100%
. -
font-style
: Similar to other fonts, this is a simple binary switch betweennormal
anditalic
. This is because instead of adjusting the characters, it may actually substitute them with other specifically designed characters. If a font supports it,oblique
can be defined instead ofitalic
, allowing you to add a custom slant to your font anywhere from-90deg
to90deg
.
font-synthesis: none;
can also be used in conjunction withfont-style: italic
to prevent the browser from accidentally using theoblique
synthesized italic style and variations, and may also fix font thickness issues.
-
font-optical-sizing
: This is a fairly new setting that varies the overall stroke thickness of letterforms based on physical size. The larger the font, the thinner the text, and vice-versa. This was originally used in print to help with legibility of smaller fonts but translates well to digital. This can be set to eithernone
orauto
to correspond to the font size, or you can provide it a numeric value to represent the font size you want to replicate.
A custom value for
font-optical-sizing
can only be defined using thefont-variation-settings
shorthand described below, the standalone property only supportsauto
andnone
.
Each of these settings can be defined as follows:
font-weight: <number(1..1000)>
font-stretch: <percentage(> 0%)>
font-style: normal | italic | oblique <angle(-90deg..90deg)>
font-optical-sizing: none | auto
There is also a shorthand property called font-variation-settings
font-variation-settings: 'wght' 375, 'wdth' 115, 'ital' 1 | 'slnt' 14, 'opsz' 36
The shorthand uses tags to signify properties;
wght
forfont-weight
,wdth
forfont-stretch
,ital
orslant
forfont-style
, andopsz
forfont-optical-sizing
.Unlike
font-stretch
, thewdth
tag takes a number as a value instead of a percentage.
It does stop there either, variable fonts give designers the flexibility to create their own axes, so when you use a variable font you may notice an axis used that is not mentioned above, and you'll have to refer to their documentation.
Want to play around with variable fonts? Check out these links:
🔗 Variable Fonts
🔗 Font Playground
🔗 Axis Praxis
Why should you use variable fonts?
The first reason variable fonts are better for the web is for page speed. Since it only requires one file as opposed to multiple files for a typical font, that means less http requests and smaller stylesheets. Let's take Montserrat for example; With a total of 18 styles on Google Fonts, that's 18 files and over 4.5mb! The variable font has all that and more in just 386kb! Plus, it can all be defined in one @font-face
, in four lines of CSS as opposed to a separate @font-face
for each style:
@font-face {
font-family: 'MyVariableFontName';
src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
}
Another reason is for flexibility which we discussed earlier. This flexibility also allows you to apply CSS animations on properties like font-weight
which were not possible before.
You can even animate custom axes!
This can also be used to animate icons in a font family such as Zycon:
Unless you need to support IE11, there's no need to wait to implement these features, go out there and make some cool stuff! Have you used variable fonts on any projects recently?
Top comments (2)
Hi Luis,
Great piece. I can't wait to start trying this. Just a heads up that the Edge demos link is throwing a 404.
Thanks!
Thanks! I'll remove the link, looks like Microsoft took down the page 😭