Font Size Scales for Heading Hierarchy — Type Scale Best Practices

Building a Font Size Scale

A type scale is a set of font sizes based on a consistent mathematical ratio. Instead of picking arbitrary sizes, a scale creates natural visual rhythm that feels harmonious.

Common Type Scale Ratios

Ratio	Value	Character
Minor Second	1.067	Very subtle
Major Second	1.125	Gentle
Minor Third	1.200	Balanced
Major Third	1.250	Classic
Perfect Fourth	1.333	Bold
Golden Ratio	1.618	Dramatic

Building a Scale (Major Third, 1.250)

Starting from a 16px base:

:root {
  --text-xs: 0.64rem;    /* 10.24px */
  --text-sm: 0.8rem;     /* 12.80px */
  --text-base: 1rem;     /* 16.00px */
  --text-lg: 1.25rem;    /* 20.00px */
  --text-xl: 1.563rem;   /* 25.00px */
  --text-2xl: 1.953rem;  /* 31.25px */
  --text-3xl: 2.441rem;  /* 39.06px */
  --text-4xl: 3.052rem;  /* 48.83px */
}

Responsive Considerations

Use a tighter ratio (Minor Third: 1.200) on mobile and a wider ratio (Perfect Fourth: 1.333) on desktop. This prevents headings from being too large on small screens:

h1 { font-size: clamp(1.953rem, 4vw, 3.052rem); }

Pairing Sizes with Font Pairings

Your heading font should be set at the larger end of the scale (2xl-4xl), while body text stays at the base size. The mathematical relationship between sizes creates the same harmony as the relationship between your chosen font pair.