Contact
Contact

14 august 2025
Elegant typography on every screen with Utopia Font Scaling

At TwelveBricks, we pay close attention to the details that truly make websites stand out. One of those details is typography. Good typography doesn’t just look nice, it makes content easier to read and creates a clear visual hierarchy and rhythm. One of the newest additions to our design system is support for Utopia Font Scaling.

A pen with beautiful text on a piece of paper.

What is Utopia?

Utopia is a design framework by James Gilyead and Trys Mudford. It uses fluid font sizes (and optionally spacing) based on a mathematical relationship between a minimum and maximum viewport width.

Instead of setting fixed font sizes per screen (like 16px, 18px, or 20px), Utopia applies a formula that allows text sizes to scale smoothly with the viewport. This means that text and headings grow naturally and remain perfectly readable. On every device.

Content blocked

The external content is hidden because you have not yet given permission to place social media cookies.
https://www.youtube.com/watch?v=DDuGtN-GakA

Why we love it

1. Fluid, without breakpoints
Traditional responsive typography relies on fixed breakpoints, causing text to “jump” when resizing the screen. Utopia, on the other hand, scales smoothly and naturally. From mobile to wide screens, without any abrupt transitions.

2. Mathematically balanced type scale
Utopia defines a type scale: a sequence of font sizes that relate harmoniously to one another. Each step feels visually consistent, resulting in a clear hierarchy that designers love, and visitors subconsciously appreciate.

3. Always readable
Utopia keeps font size, line height, and white space in perfect balance across devices. Text remains neatly aligned as intended, improving both aesthetics and accessibility.

How we use it at TwelveBricks

Our design system uses Sass to generate the CSS for each project. To keep things flexible across different designs and clients, we rely on Sass and CSS variables throughout all our components. 

Fortunately, Utopia integrates seamlessly with Sass. This allows us to easily define and apply the right settings: we set a minimum and maximum font size, define the scale for headings, and the design system handles the rest.
All components immediately benefit from this setup.

It not only makes it incredibly easy to fine-tune typography per design, but also ensures every project looks consistent and well-balanced. The result feels unified, instead of a mix of separate styles.

Typography doesn’t always stand out, but when it’s done right, you can feel the difference. With Utopia, we make sure every design looks great, performs better, and just feels right on every screen. Just the way we like it at TwelveBricks.