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 scale Provide 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.
--fs-sm: clamp(0.8rem, 0.17vi + 0.76rem, 0.89rem); --fs-base: clamp(1rem, 0.34vi + 0.91rem, 1.19rem); --fs-md: clamp(1.25rem, 0.61vi + 1.1rem, 1.58rem); --fs-lg: clamp(1.56rem, 1vi + 1.31rem, 2.11rem); --fs-xl: clamp(1.95rem, 1.56vi + 1.56rem, 2.81rem); --fs-xxl: clamp(2.44rem, 2.38vi + 1.85rem, 3.75rem); --fs-xxxl: clamp(3.05rem, 3.54vi + 2.17rem, 5rem);

Preview your type scale

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

About this tool

Design systems traditionally used static type scales, where the steps in the scale are not dependent on the viewport or container width. This means that developers have to write media queries to switch font sizes at mobile, tablet, and desktop breakpoints. But in practice, there are innumerable device widths and orientations, so there are always going to be edge cases where your font sizes are either too large or too small.

By contrast, in a fluid type scale, each step has a minimum, maximum, and variable (viewport-dependent) font size. We can use CSS clamp and viewport width (vw) units to generate a set of font size variables that scale linearly. This means you no longer need to worry about fine-tuning your design for discrete device widths: Just pick your minima and maxima, and the font sizes will scale fluidly in between.

Learn more