typography, variable fonts, tips

Typography tips: What are variable fonts?

Schrift: TypoLabs
Font: TypoLabs

A “variable font” combines an entire font family into a single font file. From Condensed to Wide, from Light to Black — everything in one font and infinitely adjustable. This makes linear widening and narrowing possible — even between known font styles.

Most variable fonts are based on the idea of multiple master fonts and the calculation of intermediate stages. Here, you can interpolate or even extrapolate between two points. For example, you draw a light and a bold cut (or a tight and a wide cut) and interpolate between these master cuts to obtain all imaginable intermediate levels.

Kleinere Dateigrößen: Einzelne Schriftdateien der FF Meta (links) im Vergleich zur FF Meta Variable (rechts). Kleine Dateigrößen sind vor allem im digitalen Bereich wichtig. Grafik: Philip Walch, aus seinem Buch Very Able Fonts
Smaller file sizes: Individual font files of
FF Meta (left) compared to FF Meta variable (right). Small file sizes are particularly important in the digital sector. Graphics: Philip Walch, from his book Very Able Fonts

The file size of a single variable font is much smaller than an entire font family and thus improves loading times and thus the performance of a website.

On the downside, the user has more options — and therefore more opportunities to do something wrong. For people with little experience working with writing, this can be overwhelming.

More information about variable fonts:
abctypo.de/monotype-vf
abctypo.de/microsoft-vf

More typography tips and basics can be found in the book”The ABC of typography”.