Retrofitting fluid typography | Clagnut by Richard Rutter
Here’s a taste of what Rich will be delivering at Patterns Day on Thursday—can’t wait!
Utopian project kickstarter — Figma
Do you like the ideas behind Utopia? Do you use Figma?
If the answer to both those questions is “yes”, then James has made a very handy Figma community file for you:
This work-in-progress is intended as a starting point for designers to start exploring the Utopia approach, thinking about type and space in fluid scales rather than device-based breakpoints.
Related links
Some simple ways to make content look good - Set Studio
This is a terrific walkthrough from Andy showing how smart fundamentals in your CSS can give you a beautiful readable document without much work.
Utopia - an introduction - YouTube
James and Trys have made this terrific explanatory video about Utopia. They pack a lot into less than twenty minutes but it’s all very clearly and methodically explained.
Fluid Space Calculator | Utopia
Type and space are linked, so if you’re going to have a fluid type calculator, it makes sense to have a fluid space calculator too. More great work from Trys and James!
Clamp | Utopia
Trys has been investigating how to incorporate CSS clamp() into the brilliant Utopia project. I won’t pretend to understand all the maths here—this is a very deep dive!
He’s also created a CSS generator Mark 2 if you want to use clamp() in your fluid type.
Related posts
Making the Patterns Day website
The joy of getting hands-on with HTML and CSS.
Utopia
Why do I like fluid responsive typography? Let me count the ways…