Module 03: Typography Fundamentals — Design & Code Foundations

01

Type Anatomy

The parts of letterforms. Understanding anatomy helps you see type clearly and make informed choices.

Typography

Baseline: the invisible line letters sit on

The Baseline System

The baseline is the invisible line that letters sit on. It's the foundation of vertical alignment and text rhythm.

Key point: All text alignment starts with the baseline

xH

Red = x-height | Blue = cap height

X-Height & Cap Height

X-height is the height of lowercase letters. Cap height is the height of capitals. Fonts with large x-heights are more readable at small sizes.

Key point: Large x-height = better screen readability

boxy

Ascender (b) | Descender (y)

Above & Below

Ascenders rise above x-height (b, d, h, l). Descenders drop below baseline (g, j, p, q, y). These affect line spacing requirements.

Key point: Long descenders need more line-height

STROKE

Main line of a letter

COUNTER

Enclosed space (o, e)

BOWL

Curved stroke (b, d, p)

TERMINAL

End of a stroke

APERTURE

Opening in letters (c, e)

STEM

Main vertical stroke

Key Terms

These terms help you describe and compare typefaces precisely. 'Open apertures' or 'tall x-height' becomes meaningful vocabulary.

Key point: Learning vocabulary helps you see type clearly

02

Type Classifications

Major categories of typefaces and when to use each.

Serif Typeface

The small strokes at the ends of letters are called serifs. Traditional, authoritative, readable in print.

Serif Typefaces

Serifs guide the eye along lines of text. Best for: body text in print, headlines seeking authority, traditional/luxury brands.

Key point: Serif = traditional, trustworthy, print-friendly

Sans-Serif Typeface

No serifs. Clean, modern, excellent screen readability. Dominates digital interfaces.

Sans-Serif Typefaces

Sans-serif renders cleanly at small sizes on screens. Best for: UI text, digital body copy, modern brands, technical content.

Key point: Sans-serif = modern, clean, screen-optimized

const code = 'monospace';

Every character has equal width

Monospace Typefaces

Every character occupies the same horizontal space. Best for: code, tabular data, technical documentation, terminal interfaces.

Key point: Monospace = code, data, technical content

DISPLAY TYPE

Designed for large sizes. Headlines, logos, posters.

Display Typefaces

Display faces have distinctive features visible at large sizes. Details that enhance at 72px become noise at 12px. Never use for body text.

Key point: Display fonts are for headlines only

03

Weights & Styles

Font weights create hierarchy within a single typeface family.

100 - Thin

200 - Extra Light

300 - Light

400 - Regular

500 - Medium

600 - Semibold

700 - Bold

800 - Extra Bold

900 - Black

Standard Weights

CSS uses numeric values 100-900. Not all fonts have all weights. Using a weight that doesn't exist causes browser fallback.

Key point: Always check which weights your font includes

Bold Headline (700)

Medium Subhead (500)

Regular body text (400)

Weight for Hierarchy

Use weight differences of at least 200 for clear distinction. 400 vs 700 is clear. 400 vs 500 is subtle.

Key point: Minimum 200 weight difference for clear hierarchy

Regular text with italic for emphasis

True italics are redesigned letterforms. Oblique is just slanted.

Italic & Oblique

Use italics for emphasis, titles, foreign words, or stylistic variation. True italic fonts have unique letterforms. Faux italic (browser-slanted) looks worse.

Key point: Use actual italic font files, not browser faux-italic

Variable Fonts

One file, infinite weights (100-900 and everything between)

Variable Fonts

Variable fonts contain all weights in one file. Smaller total file size, infinite granularity. The future of web typography.

Key point: Variable fonts reduce HTTP requests and enable animation

04

Font Pairing

Combining typefaces effectively is an art. These guidelines help avoid common mistakes.

Serif Headline

Sans-serif body text creates clear contrast with the headline. Each has a distinct role.

Pair by Contrast

Pair fonts that are clearly different. Serif + sans-serif is classic because the contrast is obvious. Similar fonts compete.

Key point: Contrast = harmony. Similarity = competition.

SUPERFAMILY EXAMPLE

Roboto Slab (serif)

Roboto (sans-serif) shares the same DNA. Guaranteed harmony.

Use Superfamilies

Superfamilies include serif and sans-serif versions designed together. Source Sans + Source Serif. Roboto + Roboto Slab. Guaranteed to work.

Key point: Superfamilies are the safest pairing choice

AaAa

Similar x-heights create visual harmony when used together

Match X-Heights

Fonts with similar x-heights pair better. When set at the same size, they'll appear optically balanced.

Key point: Matching x-heights prevents jarring size differences

DON'T:

Two serif fonts that look similar

Two sans-serif fonts that look similar

More than 2-3 fonts total

Display fonts for body text

What to Avoid

Similar fonts create tension - viewers sense something is 'off' but can't identify why. When in doubt, use one font family with multiple weights.

Key point: Similar fonts = subtle disharmony

05

Legibility & Readability

Legibility is recognizing characters. Readability is comfortable reading. Both matter.

12px - Minimum for body text

14px - Comfortable for body

16px - Default browser size (1rem)

18px - Large text, great for mobile

Minimum Sizes

Body text below 14px strains most readers. 16px (1rem) is the browser default for good reason. Mobile often needs 18px.

Key point: 16px (1rem) is your baseline for body text

Line height 1.0 is too tight. Text feels cramped and lines blur together. Hard to read.

Line height 1.6 gives proper breathing room. Eyes can track lines easily. Comfortable reading.

Line Spacing

Body text needs 1.4-1.6 line-height. Headlines can be tighter (1.1-1.2). Longer lines need more line-height.

Key point: Body: 1.5-1.6. Headlines: 1.1-1.2.

