Variable fonts were developed as the joint effort of the four biggest tech companies involved in type design—Apple, Google, Microsoft, and Adobe. As the name suggests, variable fonts allow designers to derive an unlimited number of font variants from the same font file. This way it becomes possible to adjust the typeface to different devices, viewports, orientations, and other design constraints.
Why Use Variable Fonts?
Variable fonts significantly reduce the limitations of current font formats. Today’s web fonts are inflexible and don’t scale very well; they only provide us with some fixed styles with names like “Light”, “Bold”, or “Extra Bold”. There are even typefaces that only have one weight or slant variant. With a variable approach however, we have access to an infinite flexibility of weight, slant, x-height, slabs, rounding, and other typographical attributes.
Variable fonts use a single font file that the browser only has to load once. Upon being loaded it can serve all the variants from just that one binary.
So, here is a brief comparison:
Roboto: twelve font files, twelve variants.
Variable fonts: one font file, unlimited variants.
As you can already imagine, our typographical options grow incredibly with this newer approach. From practical options, through subtle, all the way to the more.. experimental!
Setting Font Variations With CSS
To define font variations, we can use the font-variation-settings CSS property introduced with the CSS Font Module Level 4. This is a low-level property that allows us to control the output by specifying a value for each axis.
Example: Decovar
Decovar is one of the most versatile examples that currently exists. You can find it on Axis Praxis, on GitHub, and it also has a demo page on TypeNetwork’s website. Decovar contains one registered (weight) and fourteen custom axes, and also has seventeen named instances.
In the CSS we have to define all the fifteen axes (inline, sheared, rounded slab, stripes, worm terminal, inline skeleton, open inline terminal, inline terminal, worm, weight, flared, rounded, worm skeleton, slab, bifurcated).
div {
font-family: Decovar;
color: white;
background-color: rgb(0, 162, 215);
font-size: 157.12px;
text-align: left;
padding-top: 20px;
font-variation-settings: 'INLN' 285.094, 'TSHR' 346.594,
'TRSB' 786.377, 'SSTR' 84.268, 'TWRM' 200, 'SINL' 84.268,
'TOIL' 0, 'TINL' 91.983, 'WORM' 0, 'wght' 400, 'TFLR' 0,
'TRND' 0, 'SWRM' 0, 'TSLB' 277.155, 'TBIF' 0;
}
Note: we have to specify a value for all the axes in the font-variation-settings property—even those we don’t want to use.
We can use any value (even float numbers) for the axes between the min and max values.
In case of Decovar, we can use 0 as value for the axes we are not interested in; these will be rendered with the default value. This isn’t always the case though, as it depends on the ranges the font uses for the different axes. Decovar is easy, as it uses a 0-1000 range for all axes, and 0 is the default value for all.
Top comments (0)