Making the web more beautiful, fast, and open through great typography

Apr 3, 2025 · Variable fonts are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. They let you access all the variations contained in a given font file via CSS and a single @font-face reference.

Variable fonts remove the explicit distinctions between different weights and styles, and put more typographic control in the hands of the user.

Whether loading variable fonts from a font delivery service or our own server, the actual styling of them via CSS is the same as standard, non-variable fonts.

Jul 12, 2021 · Right now it looks like there are five “common axes” that fonts let us change variably. So that’s stuff like font-weight and font-stretch which lets you make letters more or less condensed. This all depends on what the specific font supports though, so make sure you know what features the font has before you buy it (this is why test fonts rule).

Feb 19, 2018 · How variable fonts work, how typographers implement variable fonts, and how to work with variable fonts in CSS.

This new breed of fonts can be finely adjusted by eye or by automation, just once for a simple document or many times per second for live interaction and animation. Use variable fonts to explore and push design flexibility and new boundaries even further—and save web bandwidth at the same time. Resources. Variable fonts and documentation from ...

Learn how to use variable fonts in your projects for improved UI design, long-form reading, and accessibility.

Sep 7, 2023 · In this article, we'll delve into the world of variable fonts and provide a step-by-step guide on how to use them effectively in your CSS. What Are Variable Fonts? Variable fonts are a groundbreaking technology that allows designers to achieve a wide range of font styles within a …

Dec 1, 2022 · Let's take a look at what variable fonts are, what benefits they offer, and how we can use them in our work. Variable fonts are not built on the explicit difference between fixed weights and styles. Let's take, for example, the well-known Roboto font.