CSS clamp() generator
Type scales that jump at breakpoints leave awkward gaps between them. clamp() interpolates smoothly instead, so a heading grows with the viewport and stops at the bounds you set. Enter the two sizes and the two viewport widths, and this generates the clamp() value plus the slope maths behind it.
The quick brown fox jumps over the lazy dog
Technical Guide & Mechanics
Understanding Fluid Typography and Linear Interpolation
Fluid typography eliminates sudden jumps between responsive breakpoints by linearly scaling font sizes proportional to the viewport width. Rather than defining rigid media queries (e.g. at 640px, 768px, and 1024px) where text can either look disproportionately large or awkwardly tiny at boundary edges, CSS clamp() computes a continuous slope between your minimum and maximum target bounds.
The core calculation relies on finding the slope (m) and intercept (b) in the linear equation y = mx + b. In CSS terms, m becomes a viewport width percentage (vw), while the intercept b is expressed in rem. Crucially, using rem for the base intercept allows the typography to honor the user's browser-level font size preferences, preserving compliance with WCAG 1.4.4 (Resize Text).
When utilizing CSS clamp(), ensure you test in both standard desktops and zoom-scaled mobile browsers. Because CSS clamp() takes three parameters—minimum, preferred, and maximum—the browser enforces hard clamping limits, preventing text from shrinking below readability or overflowing containers on ultra-wide displays.
how to use it
- 01Enter the minimum font size and the viewport width where it applies.
- 02Enter the maximum font size and its viewport width.
- 03Copy the generated clamp() value into your stylesheet.
questions
- Why does my clamp() value use rem instead of px?
- Sizes declared in rem respect the reader's browser font-size setting. A px value ignores it, which fails WCAG 1.4.4 for users who have increased their default text size.
- Do I need calc() inside clamp()?
- No. Math expressions are allowed directly inside clamp(), so the preferred term can be written as a sum without wrapping it in calc().
- How does the viewport width term work?
- The slope calculation converts the difference in font sizes divided by the difference in viewport widths into a vw percentage, creating a continuous linear scaling curve.
- Can I use clamp() for properties other than font-size?
- Yes. clamp() works equally well for fluid padding, margins, line heights, and gap properties across responsive grid layouts.