How it works
A modular type scale consists of a baseline font size and proportionally smaller and larger font sizes. Traditionally, design systems used static type scales, where each step has a fixed font size at every viewport width.
By contrast, in a fluid type scale, each modular step has a minimum, maximum, and variable font size. We can leverage CSS
clamp and viewport width (
vw) units to generate a set of font size variables that scale linearly between their minimum and maximum sizes, with mathematical precision.
This is done by solving the equation
y = mx + b, which corresponds to the preferred value in a CSS
- Creating a Fluid Type Scale with CSS Clamp by yours truly! A deep dive into the math behind this technique.
- Modern Fluid Typography Editor, a handy tool by Adrian Bece that allows you to visualize a CSS
- Type Scale - A Visual Calculator by Jeremy Church.
- Utopia Fluid Type Scale Calculator by James Gilyead and Trys Mudford.
- Consistent, Fluidly Scaling Type and Spacing by Andy Bell.
- Using calc to figure out optimal line-height by Jesús Ricarte. You'll need this if you want your line heights to look readable on any font size.