With variable fonts, there’s no need to compromise typography and design for performance. Variable fonts can respond and adapt to factors like screen size and resolution to optimize design fidelity, readability, and legibility all with just a few lines of CSS. Single files can be used in place of much larger, costlier groups of related font files. This smaller file size allows for faster load time and decreased bandwidth costs. Working with a variable font can futureproof your design system, as it will give you access to styles better suited to your needs as your brand evolves. Explore some fonts below, or learn more about what you can do.
an informative point of entry by designer John Hudson
Microsoft’s technical documentation about this new font technology
Type Network’s introduction to a series looking at different aspects of working with variable fonts
Bas Jacobs of Underware speaks with us about how the dynamic possibilities of variable fonts
How the web’s most accessible and flexible collection of government websites was produced using variable fonts
Font Bureau is developing variable fonts for Google that enable precision typography in dynamic environments
A conversation with Typetura about enabling easy variable font usage online
Turning our attention to action: How to use variable fonts in your web designs
XYZ Type created a branded variable font with a unique axis to emphasize a client’s unique voice
A look at recent identity projects that are embracing the flexibility of variable fonts
Plau creates a typeface that speaks to all with an array of voices.
Typographic experiments that may help us adapt to our changing digital landscape