📐 Responsive Typography

Fluid text that scales smoothly with clamp()

📚 Theory: Why Responsive Typography Matters

The Problem with Fixed Font Sizes

Using px for text means mobile users see the same size as desktop users. On a large monitor, text looks tiny. On a small phone, text might be okay but headings don't pop.

Traditional Solution: Media Queries

          @media (min-width: 768px) { body { font-size: 18px; } } @media
          (min-width: 1024px) { body { font-size: 20px; } }
        

Problem: Font size jumps abruptly at breakpoints instead of flowing smoothly.

Modern Solution: clamp()

          font-size: clamp(1rem, 1rem + 1vw, 1.5rem); /* min: 16px, preferred:
          scales with viewport, max: 24px */
        

Benefit: Font size changes continuously as the screen resizes. No jumps. Perfect smooth scaling.

1. Comparison: px vs rem vs clamp()

Resize your browser to see how each behaves differently.

❌ Fixed px

This text is 16px always.
Does NOT scale with your browser zoom or settings.
Not accessible.

✅ rem (scalable)

This text is 1rem (16px default).
Scales with browser font settings.
Accessible.

🚀 clamp() (fluid)

This text scales smoothly!
Try resizing your browser window.
Best of both worlds.

          /* rem — respects user settings */ body { font-size: 1rem; /* 16px
          default, scales with browser */ } /* clamp() — fluid scaling */ h1 {
          font-size: clamp(1.75rem, 2rem + 3vw, 3rem); /* min: 28px, scales with
          screen, max: 48px */ }
        

2. Accessibility: rem vs px

Try this: Change your browser's default font size (Chrome → Settings → Font Size → Large). Watch what happens below.

🔴 This uses px (16px) — Does NOT change when you change browser settings.

🟢 This uses rem (1rem) — DOES change when you change browser settings.

🟣 This uses clamp() with rem — Best for accessibility AND responsiveness.

          /* ❌ Bad for accessibility */ .fixed-px { font-size: 16px; /* User
          cannot scale this */ } /* ✅ Good for accessibility */ .scalable-rem {
          font-size: 1rem; /* User can scale this in browser settings */ } /* ✅
          Best: accessible + responsive */ .fluid-accessible { font-size:
          clamp(1rem, 1rem + 1vw, 1.5rem); }
        

3. Fluid Headings with clamp()

Watch these headings scale smoothly as you resize your browser.

          /* Heading sizes that scale continuously */ h1 { font-size:
          clamp(1.75rem, 2rem + 3vw, 3rem); } /* 28px → 48px */ h2 { font-size:
          clamp(1.5rem, 1.5rem + 2vw, 2.25rem); } /* 24px → 36px */ h3 {
          font-size: clamp(1.25rem, 1.25rem + 1vw, 1.75rem); } /* 20px → 28px */
        

H1: Largest heading

H2: Section heading

H3: Card heading

4. Fluid Spacing (Margin & Padding)

You can also use clamp() for spacing. Resize to see margins and padding change.

Fluid Spacing
This box has clamp() for margin and padding.

          .fluid-spacing { margin: clamp(1rem, 3vw, 3rem); padding:
          clamp(0.5rem, 2vw, 2rem); }
        

5. Fluid Line Height

Line height can also be fluid for better readability across devices.

          /* Line height that scales with screen */ body { line-height:
          clamp(1.4, 1.4 + 0.3vw, 1.7); }
        

This paragraph has fluid line height. On mobile, line height is tighter (1.4). On desktop, it's more spacious (1.7). This improves readability across all devices.

⚡ Quick Reference Card

          /* =================================== clamp() SYNTAX
          =================================== */ clamp(minimum, preferred,
          maximum) /* =================================== FLUID TYPOGRAPHY
          PATTERNS =================================== */ /* Body text */ body {
          font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem); } /* H1 headings */ h1
          { font-size: clamp(1.75rem, 2rem + 3vw, 3rem); } /* H2 headings */ h2
          { font-size: clamp(1.5rem, 1.5rem + 2vw, 2.25rem); } /*
          =================================== FLUID SPACING
          =================================== */ .container { gap: clamp(1rem,
          2vw, 2rem); } .card { padding: clamp(1rem, 2vw, 2rem); } /*
          =================================== ACCESSIBILITY RULE
          =================================== */ /* Always use rem for text,
          never px */ font-size: 1rem; /* ✅ Good */ font-size: 16px; /* ❌ Bad
          — user cannot scale */
        

📊 Best Practices Summary

Use rem for text — respects user accessibility settings
Use clamp() for fluid scaling — smooth transitions, no media queries
Use px for borders — borders should not scale
Use vw for fluid elements — percentages of viewport width
Test with browser zoom — ensure text scales properly

Common clamp() Values

clamp(1rem, 1rem + 0.5vw, 1.25rem) — body text (16px → 20px)
clamp(1.5rem, 1.5rem + 1vw, 2rem) — subheadings (24px → 32px)
clamp(2rem, 2rem + 2vw, 3rem) — main headings (32px → 48px)
clamp(0.5rem, 1vw, 1rem) — small spacing (8px → 16px)