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. This is in contrast to the usual practice of loading font files individually — one file for each font style. 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:


 * 1) Weight
 * 2) Width
 * 3) Italics
 * 4) Slant
 * 5) 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
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

 * Google Fonts
 * V-Fonts.com
 * Future Fonts
 * Fontesk
 * Fonts Arena
 * FontSpace

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)