CSSTypographyResponsive Designclamp()

Responsive Typography with CSS clamp() and Fluid Type Scales

Static font sizes don't scale well across devices. Learn fluid typography using clamp(), viewport units, and type scale systems that work beautifully from mobile to 4K.

U

UIXplor Team

February 25, 2026 · 6 min read

✦

01The Problem with Fixed Font Sizes

A `font-size: 48px` heading looks massive on mobile and right-sized on desktop. The traditional fix uses media queries, but that creates rigid breakpoints:

css
h1 { font-size: 28px; }
@media (min-width: 768px) { h1 { font-size: 40px; } }
@media (min-width: 1200px) { h1 { font-size: 56px; } }

Fluid typography eliminates these jumps with smooth interpolation.

02clamp() — The One-Line Solution

`clamp(min, preferred, max)` returns the preferred value, capped at min and max:

css
h1 { font-size: clamp(1.75rem, 4vw + 0.5rem, 3.5rem); }
h2 { font-size: clamp(1.25rem, 2.5vw + 0.5rem, 2rem); }
p  { font-size: clamp(0.9rem, 1vw + 0.4rem, 1.125rem); }

The `4vw + 0.5rem` middle value ensures the font grows with the viewport while always being readable.

03A Complete Fluid Type Scale

css
:root {
  --text-xs:   clamp(0.75rem,  0.8vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 1vw,   1rem);
  --text-base: clamp(1rem,     1.2vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1.5vw, 1.375rem);
  --text-xl:   clamp(1.25rem,  2vw,   1.75rem);
  --text-2xl:  clamp(1.5rem,   3vw,   2.25rem);
  --text-3xl:  clamp(1.875rem, 4vw,   3rem);
  --text-4xl:  clamp(2.25rem,  5vw,   3.75rem);
}

04Line Length & Readability

Optimal line length is 60–75 characters. Use `ch` units to enforce this:

css
article p {
  max-width: 68ch;
  line-height: 1.7;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
}

The `ch` unit equals the width of the '0' character in the current font — a reliable proxy for character count.

Related UI Components

◈

Collections

All UI component collections

Back to Blog