What are the key takeaways from this guide?

Fixed font sizes require media query breakpoints for different screen sizes, creating jarring jumps between sizes.. font-size: clamp(minimum, preferred, maximum);. To calculate the preferred value for a given range:. Always use `rem` for minimum values to respect user font size preferences..

Who is this guide for?

This guide is designed for beginner-level users and takes about 1 minutes to read.

How-To Beginner 1 min read 269 words

Fluid Typography with clamp(): A Modern CSS Approach

Implement responsive typography that scales smoothly between viewport sizes using CSS clamp(). Covers the math behind fluid type scales, accessibility considerations, and practical implementation patterns.

Key Takeaways

Fixed font sizes require media query breakpoints for different screen sizes, creating jarring jumps between sizes.
font-size: clamp(minimum, preferred, maximum);
To calculate the preferred value for a given range:
Always use `rem` for minimum values to respect user font size preferences.

The Problem with Fixed Font Sizes

Fixed font sizes require media query breakpoints for different screen sizes, creating jarring jumps between sizes. Viewport units (vw) scale continuously but become too small on mobile and too large on desktop without constraints. The clamp() function solves both problems elegantly.

How clamp() Works

font-size: clamp(minimum, preferred, maximum);
font-size: clamp(1rem, 0.5rem + 1.5vw, 2rem);

The browser uses the preferred value (viewport-relative) but never goes below the minimum or above the maximum. The result is smooth scaling between two bounds — no breakpoints needed.

The Formula

To calculate the preferred value for a given range:

preferred = min-size + (max-size - min-size) * (100vw - min-viewport) / (max-viewport - min-viewport)

For 1rem at 320px → 2rem at 1200px: preferred = 1rem + (2 - 1) * (100vw - 320px) / (1200 - 320) = 1rem + 1 * (100vw - 320px) / 880 ≈ 0.636rem + 1.136vw

Type Scale

Level	Mobile (320px)	Desktop (1200px)	clamp()
Body	1rem	1.125rem	`clamp(1rem, 0.95rem + 0.14vw, 1.125rem)`
H3	1.25rem	1.5rem	`clamp(1.25rem, 1.11rem + 0.28vw, 1.5rem)`
H2	1.5rem	2rem	`clamp(1.5rem, 1.22rem + 0.57vw, 2rem)`
H1	2rem	3rem	`clamp(2rem, 1.43rem + 1.14vw, 3rem)`

Accessibility

Always use rem for minimum values to respect user font size preferences. Ensure the minimum size meets WCAG SC 1.4.4 (resize up to 200%). Generate fluid type scales with the Peasy typography calculator.