A client came to us with four font families, nineteen static weights and a 480KB font payload before a single word of copy rendered. Nobody had chosen that on purpose. It accumulated, the way these things do, one “can we make this a bit bolder” request at a time.
Variable fonts fix that specific mess. One file, every weight between the extremes, and a design system that can move weight without downloading a new asset. They also come with their own traps, which is why the second half of this article is about loading them properly.
What a variable font is
A static font is one drawing per style. A variable font stores interpolation rules between several masters, so every value along an axis is a valid drawing the font can produce when asked. Request weight 437 and it does not snap to 400 or 500 – it draws 437.
That shifts the design conversation. Instead of picking from five weights, you tune how heavy a heading should be in this particular layout, and you can shift a whole page’s typographic weight from one number.
The axes worth learning
wght is weight, usually 100 to 900, and it is 90% of the value. wdth is width, typically 75% to 125%, useful for tight headlines and for squeezing labels into narrow UI. opsz is optical size, which does what type designers have done for a century: thinner strokes at display sizes, sturdier ones at 12px. ital or slnt covers italic, sometimes continuously rather than on or off.
Then there are the custom axes, where families get interesting. GRAD adds weight without changing text flow, CASL moves between casual and formal, MONO switches proportional to monospaced. Recursive uses several of them at once to replace three typefaces with one file.
Two consequences for web work. More axes usually means a bigger file, and an axis you never declare still costs bytes. Load what the design needs, not what the specimen page offers.
The weight math
Four static weights at 40KB each is roughly 160KB, plus four more for italics. A single variable file covering 100 to 900 is often 60-90KB, and it covers every value in between instead of four fixed stops.
The saving gets better with ambition. A marketing page that wants a headline at 720 and a caption at 430 costs nothing extra with a variable font, and looks like a compromise with static files. On a site with a real performance budget – and every site should have one – this is the cheapest win in typography.
Eight worth shipping in 2026
Inter – interface work
Inter was drawn for screens and it shows: tall x-height, unambiguous letterforms, excellent figures. Use it for UI, tables, forms and documentation, and let weight carry the hierarchy instead of size alone. It is also a very safe body face for long reading, which is not true of most grotesques.
Manrope – headings and display
Manrope has the friendly-but-serious geometric tone that suits modern product and editorial brands, and it pairs with Inter without fighting it. We run exactly that pairing on this site – Manrope for display, Inter for text, self-hosted, with a display swap.
Roboto Flex – the laboratory
Roboto Flex carries an unusually wide set of axes: weight, width, optical size, grade and more. It is the font to open when you want to find out how far a single file can stretch, and a defensible choice when one family has to cover everything from dense data to a poster.
Source Serif 4 – editorial body
A readable, slightly sturdy serif with a full weight range and real italics. Good for long-form articles where a sans feels too brisk, and formal enough for policy pages and documentation without tipping into corporate.
Fraunces – expressive display
Fashion-editorial: soft serifs, a wink in the details, and an opsz axis that stops it going brittle at large sizes. Perfect for one headline per page. Painful for body copy, and the people who try it always come back.
Recursive – two personalities, one file
Recursive slides between casual and formal with CASL, and between proportional and monospaced with MONO. For a technical product that wants one typeface across marketing, UI and code blocks, nothing else is this efficient.
Space Grotesk – technical branding
Derived from Space Mono, with quirky terminals and a confident width. It reads as engineering-adjacent without the usual clichés, which makes it a strong pick for developer tools and data products.
Bricolage Grotesque – contemporary editorial
A newer grotesque with an optical size axis and a slightly awkward personality that happens to be very current. Good for culture, design and media brands that want to look considered rather than corporate.
How to test a family in ten minutes
Set three things in every candidate before you decide. A two-line headline, a paragraph of real copy from the site, and a row of figures including 1, 4, 7 and 0. Numerals are where most families reveal themselves: tabular versus proportional, and whether the four is legible at 12px in a table.
Then check the italic. A variable font with a synthetic italic is a variable font with a flaw, and you will notice it the moment a caption needs emphasis.
Pairing rules that hold up
- One display face, one text face. Two is a system; four is a mood.
- Contrast the skeleton, agree on the tone. A geometric sans with a humanist serif works because the structures differ and the warmth matches.
- Let weight do the work. With a variable family you rarely need a third typeface to build hierarchy – jump from 400 to 700 and adjust tracking.
- Never pair two families with the same skeleton. Inter next to Roboto is mud; Inter next to Fraunces is a decision.
Loading them without breaking the page
Self-host the file, limit the axes, and declare the range you actually use:
@font-face {
font-family: "Inter";
src: url("/fonts/inter-var.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}Three notes on that snippet. font-display: swap shows fallback text immediately instead of hiding the page behind a font request. The weight range tells the browser this one file covers every weight, so it does not fake bold by smearing the outline. And a single preload for the face used above the fold is worth it – preloading four families is not.
Subsetting helps as well. Latin-only can cut a file in half. Just remember that a subset which drops accented characters will look broken the first time a name needs a diacritic, and it will happen on a client demo.
Checking it before launch
- Load with cache disabled and watch for the shift when the font arrives. If it is jarring, fix the fallback metrics rather than adding more preloads.
- Zoom to 200% and confirm the hierarchy still reads.
- Read a full paragraph at 16, 18 and 20px. Some variable fonts thin out at small optical sizes.
- Add up the font bytes. Under 100KB is a reasonable target for a content site.
Quick answers
Are variable fonts supported everywhere?
In every current browser, including mobile Safari. What ignores them is older embedded browsers and some email clients, which fall back to a static weight.
Do they make pages slower?
Usually faster, because one file replaces four. The exception is a heavy multi-axis file when you only needed regular and bold – there, a two-weight static subset can still win.
Can I animate a variable font?
Yes, with transitions on font-variation-settings. Keep it subtle: a hover that shifts weight a little feels expensive, a heading that pulses does not.
Two fonts for someone starting from zero?
Inter for text, Manrope for headings. Free, variable, self-hostable, and designed to sit next to each other without a fight.