Typography Scale

Typography scale creates consistent, harmonious size relationships across text elements using mathematical ratios.

Core Principle: Instead of arbitrary font sizes, use proportional relationships that create visual rhythm.

Common Scales:

• Minor Third (1.2): Subtle, conservative scale
• Major Third (1.25): Balanced, versatile scale
• Perfect Fourth (1.333): More dramatic contrast
• Golden Ratio (1.618): Classical proportions

Implementation Pattern:

:root {
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
}

Mental Model: Like musical scales - notes aren’t random but follow mathematical relationships that sound harmonious.

Key Benefit: Eliminates guesswork in font sizing while maintaining visual coherence.

Tools: Type Scale websites and calculators automate ratio calculations.

Related: CSS Design Tokens, Visual Hierarchy Principles