The Art of Typography

Typography is the craft of arranging type to make written language legible, readable, and appealing.

Hierarchy

A clear typographic hierarchy guides readers through content. Headings create visual anchors; body text provides the substance. Links guide the eye to related information.

Contrast

Contrast in size, weight, and color separates content layers. Primary content demands attention; secondary notes recede into the background.

Good typography is invisible. Bad typography is everywhere.

Readability

• Line height of 1.5–1.75 improves tracking across long lines
• Maximum line length of 65–75 characters prevents eye fatigue
• Adequate contrast ratios ensure accessibility for all readers
• Consistent spacing creates rhythm and predictability

Scale

A modular type scale ensures proportional relationships between text sizes. The default Tailwind scale uses a 1.125 ratio (major second), providing subtle but clear distinction between levels:

1. xs (12px) — captions, labels, fine print
2. sm (14px) — secondary text, hints, metadata
3. base (16px) — body copy, the foundation
4. lg (18px) — lead paragraphs, emphasized text
5. xl (20px) — subheadings, card titles
6. 2xl (24px) — section headings
7. 3xl (30px) — page headings
8. 4xl (36px) — hero titles

Last updated: July 2026 · Typography guidelines