Optimal line length is 45-75 characters. This paragraph is set at a comfortable width. Your eyes don't have to travel too far to reach the next line.

45-75 characters = comfortable reading

Characters Per Line

Lines that are too long cause readers to lose their place. Too short creates choppy reading. 45-75 characters is optimal for body text.

Key point: max-width: 65ch is a useful CSS rule

Low contrast text

Fails WCAG

High contrast text

Passes WCAG

Text Contrast

WCAG requires 4.5:1 contrast ratio for body text, 3:1 for large text. Use a contrast checker tool to verify.

Key point: 4.5:1 minimum for body text accessibility

10

The Science of Reading

How humans actually read text - and how typography can help or hinder.

The quick brown fox jumps over the lazy dog

Eyes jump between fixation points (highlighted). We don't read letter-by-letter.

Eye Movement

Reading happens in saccades - quick jumps between fixation points. We recognize word shapes, not individual letters. Good typography supports this pattern.

Key point: We read word shapes, not letters

reading

Words have distinct shapes (bouma) that we recognize instantly

Word Recognition

Each word has a unique silhouette. ALL CAPS destroys word shapes, making text harder to read. This is why body text should be mixed case.

Key point: ALL CAPS = slower reading. Use sparingly.

peripheral para FOCUS para peripheral

Sharp vision is only 2 degrees. Line length affects readability.

Visual Field

Sharp vision covers only about 3-4 characters. Peripheral vision picks up word shapes. Long lines force more eye movement, causing fatigue.

Key point: Short lines = less eye movement = less fatigue

HIGH LOAD

Decorative fonts, low contrast, tight spacing, long lines

LOW LOAD

Clear fonts, high contrast, proper spacing, optimal line length

Processing Effort

Every typography choice affects cognitive load. Good typography is invisible - readers focus on content, not on deciphering letters.

Key point: Best typography goes unnoticed

11

Typography in the Wild

How major brands use typography to communicate identity.

San Francisco

Apple's custom typeface, optimized for all screen sizes

Principles Identified:

Custom typeface San Francisco is designed for Apple's ecosystem - legible from Watch to billboard

Negative tracking Tight letter-spacing at large sizes creates premium feel

Weight hierarchy Semibold for headlines, regular for body - simple but effective

Key insight: Apple's typography is so consistent it becomes part of brand recognition.

The New York Times

Serif typography signals authority and tradition

Principles Identified:

Serif mastery Custom Cheltenham serif reinforces journalistic authority

Clear hierarchy Headline, byline, body - unmistakable information architecture

Dense but readable Narrow columns with proper leading maximize content density

Key insight: Serif typography creates trustworthiness - critical for news.

Payments for the internet

Principles Identified:

Clean sans-serif Technical product + clean typography = trustworthy modern brand

Generous spacing Ample line-height and margins signal quality

One font family Consistent use of a single typeface across all materials

Key insight: Stripe proves technical companies can have beautiful typography.

14

CSS Typography

Implementing typography in code.

body {
  font-family: 
    'Inter',           /* Primary choice */
    system-ui,         /* System default */
    -apple-system,     /* macOS/iOS */
    'Segoe UI',        /* Windows */
    Roboto,            /* Android */
    sans-serif;        /* Ultimate fallback */
}

Font Stack via CSS

Primary font - Your chosen web font loads first
System fonts - Fast fallbacks if web font fails
Generic family - Last resort catches everything

Tip: Always include fallbacks. Web fonts can fail to load.

:root {
  --font-xs: 0.75rem;   /* 12px */
  --font-sm: 0.875rem;  /* 14px */
  --font-base: 1rem;    /* 16px */
  --font-lg: 1.125rem;  /* 18px */
  --font-xl: 1.25rem;   /* 20px */
  --font-2xl: 1.5rem;   /* 24px */
  --font-3xl: 1.875rem; /* 30px */
  --font-4xl: 2.25rem;  /* 36px */
}

Type Scale via CSS

rem units - Scale with user preferences
Consistent ratios - Each step is proportional
CSS variables - Easy to maintain and adjust

Tip: 1.25 ratio is a good starting point for type scales.

.prose {
  font-size: 1rem;        /* 16px base */
  line-height: 1.6;       /* Comfortable reading */
  max-width: 65ch;        /* Optimal line length */
  color: #1a1a1a;         /* High contrast */
}

.prose p {
  margin-bottom: 1.5em;   /* Paragraph spacing */
}

Readable Body Text via CSS

line-height: 1.6 - Breathing room between lines
max-width: 65ch - 65 characters per line
margin-bottom - Vertical rhythm with em units

Tip: The 'ch' unit equals the width of '0' in the current font.

/* In HTML  */




/* CSS */
body {
  font-family: 'Inter', sans-serif;
  font-display: swap; /* Show fallback while loading */
}

Loading Web Fonts via CSS

preconnect - Early connection to font server
display=swap - Show text immediately with fallback
Specific weights - Only load what you need

Tip: Only load the weights you actually use. Each weight adds load time.

15

Self-Assessment

Test your typography knowledge.

Q1

What's the difference between a typeface and a font?

Click to reveal

Q2

Why is x-height important for screen readability?

Click to reveal

Q3

What's the recommended line-height for body text?

Click to reveal

Q4

Why should you avoid using ALL CAPS for body text?

Click to reveal

Q5

What makes a good font pairing?

Click to reveal

Typography Fundamentals

Core Concepts

Type Anatomy

Type Classifications

Weights & Styles

Font Pairing

Legibility & Readability

Science & Psychology

The Science of Reading

Real-World Examples

Typography in the Wild

CSS Implementation

CSS Typography

Self-Assessment

Self-Assessment

Key Takeaways