An excellent explainer from Trys and James of their supersmart Utopia approach:
Utopia encourages the curation of a system small enough to be held in short-term memory, rather than one so sprawling it must be constantly referred to.
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!
Sounds like some convergent thinking with the ideas behind Utopia.
I think that the idea that that any typographic attribute (including variable font parameters) can be a function (linear, exponential, stepped, Bezier, random, or otherwise) of any given input variable (user preference, screen dimensions, connection speed, time of day, display language, or whatever else) is an incredibly powerful one, and worth exploring as an aesthetic as well as a technical proposition.
Here’s a demo you can play with.
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.
I linked to the first of Ethan’s short videos on accessibility last week, but it’s well worth checking out all five:
2010 was quite a year:
And exactly three weeks after Jeremy Keith’s HTML5 For Web Designers was first published, “Responsive Web Design” went live in A List Apart.
Nothing’s been quite the same since.
I remember being at that An Event Apart in Seattle where Ethan first unveiled the phrase and marvelling at how well everything just clicked into place, perfectly capturing the zeitgeist. I was in. 100%.
Andy takes Utopia for a spin—it very much matches his approach.
This is the project that Trys and James have been working on at Clearleft. It’s a way of approaching modular scales in web typography that uses CSS locks and custom properties to fantastic effect.
Utopia is not a product, a plugin, or a framework. It’s a memorable/pretentious word we use to refer to a way of thinking about fluid responsive design.
Ethan’s ode to the fr unit in CSS grid.
A really great case study of a code refactor by Mina, with particular emphasis on the benefits of CSS Grid, fluid typography, and accessibility.
A very very in-depth look at fluid typography in CSS using calc.
Some really great CSS tips from Rich on sizing display text for multiple viewports.
See now, this is why liquid layouts are the way to go.
Luke catalogues layout patterns in responsive designs.
Stephanie focuses on Android but this is a cautionary tale about trying to impose control over what you’re sending to the multitude of mobile devices out there.
Designing to fixed screen sizes is in fact never a good idea…there is just too much variation, even amongst ‘popular’ devices.
The process behind the mobile-first responsive design of audiovroom.com.
On the importance of using a fluid grid in responsive design.
A framework for banging out ready-made responsive designs.
A set of default styles to get started on a mobile-first responsive design.
I’m usually not a fan of CSS “frameworks” but I like the thinking that’s gone into this fluid, responsive system. I particularly like this advice:
Take it apart, steal the parts that you like, and adapt them to your own way of working.