Utopia

I wrote a tiny CodePen to show how little code you need to get your typography scaling smoothly with the viewport: Simple Utopia typography demo Resize your browser window and watch the heading and body text gradually change size.

We’ve published a second video on our Utopia YouTube channel, walking through the project kickstarter file we maintain on Figma Community.

A new allPairs parameter has been added to utopia-core-scss.

Communicating the power and simplicity of fluid typographic scales to Utopia newcomers continues to be a focus for us.

Our flagship Figma plugin and Utopian kickstarter have been rewritten to support the latest Figma features.

Fast-following from the SCSS plugin, Utopia now has a PostCSS plugin.

To assist developers using SCSS & Utopia, we’ve published utopia-core-scss.

Utopia offers a holistic approach to type & space systems.

We're pleased to announce that the Utopia Fluid Type + Space calculator now supports Figma variables.

A layout grid is a useful aid for a designer organising information in a given space.

Until now, the tooling for Utopia has been predominantly developer-focused, but we know that's only half the story.

We were recently invited to speak at UX Ghent for their frontend-themed evening.

When it comes to design systems, it's all too easy to focus on the components, the chunky bricks that make up majority of the digital experiences we use.

Space is the ultimate fundamental; the most ubiquitous “thing” there is.

CSS has some exciting new features for fluid scaling. clamp(), min(), and max() are functions that cap and scale values as the browser grows and shrinks.

We've just published a second generator for Utopia.

A quirk of composing type to a scale is that a larger ratio will translate to larger font size jumps both above and below your body copy size.

A core theme of the seminal introduction to responsive web design was an acceptance of the 'ebb and flow' found on our inherently fluid web.

A modular scale is a mathematical rule that one can use to create intentional and harmonious typography sizing.

Breakpoint-based type sizing has always felt a bit arbitrary to me.