# 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 existing design system.

## Preview your type scale

Step | Min | Max | Rendered | Preview |
---|---|---|---|---|

sm | 0.8rem | 0.89rem | 0.89rem | Almost before we knew it, we had left the ground |

base | 1rem | 1.19rem | 1.19rem | Almost before we knew it, we had left the ground |

md | 1.25rem | 1.58rem | 1.58rem | Almost before we knew it, we had left the ground |

lg | 1.56rem | 2.11rem | 2.11rem | Almost before we knew it, we had left the ground |

xl | 1.95rem | 2.81rem | 2.81rem | Almost before we knew it, we had left the ground |

xxl | 2.44rem | 3.75rem | 3.75rem | Almost before we knew it, we had left the ground |

xxxl | 3.05rem | 5rem | 5rem | Almost before we knew it, we had left the ground |

## How it works

A modular type scale consists of a baseline font size and proportionally smaller and larger font sizes. Design systems traditionally used static font sizing, 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 with linear interpolation by solving the equation `y = mx + b`

, which corresponds to the preferred value for 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. - Consistent, Fluidly Scaling Type and Spacing by Andy Bell.
- Type Scale, a tool by Jeremy Church.
- 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.