For decades, type on screen was constrained by the file model: one font file per weight, per style. Want Regular, Medium, Bold, and Italic? Four requests. Variable fonts collapse all of that into a single file that holds the entire design space.
What is a variable font?
A variable font encodes multiple design variations along one or more axes. The most common axes are weight (wght), width (wdth), optical size (opsz), and slant (slnt). Custom axes let type designers build bespoke interpolations ÔÇö a casual axis, for example, might shift a sans-serif from serious to playful.
Performance implications
A single variable font file replacing four separate weights typically reduces total font payload by 30ÔÇô60%. On slow connections, this has a measurable impact on Largest Contentful Paint.
Design implications
The weight axis isn't just about headlines and body text anymore. You can tune weight in response to context: slightly heavier on dark backgrounds (optical compensation), lighter at large display sizes, or animated on interaction.
"Typography is the detail and presentation of a story." ÔÇö Cyrus Highsmith
Getting started
Google Fonts hosts a growing collection of variable fonts. In CSS, use font-variation-settings to control axes, or the higher-level font-weight, font-style, and font-stretch properties which now accept ranges.
