Typography That Communicates

Fonts, Hierarchy, and Readable Text

Typography is design. The right fonts communicate before anyone reads a word.

Font Categories

Serif

Small decorative strokes at letter ends.

Character: Traditional, trustworthy, elegant, readable Use for: Long text, formal documents, luxury brands, editorial Examples: Times New Roman, Georgia, Garamond, Playfair Display

Sans-Serif

Clean letters without strokes.

Character: Modern, clean, friendly, tech-forward Use for: Digital, startups, contemporary brands, headlines Examples: Helvetica, Arial, Open Sans, Montserrat, Inter

Script

Mimics handwriting.

Character: Elegant, personal, feminine, decorative Use for: Invitations, logos, accents — never body text Examples: Pacifico, Great Vibes, Dancing Script

Display

Decorative fonts for specific purposes.

Character: Varied, attention-grabbing, themed Use for: Headlines, logos, specific moods — sparingly Examples: Impact, Bebas Neue, Lobster

Monospace

Equal width for each character.

Character: Technical, code-like, typewriter Use for: Code, technical content, retro aesthetics Examples: Courier, Roboto Mono, Source Code Pro

Font Pairing

The Simple Rule

One serif + one sans-serif = safe combination

One for headlines, one for body text.

Pairing Principles

Contrast: Fonts should be noticeably different Harmony: Different but complementary Limit: Two fonts maximum for most projects

Classic Pairings

Playfair Display + Source Sans Pro
Montserrat + Merriweather
Oswald + Open Sans
Roboto + Roboto Slab
Lato + Georgia

AI Prompt: Font Pairing

Suggest font pairings for my project.

Project type: [Website, poster, presentation, etc.]
Tone/mood: [Professional, playful, elegant, etc.]
Industry: [What kind of business/content]
Fonts I already use: [If any required]

Please suggest:
1. 2-3 font pairing options
2. Which font for headlines vs. body
3. Why each pairing works
4. Where to find these fonts

Typography Hierarchy

Creating Visual Order

Not all text is equal. Show importance through typography.

Tools for hierarchy:

Size (most impactful)
Weight (bold vs. regular)
Color (contrast draws attention)
Case (all caps for emphasis)
Position (top/left typically first)

Typical Hierarchy

Headline: Largest, boldest
Subheadline: Smaller, might be different font
Body: Regular size, most readable font
Caption/Meta: Smallest, subtle

Size Ratios

Headlines: 2-3× body text size Subheadlines: 1.5-2× body text size Captions: 0.75-0.9× body text size

Readability Rules

Line Length

40-70 characters per line for body text. Too wide = hard to track. Too narrow = choppy.

Line Height (Leading)

1.4-1.6× the font size for body text. More space = easier reading.

Paragraph Spacing

Space between paragraphs should be larger than line height.

Contrast

Dark text on light background (or vice versa). Never similar values.

All Caps

Harder to read. Use only for short phrases or labels.

Common Typography Mistakes

Too Many Fonts

Maximum two. Three is pushing it. More creates chaos.

Centered Body Text

Centered text is hard to read beyond a few lines. Left-align body text.

Stretching or Compressing Fonts

Never distort fonts. Use a different font if you need different proportions.

Ignoring Hierarchy

When everything is the same size and weight, nothing stands out.

Decorative Fonts for Body Text

Script and display fonts are for accents only.

What's Next

Putting elements together.

Next chapter: Layout and composition.