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 */

---

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);
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      'sm': 'clamp(0.8rem, 0.17vw + 0.76rem, 0.875rem)',
      'base': 'clamp(1rem, 0.34vw + 0.91rem, 1.125rem)',
      'lg': 'clamp(1.125rem, 0.45vw + 1.01rem, 1.25rem)',
      'xl': 'clamp(1.25rem, 0.91vw + 1.07rem, 1.5rem)',
      '2xl': 'clamp(1.5rem, 1.36vw + 1.23rem, 1.875rem)',
      '3xl': 'clamp(1.875rem, 1.82vw + 1.51rem, 2.25rem)',
      '4xl': 'clamp(2.25rem, 2.73vw + 1.7rem, 3rem)',
      '5xl': 'clamp(3rem, 4.55vw + 2.09rem, 4rem)',
      'display': 'clamp(3rem, 6.82vw + 1.64rem, 5rem)',
    },
  },
};

JSON Tokens

{
  "font": {
    "size": {
      "fluid": {
        "sm": {
          "value": "clamp(0.8rem, 0.17vw + 0.76rem, 0.875rem)",
          "min": "0.8rem",
          "max": "0.875rem"
        },
        "base": {
          "value": "clamp(1rem, 0.34vw + 0.91rem, 1.125rem)",
          "min": "1rem",
          "max": "1.125rem"
        },
        "lg": {
          "value": "clamp(1.125rem, 0.45vw + 1.01rem, 1.25rem)",
          "min": "1.125rem",
          "max": "1.25rem"
        },
        "xl": {
          "value": "clamp(1.25rem, 0.91vw + 1.07rem, 1.5rem)",
          "min": "1.25rem",
          "max": "1.5rem"
        },
        "2xl": {
          "value": "clamp(1.5rem, 1.36vw + 1.23rem, 1.875rem)",
          "min": "1.5rem",
          "max": "1.875rem"
        },
        "3xl": {
          "value": "clamp(1.875rem, 1.82vw + 1.51rem, 2.25rem)",
          "min": "1.875rem",
          "max": "2.25rem"
        },
        "4xl": {
          "value": "clamp(2.25rem, 2.73vw + 1.7rem, 3rem)",
          "min": "2.25rem",
          "max": "3rem"
        },
        "5xl": {
          "value": "clamp(3rem, 4.55vw + 2.09rem, 4rem)",
          "min": "3rem",
          "max": "4rem"
        }
      }
    }
  }
}

---

Fluid Scale Generator

JavaScript Function

/**
 * Generate a fluid font-size clamp value
 *
 * @param {number} minSize - Minimum size in px
 * @param {number} maxSize - Maximum size in px
 * @param {number} minVw - Minimum viewport in px (default: 320)
 * @param {number} maxVw - Maximum viewport in px (default: 1200)
 * @returns {string} CSS clamp() value
 */
function fluidType(minSize, maxSize, minVw = 320, maxVw = 1200) {
  const minSizeRem = minSize / 16;
  const maxSizeRem = maxSize / 16;

  const slope = (maxSize - minSize) / (maxVw - minVw);
  const slopeVw = (slope * 100).toFixed(2);

  const intercept = minSize - slope * minVw;
  const interceptRem = (intercept / 16).toFixed(2);

  return `clamp(${minSizeRem}rem, ${slopeVw}vw + ${interceptRem}rem, ${maxSizeRem}rem)`;
}

// Usage
fluidType(16, 20);  // "clamp(1rem, 0.45vw + 0.91rem, 1.25rem)"
fluidType(24, 48);  // "clamp(1.5rem, 2.73vw + 0.95rem, 3rem)"

Generate Full Scale

const scale = {
  sm: fluidType(12.8, 14),
  base: fluidType(16, 18),
  lg: fluidType(18, 20),
  xl: fluidType(20, 24),
  '2xl': fluidType(24, 30),
  '3xl': fluidType(30, 36),
  '4xl': fluidType(36, 48),
  '5xl': fluidType(48, 64),
};

---

Predefined Scales

Conservative Scale (Subtle)

Minimal scaling - good for content-heavy sites.

:root {
  /* Min: 320px, Max: 1200px */
  /* Ratio: 1.125 minor second at mobile, 1.2 minor third at desktop */

  --fs-xs: clamp(0.75rem, 0.11vw + 0.73rem, 0.8rem);
  --fs-sm: clamp(0.875rem, 0.11vw + 0.85rem, 0.9375rem);
  --fs-base: clamp(1rem, 0.23vw + 0.95rem, 1.0625rem);
  --fs-lg: clamp(1.125rem, 0.34vw + 1.06rem, 1.25rem);
  --fs-xl: clamp(1.25rem, 0.57vw + 1.14rem, 1.5rem);
  --fs-2xl: clamp(1.5rem, 0.91vw + 1.32rem, 1.875rem);
  --fs-3xl: clamp(1.875rem, 1.36vw + 1.6rem, 2.25rem);
}

