variable fonts
A variable font is a font file that consolidates all styles available for a given font into a single font file, which usually decreases file size, sometimes used as a web font on personal sites.
This is in contrast to the usual practice of loading font files for each font style individually. With variable font files, additional styles are mathematically interpolated between glyphs, which is one of the reasons why variable font files can be smaller than their static counterparts.
There are five registered axes upon which variable fonts can vary:
- Weight
- Width
- Italics
- Slant
- Optical size
Aside from those five registered axes, variable fonts can also contain custom axes — arbitrary stylistic spectrums along which the font can also transform. For example, a typographer using custom axes would be able to create a font variant that transforms and/or removes the serifs or the descenders in their font.
An intro to variable fonts
hibs presented An Intro to Variable Fonts at Category: IndieWebCamp East 2020. This intro contains:
- a brief explanation of what variable fonts are
- an introduction to the 5 registered axes in the OpenType specification
- an introduction to the custom axes that are possible with variable fonts
- embedded CodePen demos showing what you can do with variable fonts
- resources for finding variable fonts to use in your web projects
- resources for learning more about variable fonts
Learn more about variable fonts
- MDN Variable Fonts Guide
- Variable Font Support Info from Can I Use
- OpenType Design-Variation Axis Tag Registry
- Introduction to variable fonts on the web
Where to find variable fonts
Additional resources
- Getting the Most Out of Variable Fonts on Google Fonts | CSS-Tricks
- DHTML demos (unfortunatey these don't seem to work right now)