Get responsiveness with variable fonts

September 2020

In other articles we have discussed what variable fonts are, how to buy them, and why they are such game-changers for digital design. But what can variable fonts do for responsive design?


 

Most Web browsers now support variable fonts, which opens possibilities for fine typesetting that were simply not there before (check Nick Sherman’s Variable Fonts site for updated information). We selected Literata and Portada, two typefaces with design variation tables that support the weight and the optical size axes, to create a proof of concept for how responsive design benefits from this new technology.

CSS had already allowed developers to fine-tune the line width, leading, and text size based on the user’s device and screen resolution. They could even change the font. But with variable fonts they can also introduce small variations that improve font performance based on the context. Now fonts can be just a bit bolder when switching to dark mode or they can adjust the optical size value to deliver designs that are specific for each pixel size.

The goal is simple: deliver the best legibility experience across devices. Watch the videos below or follow the links to test the demos for yourself.

Literata demo
Portada demo





 

About Us

TypeTogether is an indie type foundry committed to excellence in type design with a focus on editorial use. Additionally, TypeTogether creates custom type design for corporate use. We invite you to browse our library of retail fonts or contact us to discuss custom type design projects.