How is the fluid (preferred) term calculated?

It is the equation of the line through your two points (minViewport, minSize) and (maxViewport, maxSize): a constant y-intercept plus a slope expressed in vw. That makes the size exactly your minimum at the small viewport and your maximum at the large one.

Should I use rem or px in clamp()?

Prefer rem for the min and max so the sizing respects the user’s browser font-size setting (an accessibility benefit). The vw part stays the same. This generator outputs both; the rem version is recommended.

What happens outside the viewport range?

Below the minimum viewport width, the value stays at your minimum size; above the maximum viewport width, it stays at the maximum. clamp() only interpolates between the two endpoints.

Can I use clamp() for things other than font size?

Yes. It works for any length: padding, margins, gaps, widths, and more. The same min/preferred/max pattern applies, letting spacing and layout scale fluidly with the viewport.

Does fluid type cause accessibility issues?

It can if the minimum is too small or if px units ignore user zoom. Using rem-based min/max and keeping the minimum readable (typically ≥16px for body text) keeps fluid type accessible. Always test with browser zoom.

How is the fluid (preferred) term calculated?

It is the equation of the line through your two points (minViewport, minSize) and (maxViewport, maxSize): a constant y-intercept plus a slope expressed in vw. That makes the size exactly your minimum at the small viewport and your maximum at the large one.

Should I use rem or px in clamp()?

Prefer rem for the min and max so the sizing respects the user’s browser font-size setting (an accessibility benefit). The vw part stays the same. This generator outputs both; the rem version is recommended.

What happens outside the viewport range?

Below the minimum viewport width, the value stays at your minimum size; above the maximum viewport width, it stays at the maximum. clamp() only interpolates between the two endpoints.

Can I use clamp() for things other than font size?

Yes. It works for any length: padding, margins, gaps, widths, and more. The same min/preferred/max pattern applies, letting spacing and layout scale fluidly with the viewport.

Does fluid type cause accessibility issues?

It can if the minimum is too small or if px units ignore user zoom. Using rem-based min/max and keeping the minimum readable (typically ≥16px for body text) keeps fluid type accessible. Always test with browser zoom.

CSS clamp() Fluid Typography Generator

Generate a responsive CSS clamp() value that scales smoothly between a minimum and maximum size across a viewport range.

Result

CSS clamp() (rem)

clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)

scales 16px → 24px across 320–1,280px

clamp() in rem (recommended)clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)
clamp() in pxclamp(16px, 13.333px + 0.8333vw, 24px)
Preferred (fluid) term0.8333rem + 0.8333vw
Slope (px per px of viewport)0.008333
Range16px @ 320px → 24px @ 1,280px

Source: Fluid value: solve a line through (minVw, minSize) and (maxVw, maxSize). Preferred = yIntercept + slope·100vw; wrap in clamp(min, preferred, max).

Note — Below the min viewport the size holds at the minimum; above the max viewport it holds at the maximum; in between it scales linearly. Test with a real browser, and ensure the result respects user zoom (rem-based is preferred for accessibility).

Step-by-step

Slope = (maxSize − minSize) ÷ (maxVw − minVw) = (24 − 16) ÷ (1,280 − 320) = 0.008333 px/px.
Y-intercept = minSize − slope·minVw = 13.333px = 0.8333rem; vw coefficient = slope×100 = 0.8333vw.
Result: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem).

How to use this calculator

Enter the minimum and maximum sizes (in px).
Enter the viewport widths where scaling should start and stop.
Keep root font size at 16 unless your project differs.
Copy the generated clamp() value into your CSS.

About this calculator

The CSS clamp() function lets a value scale smoothly between a minimum and a maximum as the viewport changes — perfect for fluid typography that grows from mobile to desktop without media-query jumps. clamp(MIN, PREFERRED, MAX) returns the preferred value, but never below MIN or above MAX. The trick is building the PREFERRED term so the size hits exactly your minimum at the small viewport and your maximum at the large one: that is a straight line, computed as a constant (the y-intercept) plus a vw-based slope. This generator does that math from your min/max sizes and min/max viewport widths, outputting a ready-to-paste clamp() in both rem (recommended for accessibility, since it respects user font-size settings) and px. Below the minimum viewport the size locks at the minimum; above the maximum it locks at the maximum; in between it interpolates linearly.

How it works — the formula

slope = (maxSize − minSize) / (maxVw − minVw)
yIntercept = minSize − slope · minVw
clamp(minSize, yIntercept + slope·100 vw, maxSize)

A line through the two size/viewport points defines the fluid term; clamp() bounds it to the min and max.

Source: MDN — CSS clamp()

Worked examples

Example 1

16→24px across 320→1280px

Inputs:: minSize=16, maxSize=24, minVw=320, maxVw=1280
Output:: clamp(1rem, 0.833rem + 0.833vw, 1.5rem)

Example 2

14→18px across 360→1440px

Inputs:: minSize=14, maxSize=18, minVw=360, maxVw=1440
Output:: clamp(0.875rem, ... + ...vw, 1.125rem)

Example 3

20→48px across 320→1200px

Inputs:: minSize=20, maxSize=48, minVw=320, maxVw=1200
Output:: large fluid heading

Limitations

Linear interpolation only (no easing curve).
rem conversion assumes the root font size you enter.
Very steep slopes can scale uncomfortably fast — preview in a browser.

Generates standard CSS; verify rendering across target browsers.

Frequently asked

clamp(MIN, PREFERRED, MAX) outputs the PREFERRED value but constrains it to never go below MIN or above MAX. Combined with a vw-based preferred term, it creates a value that scales fluidly between two sizes across a viewport range.