What is CSS clamp() used for in typography?

clamp(min, preferred, max) sets a value that is at least min, at most max, and ideally the preferred expression. For fluid typography, the preferred value is a linear interpolation between a small and large size tied to the viewport width, so text scales smoothly without breakpoints.

Why does the tool output rem instead of px?

Using rem respects the user's browser font-size preference. If a user has set their default font size to 20px, all rem values scale proportionally, improving accessibility. The base font size input (default 16px) controls the px-to-rem conversion.

What is the formula behind the output?

The preferred value uses slope-intercept form: fontSize = minSize + (maxSize - minSize) * ((100vw - minVP) / (maxVP - minVP)). Rearranged into rem + vw form: intercept_rem + slope_vw * 100vw. The final CSS is clamp(minRem, intercept_rem + slope_vw * 100vw, maxRem).

Can I use px values in the output instead of rem?

This tool outputs rem for accessibility best practice. Set the base font size to 1 and enter your sizes in rem directly, or simply multiply any rem value by your base font size to convert back to px.

What happens if min font size is larger than max?

The tool detects this and shows an error. Min font size must always be smaller than or equal to max font size for the formula to produce a valid increasing scale.

Fluid Typography Clamp

Enter your min/max font sizes and viewport widths to instantly generate a CSS clamp() string for fluid, responsive typography.

Typography Parameters

Min Font Size (px)

Max Font Size (px)

Min Viewport (px)

Max Viewport (px)

Base Font Size (px) (browser default)

CSS Property

Generated CSS

font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);

Value only:

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

Formula Breakdown

Min: 1rem (at ≤ 320px viewport)

Max: 1.5rem (at ≥ 1280px viewport)

Slope: 0.8333vw

Intercept: 0.8333rem

Live Scale Preview

Viewport	Font Size	Preview

Drag viewport width 800px

Computed size at 800px : 20px

The quick brown fox jumps over the lazy dog.

Copied!

Summary

The Fluid Typography Clamp Generator computes the correct CSS clamp() expression that scales a font size linearly between a minimum and maximum value as the viewport grows from a small breakpoint to a large one. All arithmetic is done in your browser — no server calls, no signup. The output is a single copy-pasteable CSS property value compatible with all modern browsers.

How it works

Enter the minimum font size (the size at the smallest viewport).
Enter the maximum font size (the size at the largest viewport).
Set the minimum viewport width (the breakpoint where fluid scaling begins).
Set the maximum viewport width (the breakpoint where scaling stops).
Optionally adjust the base font size (default 16px, used to convert px to rem).
The clamp() output updates instantly — click "Copy CSS" to use it.

Use cases

Scale headings smoothly between mobile and desktop without media queries.
Implement a fluid type scale following the Utopia or similar methodology.
Avoid jarring font-size jumps at specific breakpoints.
Generate consistent rem-based clamp values for a design system.
Quickly prototype fluid body copy or display text for any viewport range.

Frequently Asked Questions

Last updated: 2026-05-29 · Reviewed by Nham Vu