What are the slope and intercept actually computing?

They are the two parameters of the straight line that passes through your two design points. The slope is the size change per unit of viewport width, and the intercept is where that line would sit at a viewport of zero. Those two numbers become the preferred term of the clamp, with the intercept as a fixed rem value and the slope multiplied by the viewport as the fluid part.

Why does the value pin at the ends?

Because the clamp has a minimum and a maximum around the preferred term. Below the smaller viewport the line would keep producing smaller sizes, and above the larger one it would keep growing, so the clamp pins the value at the sizes the design was tested at. That is the entire purpose of using a clamp rather than a viewport-relative value on its own.

What slope is too steep?

It depends on how much change the design wants across the range, but a slope that produces more than about a forty per cent size change between the two viewports tends to be visible as the window is resized. The readout gives the slope in viewport units, so a value around 0.3 to 0.5vw per hundred for body copy at a common range is typical, and higher values are usually only wanted for display headings.

Why are the sizes written in rem rather than pixels?

So the scale still respects a reader's own font size setting. A clamp whose ends are expressed in rem scales with the root, which means a reader who has set a larger base size gets a larger scale rather than the same one. The viewport-relative middle part is what makes the scale fluid, and the rem parts are what keep it accessible.

Do I still need breakpoints?

For the type scale, usually not, since the values interpolate continuously. Layout still changes at breakpoints, so a design will keep them for columns, spacing and components. What the fluid scale removes is the type sizes changing abruptly at each one, which is the usual reason a page appears to reflow its text as the window narrows.

Fluid Type Scale Builder

Design pair

Min viewportpxMax viewportpxMin body sizepxMax body sizepxRoot sizepxScale ratio

Slope0.2778vw per 100vw (0.00278 px/px)

Intercept14px

Preferred term0.875rem + 0.2778vw

The preferred term is the straight line through your two design points: below the min viewport the font pins to the min size, above the max viewport it pins to the max size.

Fluid scale

Role	Size range	Step	clamp()
h1	29.3 – 35.16px	+3	clamp(1.8311rem, 1.709rem + 0.5425vw, 2.1973rem)
h2	23.44 – 28.13px	+2	clamp(1.4648rem, 1.3672rem + 0.434vw, 1.7578rem)
h3	18.75 – 22.5px	+1	clamp(1.1719rem, 1.0938rem + 0.3472vw, 1.4063rem)
body	15 – 18px	+0	clamp(0.9375rem, 0.875rem + 0.2778vw, 1.125rem)
small	12 – 14.4px	-1	clamp(0.75rem, 0.7rem + 0.2222vw, 0.9rem)

Every step is the body pair multiplied by ratio^step — one slope, one viewport range.

CSS variables

:root {
  --font-size-h1: clamp(1.8311rem, 1.709rem + 0.5425vw, 2.1973rem);
  --font-size-h2: clamp(1.4648rem, 1.3672rem + 0.434vw, 1.7578rem);
  --font-size-h3: clamp(1.1719rem, 1.0938rem + 0.3472vw, 1.4063rem);
  --font-size-body: clamp(0.9375rem, 0.875rem + 0.2778vw, 1.125rem);
  --font-size-small: clamp(0.75rem, 0.7rem + 0.2222vw, 0.9rem);
}

/* Preview pair: 360px → 1440px viewport, 15px → 18px body */

You Might Also Need

CSS Clamp Calculator

Calculate clamp() values

Type Scale Generator

Generate a modular type scale

Modular Scale Calculator

Calculate ratios for type

CSS Fluid Typography Builder

Build fluid CSS typography

The fluid type scale builder turns two design points into a scale of clamp values, so type grows continuously between a narrow and a wide viewport instead of jumping at breakpoints. Every step shares one viewport range and one slope.

What is Fluid Type Scale Builder?

The fluid type scale builder takes a min and max viewport, a min and max body size, a root size and a ratio, then derives the clamp value for each role on the scale.

The viewport pair defaults to 360 pixels at the narrow end and 1440 at the wide end, which is the range most designs are drawn against.
The body size pair defaults to 15px and 18px, so the smallest viewport gets the smaller value and the largest gets the larger one.
Five roles are derived: the first, second and third heading levels at three, two and one steps above the body, the body itself at step zero, and a small size one step below.
The ratio on which the steps are built can be set, so the whole scale follows one proportion as well as one viewport range.
Each role is emitted as a clamp with a minimum, a preferred term and a maximum, written in rem units against the root size you supply.

The arithmetic behind the preferred term is a straight line through the two design points, and the slope and intercept are its two parameters. The slope is the difference between the two sizes divided by the difference between the two viewport widths, and the intercept is the smaller size minus the slope multiplied by the smaller viewport width. The preferred term is then the intercept plus the slope expressed against the viewport, which is why the output reads as a fixed rem value plus a viewport-relative one. Below the minimum viewport the font pins to the minimum size and above the maximum it pins to the maximum, so the text never grows beyond the range the design was tested in. The readouts give the slope in both viewport units and pixels per pixel, the intercept in pixels, and the preferred term in its final form, which is the useful thing to check before the CSS is pasted: a very steep slope means the type will change noticeably across the range, and a preferred term whose rem component dominates means the viewport influence is small.

The scale is derived from one body pair multiplied by the ratio, so a role needing a size outside that progression has to be written by hand.
Only one viewport range is modelled, so a third breakpoint with its own range needs a separate calculation and a media query.
The output assumes a stable root size, and a document that changes its root at a breakpoint invalidates the rem components.
The clamp values are generated for the five roles listed, so captions, quotes and interface text are outside the scale.
Nothing checks the result against a real layout, so whether the largest size fits its container has to be tested on the page.

Use it when a type scale has to be responsive rather than stepped, when the jumps between breakpoints are visible and unwanted, or when a design pair has been drawn at two viewport widths and the middle of the range needs filling in. The slope readout is the part to check first, since a steep line is the commonest reason a fluid scale looks wrong at the ends. Where a single fluid value is needed rather than a scale, the clamp calculator works on one dimension, and where the steps themselves need deriving, the type scale generator and the modular scale calculator do that. The CSS clamp calculator covers a single value, the type scale generator derives the steps, and the CSS fluid typography builder writes the wider set of fluid typography rules.

How to use Fluid Type Scale Builder

Enter the two viewport widths the design was drawn at, then the body size at each of them.
Set the root size and the ratio, and read the slope and intercept to see how steep the line through the two points is.
Check the role table, which lists each step's size range and its clamp value, and confirm adjacent steps stay distinguishable at both ends.
Copy the variables, then test the largest size in its real container at the wide viewport before the scale is adopted.

When to use Fluid Type Scale Builder vs related tools

Reach for it when a scale has to be responsive rather than stepped, when the size jumps between breakpoints are visible, or when a design pair exists at two widths and the range between them has to be filled in continuously. For a single fluid value the CSS clamp calculator is the narrower tool, the type scale generator derives the steps that the fluid version grows from, and the modular scale calculator shows the multipliers behind the ratio.

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.