Technical1 min read
Fluid Typography & The Math of CSS clamp()
Say goodbye to media query clutter: Scale headings seamlessly from iPhone to 4K displays with one line of CSS.
Historically, responsive typography meant defining font-size: 24px for mobile, 32px for tablet, and 48px for desktop with dozens of @media queries that caused jarring step-ladder jumps.
Live clamp() Viewport Simulator
Drag the simulated screen width slider below to watch typography scale organically and continuously:
Fluid Typography & CSS clamp() Simulator
Drag the viewport slider to observe fluid text scaling
Fluid and Scalable Heading.
Width: 768px ➔ Computed Size: 29.9px
Mobile (320px)
768px SimulationDesktop (1440px)
Anatomy of the Equation
font-size: clamp(MIN, VAL, MAX); accepts three parameters:
- MIN: Minimum floor size on mobile (e.g.
1.25rem) - VAL: Viewport-relative dynamic value (e.g.
0.8rem + 2.2vw) - MAX: Ceiling cap on ultra-wide desktop displays (e.g.
2.75rem)