responsive-typography

Responsive Typography

Overview

Implement fluid typography that scales smoothly between viewport sizes without breakpoints. Uses CSS clamp() to create type that's readable on mobile and properly sized on desktop, eliminating abrupt size jumps.

When to Use

• Creating typography that scales with viewport
• Avoiding multiple breakpoint-based font sizes
• Implementing fluid/responsive headings
• Setting up a fluid type scale for a design system

Quick Reference: Clamp Syntax

/* clamp(minimum, preferred, maximum) */
font-size: clamp(1rem, 2.5vw + 0.5rem, 2rem);
/*         ↑min    ↑scales with vw    ↑max */

Part	Purpose
Minimum	Smallest the text will ever be
Preferred	Scales with viewport (uses vw)
Maximum	Largest the text will ever be

---

The Math

Fluid Type Formula

preferred = (slope × viewport) + intercept

Where:
- slope = (maxSize - minSize) / (maxViewport - minViewport)
- intercept = minSize - (slope × minViewport)

Example Calculation

For text that's 16px at 320px viewport and 20px at 1200px viewport:

slope = (20 - 16) / (1200 - 320) = 4 / 880 = 0.00454545
intercept = 16 - (0.00454545 × 320) = 14.545px

preferred = 0.454545vw + 14.545px
→ Convert to rem: 0.454545vw + 0.909rem

Result: clamp(1rem, 0.45vw + 0.91rem, 1.25rem)

---

Fluid Type Scale

CSS Custom Properties

:root {
  /* Fluid type scale
   * Min viewport: 320px
   * Max viewport: 1200px
   */

  /* Body text */
  --font-size-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.875rem);
  --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.125rem);
  --font-size-lg: clamp(1.125rem, 0.45vw + 1.01rem, 1.25rem);

  /* Headings */
  --font-size-xl: clamp(1.25rem, 0.91vw + 1.07rem, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 1.36vw + 1.23rem, 1.875rem);
  --font-size-3xl: clamp(1.875rem, 1.82vw + 1.51rem, 2.25rem);
  --font-size-4xl: clamp(2.25rem, 2.73vw + 1.7rem, 3rem);
  --font-size-5xl: clamp(3rem, 4.55vw + 2.09rem, 4rem);

  /* Display */
  --font-size-display: clamp(3rem, 6.82vw + 1.64rem, 5rem);
}