The Problem With Breakpoint Typography
Setting different font sizes at media query breakpoints creates jarring jumps. At 767px your heading is 24px, at 768px it suddenly becomes 36px. This doesn’t reflect how people actually resize their browsers.
Enter CSS clamp()
The clamp() function takes three values: a minimum, a preferred (fluid) value, and a maximum. The browser calculates the appropriate size based on viewport width, creating smooth, continuous scaling.
Building a Type Scale
Create a systematic type scale using CSS custom properties and clamp(). Each step should have a consistent ratio (we use approximately 1.2x) with viewport-relative fluid values that prevent text from becoming too small on mobile or too large on ultrawide screens.
Practical Example
Our heading scale uses: --ws-text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.25rem). This ensures the heading is never smaller than 36px, never larger than 52px, and scales fluidly in between based on viewport width.
