Type
Utopia
The Lowdown
What Are type scales
Type scales are levels of font sizes that work to create consistent increments starting from a base font size. These can be helpful for creating visually cohesive design systems and are useful for maintaining visual hierarchy
Type scales & web design
Type scales can be difficult to implement in web design because of the need for design systems that are responsive across breakpoints. While they can still be valuable they are tricky for a number of reasons:
- Type still needs to be accessible (allowing users to zoom in is important)
- Often different scales are needed for desktop and mobile as desktop allows for much larger headings
- Remembering size amounts can be difficult because type scales generally create very random and difficult to remember pixel values.
Type scales & web design
Utopia is a cohesive fluid responsive design system that lets you setup variables that will adapt across breakpoints using robust CSS calculations. The system allows you to define your own variables based on:
- The body
fonton min and max sizes - Two unique type scales on min and max sizes
- Viewport vs Container sizing
It is both easy to setup and incredibly fun to play around with.
This Cloneable
While I had stumbled on Utopia’s design system before I hadn’t looked into it too deeply because it didn’t seem feasible to use in Webflow, but after Webflow released native variables this opened a whole new door to explore.Check out below for the type scale and instructions on implementing Utopia Type Scale’s into your builds.
The Scale
Font Size 8
Font Size 7
Font Size 6
Font Size 5
Font Size 4
Font Size 3
Font Size 2
Font Size 1
Font Size 0
Font Size -1
Font Size -2
How to Use it
first Thoughts
I have not used this on any client projects yet, just played around with it in some tests so I’d try it out a bit before jumping in and using it on your next project. That being said, I think the type scale system is modular enough it could be used in Client-First, Lumos, MAST, or several other frameworks if you want to implement it.
USing the Calculator
Using the calculator is pretty intuitive, just play around with it and see how things look. In general you will want a larger type scale on desktop than mobile, and often a slightly larger body size, but have fun and see what works.
Updating it in Webflow
For this project I’ve setup the code so you can easily copy and past the code directly from The utopia calculator and it should work (note to keep the same amount of type sizes if you want all of them to work as expected).
That being said, in your own projects you’ll either probably have to update the names of the variables after pasting them into webflow. I’d recommend using folders in your webflow variable names which will involve something like the variables below.
Note: I’d recommend using the container option instead of the viewport one but try them both out, if you’re using containers you’ll need to input the following code into your project as well. (This can now be done directly in the custom properties of a class, woohoo
Next Steps?
Utopia also has a responsive spacing system that is based on the same type scales, while I didn’t implement that in this cloneable its worth checking out if you’re liking how the type scales work, its a small bit trickier to setup since it probably requires more unique values with different scaling but a lot of the core concepts are the same. If you liked this feel free to give it a shout out on twitter.
