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.

Minimum (Mobile)At this minimum viewport width, all font sizes in your type scale are computed as the base font size times a power of your chosen ratio.
Maximum (Desktop)At this maximum viewport width, all font sizes in your type scale are computed as the base font size times a power of your chosen ratio.
Type scaleProvide a comma-separated list of names for each step in your type scale, in ascending order of font size. Use any convention you want. Be sure to also identify the name of your base step.

Preview your type scale

Preview controls
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. 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