Responsive Typography with rem and Fluid Scaling

Responsive Typography with rem

Responsive typography ensures text is readable across all screen sizes. rem is the foundation, but modern CSS offers powerful tools to build on top of it.

Approach 1: Media Query Steps

The simplest approach changes the root font size at breakpoints:

html { font-size: 100%; }           /* 16px */

@media (min-width: 768px) {
  html { font-size: 112.5%; }       /* 18px */
}

@media (min-width: 1200px) {
  html { font-size: 125%; }         /* 20px */
}

Since everything is in rem, the entire page scales up at each breakpoint. This is the most predictable approach.

Approach 2: Fluid Typography with clamp()

CSS clamp() creates smoothly scaling text between a minimum and maximum:

html {
  font-size: clamp(1rem, 0.5rem + 1vw, 1.25rem);
}

This sets the base to:

• Minimum: 1rem (16px)
• Fluid: scales with viewport width
• Maximum: 1.25rem (20px)

All rem-based values downstream scale fluidly as a result.

Approach 3: Per-Element Fluid Sizing

For more control, apply clamp() to individual elements:

h1 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  /* 28px minimum, scales up, 48px maximum */
}

h2 {
  font-size: clamp(1.25rem, 1rem + 1vw, 2rem);
  /* 20px minimum, scales up, 32px maximum */
}

p {
  font-size: clamp(1rem, 0.9rem + 0.25vw, 1.125rem);
  /* 16px minimum, scales up, 18px maximum */
}

The vw Accessibility Problem

Using font-size: 3vw alone is problematic because:

1. Text does not scale when the user changes their browser font size
2. On very narrow screens, text becomes unreadably small
3. On ultra-wide screens, text becomes enormous

clamp() with a rem minimum solves all three issues because the rem component respects user preferences.

Calculating clamp() Values

Use this formula to generate a clamp() expression:

clamp(min-rem, preferred, max-rem)

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

Our px-rem converter can help you determine the min and max rem values to plug into this formula.

Testing Responsive Typography

Always test at:

• Default font size (16px)
• 200% browser zoom
• Increased browser font size (20px, 24px)
• Minimum and maximum viewport widths