Calculate CSS clamp() values for fluid responsive typography between minimum and maximum viewport sizes.
Give it four numbers - the smallest and largest font size you will accept, and the viewport widths at which each applies - and this tool returns a single CSS clamp() expression that scales the type linearly between those two viewport limits and holds it constant beyond them. The middle argument pairs a viewport-based rate with a fixed offset, which is why the output mixes units. The common surprise: this is straight-line interpolation, not easing, and the line is only as good as the four numbers you choose.
A concrete input and expected output from the current implementation.
Input
Min font: 16px | Max font: 24px | Min viewport: 375px | Max viewport: 1440px
Expected output
clamp(16px, 0.7512vw + 0.8239rem, 24px)
The slope between the two points is (24px - 16px) / (1440px - 375px) = 8px / 1065px = 0.007512 px of font per px of viewport, written 0.7512vw. The offset is chosen so the line equals 16px at 375px: 16 - 0.007512 x 375 = 13.1831px, or 0.8239rem at 1rem = 16px. At 1440px the line reaches 0.007512 x 1440 + 13.1831 = 24.0px, and clamp() holds the min and max beyond those widths.
Draw a straight line through two points: minimum viewport with minimum size, and maximum viewport with maximum size. The slope is (maxSize - minSize) divided by (maxWidth - minWidth), expressed in vw, and a fixed offset - usually in rem - positions the line so it hits your minimum size exactly at the minimum viewport and your maximum size exactly at the maximum viewport. Between those widths the size follows the line.
clamp(MIN, VAL, MAX) returns VAL when VAL falls between MIN and MAX, MIN when VAL is smaller, and MAX when VAL is larger. The vw-based middle term keeps growing or shrinking past your breakpoints, and the outer arguments cut it off there. The rem offset is calculated assuming 1rem equals 16px, the browser default root font size.
For font-size rules, yes: clamp() handles both ends, so the two or three font-size declarations per breakpoint collapse into one. Media queries stay for layout, spacing, and everything else. And keep the viewport limits in sync with the breakpoints your layout actually uses, or the type finishes scaling before the layout reflows.
No single CSS unit changes with the viewport at the exact rate your two sizes need: vw alone grows too fast or too slowly. The middle argument is the slope in vw plus an offset that anchors it, so the line passes through both of your points. Some calculators emit the offset in px (13.18px here) instead of rem; both describe the same line.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.