Variable Fonts in Web Design

Variable fonts are revolutionising typography in web design. They bundle all font variants such as weight, width or slant in a single file. This saves storage space, reduces loading times and enables precise customisation.

Why do they matter?

• Performance: One file instead of many – up to 88% smaller file sizes.
• Flexibility: Dynamic adjustments for responsive design and accessibility.
• CSS control: Axes such as wght, wdth or opsz for fine-grained control.

Google Fonts already offers over 2,500 variable fonts. Modern browsers fully support this technology, while fallback strategies cover older systems.

Better performance and smaller file sizes

Variable fonts offer an enormous improvement in loading times and performance. In contrast to conventional typefaces, where each variant exists as a separate file, variable fonts bundle all these styles in a single file. This means fewer HTTP requests and shorter loading times.

An example illustrates the difference: instead of six static files with a combined size of around 155 KB, a variable font requires only approximately 100 KB – and this despite offering an infinite number of intermediate steps. Thanks to modern browsers supporting the WOFF2 format with Brotli compression, these files are around 30% smaller than the older WOFF format.

Flexibility for responsive design

Variable fonts are perfectly suited to responsive design. The width axis (wdth) allows letterforms to be adapted to narrow mobile screens without reducing the font size. Particularly exciting is the grade axis (GRAD), which changes the visual density of the typeface without affecting the width of the characters.

Another highlight is the optical size axis (opsz), which automatically adjusts stroke widths and details to the display size. Small text becomes more legible with thicker strokes, while large headings show finer details.

Implementing variable fonts

The first step is using the @font-face rule. Instead of specifying only a single value, you define ranges here, e.g. font-weight: 100 900, to tell the browser all available variations.

When loading the typeface, you should use format('woff2-variations'). WOFF2 is the current standard, as it compresses approximately 30% better. To remain GDPR-compliant, host the font files locally.

Performance optimisation

Using WOFF2 in combination with Brotli compression can reduce file size by up to 30%. One of the most effective methods is font subsetting: with tools like pyftsubset, the size of a variable font file can be reduced from around 300 KB to just 70 KB.

It is advisable to self-host fonts rather than loading them from external CDNs. This reduces latency and meets GDPR requirements.

Conclusion

Variable fonts are a genuine performance win. By combining multiple font styles in a single file, the number of HTTP requests and file size drop significantly – savings of up to 88% are achievable. At the same time, they offer a flexible range of design possibilities: font weights can be adjusted from 1 to 1,000, and the optical size axis automatically ensures optimal legibility.