Variable Fonts
Design Processes
A single font file containing a continuous range of weights, widths or other axes.
In practice
A variable font packs what used to be many separate files — light, regular, medium, bold — into one, with the ability to set any value between them and often to vary width, slant or optical size too. It cuts file weight, enables fluid typographic animation, and gives designers exact weights rather than the nearest one the foundry happened to cut.
Questions
What is Variable Fonts?
A variable font is one font file exposing adjustable design axes, so weight, width or other properties can be set to any value in a range rather than chosen from fixed styles.
Why do you use Variable Fonts?
Fewer, smaller files for faster pages; finer typographic control; and the ability to animate type smoothly between states.
How do you use/apply Variable Fonts?
Load the variable file, set axes with font-variation-settings or the standard weight and stretch properties, and define the exact values in your type scale.
When do you use Variable Fonts?
Whenever a typeface offers one and you use more than two weights — the payoff grows with every style you would have loaded.
Who uses Variable Fonts?
Brand, product and web designers, and developers implementing type.
