Tag: font-variation-settings

Typography on the web has been quietly having its best decade ever. And sitting right at the centre of that glow-up is something that, once you understand it, genuinely makes you annoyed that we spent so long without it. Variable fonts are one of those things that sounds like a minor technical curiosity until you actually pull back the curtain and realise the entire approach to loading, rendering, and animating type has fundamentally shifted. If you care about variable fonts web development, buckle in.

The short version: a variable font is a single font file that contains the entire design space of a typeface. Weight, width, slant, optical size, and any number of custom axes the type designer has chosen to include. All baked into one file. One request. One render. Compare that to the old way of doing things, where you’d load a separate file for regular, bold, italic, bold italic, condensed, and so on. A website with four or five font variants could easily rack up half a megabyte of font requests before a single pixel of content loaded. Variable fonts fix that in an almost embarrassingly elegant way.

How Variable Fonts Actually Work Under the Hood

The OpenType specification (version 1.8, introduced back in 2016) added what’s called the OpenType Font Variations standard. Inside a variable font file, you have two kinds of data working together. First, you have the default glyph outlines, the master design, usually somewhere in the middle of the design space. Second, you have delta values: instructions that describe how each point in every glyph should move as you travel along a given axis.

Think of it like a 3D mesh being deformed by invisible handles. The font engine interpolates between these delta states in real time, at render time, on the fly. It’s genuinely clever. A weight axis with a range of 100 to 900 doesn’t store nine separate sets of glyphs. It stores the default outlines plus the instructions for how points shift as weight increases or decreases. The maths is relatively lightweight, and modern rendering engines handle it with barely a blink.

There are five registered axes in the OpenType spec that you’ll encounter most often: wght (weight), wdth (width), ital (italic), slnt (slant), and opsz (optical size). Beyond those, type designers can register entirely custom axes with four-character tags. The Recursive font, for example, has a MONO axis that morphs the typeface from a proportional sans-serif into a monospaced coding font. That’s not a gimmick. That’s genuinely useful for a codebase where you want visual consistency across UI and code samples.

Implementing Variable Fonts with CSS: The Practical Bit

Loading a variable font in CSS is mostly familiar territory, with one important addition. Your @font-face block needs to declare the ranges your font supports, otherwise the browser won’t know it’s variable and may not hand control of the axes over to you.

