Let's take a look at what variable fonts are, what benefits they offer, and how we can use them in our work.
What are variable fonts
Variable fonts are not built on the explicit difference between fixed weights and styles.
Let's take, for example, the well-known Roboto font. Given that it is not a variable font, it comes with just a few font variants: 100
, 300
, 400
, 500
, 700
, 900
.
But what if our text looks perfect on a 200
font weight? And the font family does not have this font weight?
Actually, when importing custom fonts in NextJs 13 it's even mandatory to specify the needed font weight so that the system will know what files to import.
Or the classical distinction between normal
or bold
and italic
. What if we would like something between normal and bold?
Instead of these fixed formats, the variable fonts have different parameters (or axes) that we can customize. For example, one of these parameters is the wght
- the weight of the font.
We can change this property with the font-weight
property:
font-weight: 123;
And also with the font-variation-settings
shorthand CSS property:
.text-with-custom-font {
font-variation-settings: "wght" 123;
}
Only if the font is variable, we can put in the wght
the exact value that we need, not just the ones provided by the font designer. Checkout the below code pen:
See the Pen
tom-cat by JS Craft (@js-craft)
on CodePen.
Properties of variable fonts
These are some of the properties (or axes) we can use to customize the variable fonts:
- weight (axis tag:
wght
, CSS property:font-weight
), - width (axis tag:
wdth
, CSS property:font-stretch
), - optical size (axis tag:
opsz
, CSS property:font-optical-sizing
), - slant (axis tag:
slnt
, CSS property:font-style: italic
), - italic (axis tag:
ital
, CSS property:font-style: oblique <angle>
).
The font-variation-settings CSS property comes as a shorthand for all of them.
What are the advantages of variable fonts
When it comes to the variable fonts a big gain is given by the fact that all the font "stuff" can be placed in just one single file. Having just one single file means we make just one request for that font, so better performance.
The second advantage is flexibility. We can use the control axes to tailor the font to our exact needs. We are not restricted to just a few fixed formats.
Based on this we can do some really cool stuff if we combine CSS animations with variable fonts. For example, check out these codepens:
- https://codepen.io/petebarr/pen/MWKgmYW
- https://codepen.io/gayane-gasparyan/details/dyPEgVo
- https://codepen.io/electricgarden/pen/BaabNem
Either of them was not possible before variable fonts were not introduced.
Here we have a list of all the variable fonts available in Google Fonts.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.