CSS Fluid Typography Builder

The CSS fluid typography builder derives the slope and intercept pair for every step of a scale, so type grows smoothly between two viewports instead of jumping at a breakpoint. Each step is exported as a clamp declaration and a token.

What is CSS Fluid Typography Builder?

The CSS fluid typography builder takes a modular scale and turns every step into a declaration that grows linearly between a mobile and a desktop viewport. The output is not a set of breakpoints but a pair of values per step: a slope, which is how fast the size grows per pixel of viewport width, and an intercept, which is the size the line would have at a zero-width viewport.

Six inputs describe the ramp, and each one moves the result.

• The base size and the ratio generate the scale, exactly as they would in a fixed ladder.
• The mobile and desktop viewports set the endpoints of the ramp: below the first, every step holds its minimum, and above the second it holds its maximum.
• The step count decides how many rungs are emitted, from two to seven.
• The mobile-to-desktop scale factor, from 0.5 to 1.0, decides how much smaller each step is at the narrow end.

The arithmetic per step is two lines. The slope is the difference between the maximum and the minimum size divided by the difference between the two viewport widths; the intercept is the minimum size minus the slope multiplied by the mobile viewport. The preferred value in the declaration is then the intercept expressed in rem plus the slope expressed in viewport width units, and the clamp holds the minimum at one end and the maximum at the other. Expressing the intercept in rem matters for accessibility: when a visitor raises their default font size, the rem part of the preferred value grows with it while the viewport part does not, so the type responds to the user's setting rather than to the screen alone.

The panel states the ramp's shape in words as a check: how wide the viewport range is, and what the mobile-to-desktop ratio works out to. The table reports each step's minimum, maximum and preferred term in full, and the rendered ramp is laid out below it so the growth can be watched by resizing the window rather than read off numbers. The exported block declares one custom property per step — from the top of the scale down to the base — and then one class per step that applies it, so a component can adopt a single step without copying the whole scale.

Four limits are worth knowing before the tokens are adopted.

• The preferred value assumes a sixteen-pixel root, so a project that changes the root size shifts the rem component of every step.
• Viewport-based growth ignores container width, so a step inside a narrow sidebar still grows with the browser rather than with the box it sits in; a container query is the modern answer.
• A seven-step scale produces fourteen declarations before anything is styled, which is the price of expressing a ramp as tokens.
• The mobile-to-desktop factor applies to every step equally, so a scale whose small steps should compress more than its display sizes needs those steps adjusted by hand.
• Nothing checks the midpoint of the ramp, so a value that grows convincingly at both ends can still pass slowly through the middle.

Read the table as the specification of the ramp: the minimum, the maximum and the preferred term of each step together describe the whole of its behaviour.

How to use CSS Fluid Typography Builder

1. Set the base size and ratio to match the fixed scale the design already uses, so the fluid version is a change of mechanism rather than of sizing.
2. Enter the two viewports at which the design should be smallest and largest, since they define where the ramp starts and stops.
3. Set the mobile-to-desktop factor and check the stated ramp width, then read the table to see the minimum and maximum of each step.
4. Resize the preview to watch the growth, then copy the token block and the per-step classes.

When to use CSS Fluid Typography Builder vs related tools

Reach for it when a type scale has to move continuously rather than in steps, when a hero heading is too small on a flagship phone and too large on a wide monitor at the same breakpoint, or when a design system wants one declaration per size instead of one per breakpoint. The slope and intercept pair is the idea to keep. For a single value rather than a scale, the CSS clamp calculator does the same arithmetic on two endpoints; the modular scale calculator builds the fixed ladder this ramp is derived from, and the heading scale visualizer covers a heading ladder with a simpler approximation.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about CSS Fluid Typography Builder