Variable fonts, explained simply

A variable font is a single font file that contains a whole range of styles — every weight from thin to black, sometimes width, slant, optical size and more — all controllable on a sliding scale. Instead of loading separate files for Regular, Medium and Bold, you load one file and dial in exactly the style you want.

That’s the whole idea. The interesting part is what it lets you do.

Axes: the sliders inside the font

Each adjustable property in a variable font is an axis, identified by a four-letter tag. The five registered axes are:

• wght (Weight) — thin to black, the most common axis.
• wdth (Width) — condensed to expanded.
• opsz (Optical size) — subtle shape changes so the font looks right at small and large sizes.
• slnt (Slant) — a slanted (oblique) version.
• ital (Italic) — switches to true italic forms.

Fonts can also define custom axes — Roboto Flex famously exposes more than a dozen, including grade and ascender height. You can move any of these with the CSS property font-variation-settings, or via the playground on a font’s page. Open a variable font like Inter or Fraunces and drag the sliders to feel it.

Why variable fonts can make your site faster

Here’s the practical win. Suppose you use four weights of a family. As static fonts, that’s four files to download. As a variable font, it’s one file — and while that file is a little larger than a single static weight, it’s almost always smaller than three or four of them combined.

Fewer requests, less total weight, and the freedom to use any weight in the range — not just the four you bothered to load. For sites that lean on typography, this is one of the easier performance wins available.

A caveat: if you only ever use a single weight, a static font is still lighter. Variable fonts pay off when you use several styles of the same family.

Optical sizing, the underrated axis

opsz is the one most people miss. A typeface designed for body text and one designed for a giant headline want different shapes — thinner hairlines and tighter spacing look great big but fall apart small. Optical size bakes both extremes into one font and interpolates between them based on the size you’re rendering. Fonts like Fraunces and Newsreader use it beautifully.

How to use one

On the web it’s mostly automatic. When you request a variable font from Google Fonts and set a font-weight, the browser picks the right point on the weight axis. To go further:

font-variation-settings: "wght" 540, "opsz" 32;

That sets a weight of 540 (a value you’d never get from static fonts, which only ship in hundreds) and an optical size of 32. The easiest way to find values you like is to drag the sliders in a font’s variable playground and read off the numbers.

Try it

1. Open a variable font’s page — Inter, Fraunces or Roboto Flex.
2. Drag the axis sliders and watch the letters respond.
3. Note the weight value you like — then use it in your CSS.

Want to inspect a font file you already have? The font inspector reads any TTF, OTF or WOFF and lists its axes and ranges.

FAQ

Are variable fonts better than static fonts? For multi-weight use, usually yes — one file instead of several, plus access to every weight in the range. For a single weight, a static font is lighter.

Do all browsers support variable fonts? Yes — every modern browser has supported them for years.

How do I see a font’s axes? Open its page on FontTest for a live playground, or drop the file into the inspector to list the axis tags and ranges.