@font-face {
  font-family: 'InterVariable';
  src: url('/fonts/inter-variable.woff2') format('woff2 supports variations'),
       url('/fonts/inter-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

That font-weight: 100 900 range is the key signal. It tells the browser this file covers the full weight spectrum. Once loaded, you can do things that would have required multiple files before. Setting font-weight: 350 on a heading, for instance. That’s not a value traditional font stacks could honour. With a variable font, it just works.

The low-level axis control lives in font-variation-settings. Registered axes use lowercase tags; custom axes use uppercase.

h1 {
  font-variation-settings: 'wght' 720, 'wdth' 85;
}

.mono-code {
  font-variation-settings: 'MONO' 1, 'wght' 400;
}

One thing worth knowing: font-variation-settings doesn’t inherit gracefully the way font-weight does. If you set it on a parent and want to override just one axis on a child, you have to re-declare all the axes. It’s a small gotcha that catches people out. The workaround is to use CSS custom properties as intermediaries, which makes the whole thing considerably cleaner to manage at scale.

Animating Variable Fonts with CSS and JavaScript

Here’s where it genuinely gets fun. Variable font axes are animatable. You can transition weight, width, slant, all of it, with CSS transitions or JavaScript. The results can be subtle and refined or completely unhinged, depending on what you’re after.

A simple CSS transition on hover:

.nav-link {
  font-variation-settings: 'wght' 400;
  transition: font-variation-settings 0.2s ease;
}

.nav-link:hover {
  font-variation-settings: 'wght' 700;
}

That’s a weight transition on hover, no JavaScript, no extra files. Smooth, performant, a single font request.

For more dynamic control, JavaScript lets you tie axis values to user input, scroll position, cursor movement, or any other runtime data. A classic demo approach is mapping the mouse Y position to font weight across a heading. In practice, you’d reach for this kind of thing for interactive editorial pieces or portfolio hero sections where you want something genuinely memorable. The browser interpolates every frame, and because the glyph geometry is computed by the font engine rather than the GPU compositing layer, it stays crisp at any size.

const heading = document.querySelector('h1');

document.addEventListener('mousemove', (e) => {
  const weight = Math.round(100 + (e.clientY / window.innerHeight) * 800);
  heading.style.fontVariationSettings = `'wght' ${weight}`;
});

Straightforward, effective, and the kind of thing that lands differently in a live demo than it does in a paragraph of text.

Why Variable Fonts Make Sense for Performance-Conscious Projects

The performance case is fairly open and shut. Web font loading has historically been one of the trickier things to optimise for Core Web Vitals, particularly Largest Contentful Paint and Cumulative Layout Shift. Multiple font file requests introduce latency and render-blocking risk. A single variable font file, compressed in woff2 format, typically comes in smaller than three or four traditional weight files combined, even though it covers the entire range.

According to the web.dev documentation maintained by Google’s Chrome team, a variable font can reduce font payload significantly compared to loading multiple static weights, with real-world savings depending heavily on the typeface and how many weights a project actually needs.

Browser support is no longer a genuine concern in 2026. All modern browsers have supported variable fonts since well before this decade. The only edge case you’d realistically encounter is very old embedded browser environments, and font-display: swap handles graceful degradation there anyway. There’s very little reason not to use them.

Variable Fonts Worth Actually Using in Projects

For variable fonts web development work in 2026, a handful of typefaces come up repeatedly because they’re excellent and genuinely free. Inter Variable is practically standard at this point for UI work. Recursive is worth pulling in whenever you need a single typeface to span both interface copy and code samples. Fraunces is a beautiful display font with an optical size axis that makes it genuinely usable across wildly different contexts. All three are available via Google Fonts or direct download, with full variable font support.

If you want to inspect what axes a font exposes before committing to it, the Wakamai Fondue tool (fondue.underscoretype.com) is the most useful browser-based font inspector I’ve found. Drop a font file in and it tells you everything: axes, ranges, named instances, OpenType features. Proper nerd-level font archaeology.

The Bigger Picture for Design-Forward Web Work

Variable fonts aren’t a trend. They’re an infrastructure upgrade. The way the web loads and renders type has genuinely improved, and the design space that opens up when you’re not constrained to a handful of preset weights is larger than it first appears. Fluid typography systems, where font weight and size scale continuously with viewport width rather than jumping at breakpoints, are much more viable when you’re not loading a separate file for each step. Responsive type becomes genuinely responsive, not just responsive-ish.

The investment to get started is low. Swap one of your static font stacks for a variable equivalent on your next project. Spend twenty minutes with font-variation-settings. See what axis values your chosen typeface supports. The gap between knowing about variable fonts and actually using them confidently is smaller than most people expect, and the results speak loudly.

Frequently Asked Questions

What is a variable font and how is it different from a regular web font?

A variable font is a single font file that contains an entire range of styles along one or more design axes, such as weight, width, or slant. A traditional web font file contains only one fixed style, so loading multiple weights means multiple file requests. A variable font handles all of those in a single download.

Do variable fonts actually improve website performance?

Yes, in most real-world cases. A single variable font file in woff2 format is typically smaller than loading three or four separate static weight files combined. Fewer HTTP requests and a smaller total payload generally translate to faster load times and better Core Web Vitals scores, particularly for Largest Contentful Paint.

How do I use font-variation-settings in CSS?

You declare it as a CSS property with axis tags and values, for example: font-variation-settings: ‘wght’ 600, ‘wdth’ 90. Registered axes like weight use lowercase four-character tags, while custom axes defined by the type designer use uppercase tags. Be aware that this property doesn’t inherit partially, so changing one axis on a child element requires re-declaring all axes.

Can you animate variable fonts with JavaScript or CSS transitions?

Yes, and it works extremely well. The font-variation-settings property is animatable via CSS transitions and animations, or you can update it dynamically with JavaScript tied to scroll position, mouse movement, or any other runtime event. The browser interpolates between axis values smoothly at render time, keeping the output crisp at any size.

Which variable fonts are best for web projects in 2026?

Inter Variable is the go-to for most UI work given its readability and comprehensive axis support. Recursive is excellent when you need a single typeface to cover both interface text and monospaced code samples. For display headings, Fraunces offers an optical size axis that adapts elegantly across very different sizes. All three are freely available with full variable font support.