HesapHanem

CSS Clamp Generator

Build a fluid clamp() value that scales your font size smoothly between two viewport widths.

How it is calculated

Enter the smallest and largest font size in pixels and the two viewport widths, also in pixels, between which the size should scale. The tool draws a straight line through those two points:

slope = (maxpx − minpx) / (maxvw − minvw)
intercept = minpx − slope × minvw

The slope times 100 becomes the vw part, and the intercept divided by 16 becomes the rem part, assuming the browser's default root size of 16px. The minimum and maximum are also converted to rem. Rem values are trimmed to three decimals and vw to two. If both viewport widths are equal there is no slope, so no result is given.

Worked example

You want text that is 16px at a 320px viewport and 24px at 1200px. Slope = (24 − 16) / (1200 − 320) = 0.00909. Intercept = 16 − 0.00909 × 320 = 13.09px, or 0.818rem. The slope × 100 gives 0.91vw. The minimum is 16 / 16 = 1rem and the maximum is 24 / 16 = 1.5rem. The finished rule is clamp(1rem, 0.818rem + 0.91vw, 1.5rem).

Try this example →

Common mistakes

  • Entering font sizes in rem or viewport widths in em; every field here is plain pixels.
  • Assuming the rem result is exact if the site sets a root font size other than 16px; the conversion always divides by 16.
  • Swapping the pairs so the minimum viewport is larger than the maximum; the tool does not stop you, and the resulting line is inverted.
  • Using only a vw value for text, which ignores the user's browser font-size preference; the rem part in the output is what keeps zoom and settings working.
  • Pasting the preferred part alone, without the surrounding clamp(), which removes the minimum and maximum limits.

Sources

About this calculator

This tool generates a responsive CSS clamp() function for fluid typography — clamp(min, preferred, max) — where the preferred value is a calculated vw-based expression that scales your font size smoothly between a minimum and maximum viewport width, so it stops growing or shrinking beyond your chosen limits.

Front-end developers use it to avoid writing multiple media-query breakpoints just to resize headings and body text, getting one CSS rule that scales fluidly instead.

Was this helpful?

You can pick up to 3 reactions.

Comments (1)

  • Editorial team

    For a heading that grows from 16 px at a 320 px viewport to 24 px at 1200 px, the tool gives clamp(1rem, 0.818rem + 0.91vw, 1.5rem). Paste it into font-size, then test at both viewport edges and with browser zoom at 200 percent. The same value works for padding, margin and gap too, not only type. Which properties do you plan to scale this way?

Popular calculators

Loan Calculator

Monthly payment, total interest and full amortization schedule.

Percentage Calculator

Percent change, percent of, and ratio calculations.

Discount Calculator

Calculate final price, savings, and discount amount.

BMI Calculator

Body mass index from height and weight (metric or imperial).

Age Calculator

Compute your exact age in years, months and days from a birth date.

Compound Interest Calculator

Calculate the final amount and interest earned with compounding.

All Calculators