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.

Base font size (px)Screen width (px)Type scale 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.

Base font size (px)Screen width (px)Type scale 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.

All stepsBaseline step

Variable prefixUse whatever naming convention you prefer.RoundingThe maximum number of decimal places in the output.Use container inline size (cqi) instead of viewport widthNote: Container queries may not be supported by all browsers.Include fallback CSSFall back to media queries if the browser doesn't support clamp.Use rems instead of pixels for font sizeIt's recommended that you use rems for font size to respect user preferences in browser settings.

Preview your type scale

Font familyPreview text

Screen width (px)

Step	Min	Max	Rendered	Preview
sm	12.8px	14.25px	14.25px	Almost before we knew it, we had left the ground
base	16px	19px	19px	Almost before we knew it, we had left the ground
md	20px	25.33px	25.33px	Almost before we knew it, we had left the ground
lg	25px	33.76px	33.76px	Almost before we knew it, we had left the ground
xl	31.25px	45px	45px	Almost before we knew it, we had left the ground
xxl	39.06px	59.99px	59.99px	Almost before we knew it, we had left the ground
xxxl	48.83px	79.97px	79.97px	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. 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.