Expressive Scale (Bold)

More dramatic scaling - good for marketing/landing pages.

:root {
  /* Min: 320px, Max: 1200px */
  /* Ratio: 1.2 minor third at mobile, 1.333 perfect fourth at desktop */

  --fs-xs: clamp(0.75rem, 0.23vw + 0.7rem, 0.875rem);
  --fs-sm: clamp(0.875rem, 0.34vw + 0.81rem, 1rem);
  --fs-base: clamp(1rem, 0.45vw + 0.91rem, 1.125rem);
  --fs-lg: clamp(1.2rem, 0.91vw + 1.02rem, 1.5rem);
  --fs-xl: clamp(1.44rem, 1.59vw + 1.12rem, 2rem);
  --fs-2xl: clamp(1.728rem, 2.5vw + 1.23rem, 2.665rem);
  --fs-3xl: clamp(2.074rem, 3.64vw + 1.35rem, 3.553rem);
  --fs-4xl: clamp(2.488rem, 5.11vw + 1.47rem, 4.736rem);
}

---

Usage Patterns

Headlines

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

Body Text

body {
  font-size: var(--font-size-base);
  line-height: 1.5;
}

.small {
  font-size: var(--font-size-sm);
}

.large {
  font-size: var(--font-size-lg);
}

Hero Sections

.hero-title {
  font-size: var(--font-size-display);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.hero-subtitle {
  font-size: var(--font-size-xl);
  line-height: 1.4;
}

---

Fluid Line Height

Line height can also scale for better readability:

:root {
  /* Tighter line height on larger text */
  --line-height-tight: clamp(1.1, 1.5 - 0.25vw, 1.2);
  --line-height-normal: clamp(1.4, 1.7 - 0.2vw, 1.5);
  --line-height-relaxed: clamp(1.6, 1.9 - 0.2vw, 1.75);
}

h1, h2 {
  line-height: var(--line-height-tight);
}

p {
  line-height: var(--line-height-normal);
}

---

Fluid Spacing (Related)

Apply the same principle to spacing:

:root {
  /* Fluid spacing */
  --space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
  --space-sm: clamp(0.5rem, 1vw, 1rem);
  --space-md: clamp(1rem, 2vw, 2rem);
  --space-lg: clamp(1.5rem, 3vw, 3rem);
  --space-xl: clamp(2rem, 5vw, 5rem);
  --space-2xl: clamp(3rem, 8vw, 8rem);
}

/* Section spacing scales with viewport */
section {
  padding-block: var(--space-xl);
}

/* Container padding */
.container {
  padding-inline: var(--space-md);
}

---

Container Query Typography

For component-based fluid type (modern browsers):

/* Container context */
.card {
  container-type: inline-size;
}

/* Scale based on container, not viewport */
.card-title {
  font-size: clamp(1rem, 3cqi + 0.5rem, 1.5rem);
}

@container (min-width: 400px) {
  .card-title {
    font-size: clamp(1.25rem, 4cqi + 0.5rem, 2rem);
  }
}

---

Accessibility Considerations

Respect User Preferences

/* Scale from user's preferred size, not fixed 16px */
:root {
  /* Use rem, never px for font sizes */
  font-size: 100%; /* Respects browser default */
}

/* Zoom-friendly: content reflows properly */
@media (min-width: 320px) {
  /* Fluid values handle this automatically */
}

Text Zoom Test

Ensure text remains readable when zoomed to 200%:

/* Avoid cutting off text at max sizes */
.hero-title {
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
  /* At 200% zoom: 4rem × 2 = 8rem - still proportional */
}

Minimum Readable Size

Never go below 16px (1rem) for body text:

/* Body text minimum */
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.125rem);
/*                     ↑ Never smaller than 1rem */

/* Small text minimum */
--font-size-sm: clamp(0.875rem, 0.17vw + 0.83rem, 0.9375rem);
/*                    ↑ 14px minimum for secondary text */

---

Tools & Resources

Online Calculators

• Utopia: https://utopia.fyi/type/calculator
• Modern Fluid Typography: https://modern-fluid-typography.vercel.app
• Fluid Type Scale: https://www.fluid-type-scale.com

PostCSS Plugin

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-utopia')({
      minWidth: 320,
      maxWidth: 1240,
      minFontSize: 16,
      maxFontSize: 18,
      minTypeScale: 1.2,
      maxTypeScale: 1.25,
    }),
  ],
};

---

Common Mistakes

---

Browser Support

clamp() is supported in all modern browsers (Chrome 79+, Firefox 75+, Safari 13.1+, Edge 79+).

For older browsers:

/* Fallback with media queries */
.heading {
  font-size: 2rem; /* Fallback */
  font-size: clamp(1.5rem, 2vw + 1rem, 2.5rem);
}

/* Or use @supports */
@supports not (font-size: clamp(1rem, 1vw, 2rem)) {
  .heading {
    font-size: 2rem;
  }
}