Fluid Type Scale Calculator
Generate font size variables for a fluid type scale with CSS clamp. Grab the output CSS and drop it into any design system.
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 clamp
declaration.
Learn more
- 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
clamp
declaration. - 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.