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.

Minimum (Mobile)Define the minimum font size and viewport width for your type scale's baseline step. The minimum font size for all other steps is this baseline font size scaled up/down by your chosen type scale ratio.
Maximum (Desktop)Define the maximum font size and viewport width for your type scale's baseline step. The max font size for all other steps is this baseline font size scaled up/down by your chosen type scale ratio.
Type scaleProvide a comma-separated list of names for each step in your type scale, in ascending order of size. Use any convention you want. Be sure to also select your base modular step.

Preview your type scale

StepMinMaxRenderedPreview
sm0.8rem0.89rem0.89remAlmost before we knew it, we had left the ground
base1rem1.19rem1.19remAlmost before we knew it, we had left the ground
md1.25rem1.58rem1.58remAlmost before we knew it, we had left the ground
lg1.56rem2.11rem2.11remAlmost before we knew it, we had left the ground
xl1.95rem2.81rem2.81remAlmost before we knew it, we had left the ground
xxl2.44rem3.75rem3.75remAlmost before we knew it, we had left the ground
xxxl3.05rem5rem5remAlmost 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