CSS clamp() Fluid Typography Generator

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

Inputs

Size at the smallest viewport.

Size at the largest viewport.

Viewport where scaling starts (e.g. mobile).

Viewport where scaling stops (e.g. desktop).

For rem conversion (usually 16).

Result

Loading calculator…
—

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

What does CSS clamp() do?+
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.
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.

Related calculators

Hex / RGB / HSL Color Converter
Convert a color between HEX, RGB, and HSL formats, with the parsed channel values and CSS-ready strings.
Tip Split Calculator
Compute tip and split a restaurant bill evenly among diners.
Fuel vs Electric Car Cost Comparison
Annual fuel cost (gas car) vs annual electricity cost (EV) for the same mileage.
EV Charging Cost Calculator
Cost per session: kWh delivered × $/kWh, accounting for charger efficiency.
Solar Panel Payback Period
System cost / annual savings = years to break even on a residential solar install.
Mortgage vs Renting (Detailed)
30-year comparison: ownership equity + appreciation vs rent + alternative-investment growth.

More tools you might like

Hand-picked tools that pair well with this one — same audience, same intent.

Hex / RGB / HSL Color Converter
Calc

Convert a color between HEX, RGB, and HSL formats, with the parsed channel values and CSS-ready strings.

Lorem Ipsum Generator
Calc

Generate placeholder text — paragraphs, sentences, or words — in deterministic seeded form. Starts with the classic "Lorem ipsum dolor sit amet" opening.

Random Password Generator
Calc

Generate strong, deterministically-seeded passwords. Pick length, character classes, and bulk-count. All client-side — passwords never leave the browser.

Color Palette Generator
Calc

Generate a harmonious color palette — complementary, analogous, triadic, tetradic, or monochromatic — from a base color.

Satoshi to Bitcoin Converter
Calc

Convert between satoshis and bitcoin (1 BTC = 100,000,000 sats) and optionally value either in US dollars at a given BTC price.

Deed Generator
PDF

Generate a one-page general warranty / quitclaim deed PDF from a few input fields — produces a clean printable template.