Typography

Type Scales

Mathematically consistent type scales for web — from minor third to golden ratio, with fluid sizing.

Reference intermediate

How To Use This Guide

Use this while choosing patterns, tones, or tools. It is best as lookup material, not as a first read.

At A Glance

Level: intermediate
Type: Reference
Updated: 2026-03-22

Why Type Scales?

Random font sizes create visual chaos. A mathematical scale creates rhythm — each size relates to the others by a consistent ratio.

Common Scales

| Name | Ratio | Character | |------|-------|-----------| | Minor Second | 1.067 | Tight, subtle hierarchy | | Major Second | 1.125 | Compact, functional UIs | | Minor Third | 1.200 | Balanced — good default | | Major Third | 1.250 | Clear hierarchy | | Perfect Fourth | 1.333 | Strong hierarchy, editorial | | Golden Ratio | 1.618 | Dramatic, hero-heavy layouts |

CSS Token Set — Minor Third (1.2)

Base: 16px (1rem)

:root {
  --text-xs:   0.694rem;  /* 11.1px — captions */
  --text-sm:   0.833rem;  /* 13.3px — small labels */
  --text-base: 1rem;      /* 16px   — body */
  --text-lg:   1.2rem;    /* 19.2px — lead text */
  --text-xl:   1.44rem;   /* 23px   — h4 */
  --text-2xl:  1.728rem;  /* 27.6px — h3 */
  --text-3xl:  2.074rem;  /* 33.2px — h2 */
  --text-4xl:  2.488rem;  /* 39.8px — h1 */
  --text-5xl:  2.986rem;  /* 47.8px — display */
}

Fluid Type with clamp()

No breakpoints needed — sizes scale smoothly between viewport widths.

:root {
  /* fluid: min at 320px viewport, max at 1280px viewport */
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.2rem, 1.1rem + 0.5vw, 1.35rem);
  --text-xl:   clamp(1.44rem, 1.2rem + 1.2vw, 1.8rem);
  --text-2xl:  clamp(1.728rem, 1.3rem + 2.14vw, 2.4rem);
  --text-3xl:  clamp(2.074rem, 1.4rem + 3.37vw, 3.2rem);
  --text-4xl:  clamp(2.488rem, 1.5rem + 4.94vw, 4.2rem);
}

System Prompt for Typography

You are setting up typography for a Tailwind CSS website.

Rules:
1. Choose ONE scale ratio based on the design character (see table above).
2. Body text: 16-18px, line-height 1.6, max-width 65ch.
3. Headings: tighter line-height (1.1-1.3), negative letter-spacing (-0.02em).
4. Use fluid clamp() for sizes that need to scale between mobile and desktop.
5. Maximum 2 font families: one for headings, one for body (or one for both).
6. Font weight range: 400 (body), 500 (emphasis), 600-700 (headings). Never use 800+.
7. Tailwind: use arbitrary values for custom scale: text-[var(--text-xl)]
8. Vertical rhythm: space between paragraphs = 1.5x line-height of body text.

Font Pairing Suggestions (web-safe):
- Inter + Inter (clean, technical)
- Inter + Merriweather (modern + editorial)
- DM Sans + DM Serif Display (geometric contrast)
- Outfit + Outfit (geometric, friendly)
- Instrument Sans + Instrument Serif (elegant contrast)

Line Height Reference

| Element | Line Height | Letter Spacing | |---------|-------------|----------------| | Display (48px+) | 1.05 - 1.1 | -0.03em | | Headline (24-40px) | 1.15 - 1.25 | -0.02em | | Subhead (18-22px) | 1.3 - 1.4 | -0.01em | | Body (16px) | 1.5 - 1.65 | 0 | | Small (12-14px) | 1.4 - 1.5 | 0.01em | | Caption (11px) | 1.4 | 0.02em |

Checklist

[ ] Scale ratio chosen and documented
[ ] All sizes derived from formula (not random)
[ ] Body text 16-18px, line-height 1.5-1.65
[ ] Headlines use tighter leading (1.1-1.25)
[ ] Negative letter-spacing on headlines (-0.02em)
[ ] Max 2 font families loaded
[ ] Font weights limited to 400, 500, 600 (max 700)
[ ] Fluid sizing with clamp() for responsive
[ ] Max-width 65ch on prose content
[ ] Vertical rhythm consistent (paragraph spacing)