Typography handbookInteractive production handbook

Typography is a runtime system.

Type controls attention, comprehension, density, hierarchy, emotion, and trust. The highest-performing systems combine stable reading infrastructure with carefully bounded expressive behavior.

Build the foundation Open the scale lab

How to use this handbook

Start from the problem you are solving.

01
Building a design system

Begin with semantic roles, font portfolio, scale, measure, and governance.

02
Repairing an interface

Audit reading density, sticky chrome, overflow, contrast, real content, and fallback behavior.

03
Creating expressive work

Establish a stable reading layer, then choose one dominant expressive mechanism.

01 · Foundation

Separate the reading layer from the expressive layer.

Stable reading behavior should survive viewport changes, font failures, localization, zoom, and accessibility preferences. Expressive typography may bend selected rules, but it must not weaken the layer beneath it.

Reading infrastructure

Predictable, legible, resilient.

  • Semantic roles instead of arbitrary values
  • Measured line length and line height
  • Fallback metric compatibility
  • Explicit wrap and overflow policies
  • Language and accessibility resilience
Expressive typography

Distinctive, concentrated, intentional.

  • One dominant visual behavior
  • Clear hierarchy and reading order
  • Repeated angles, offsets, or alignments
  • Effects that degrade gracefully
  • Motion that communicates state or sequence
Policy engine

A complete semantic role owns the behavior.

01

Family, fallback chain, size, weight, width, grade, and optical sizing.

02

Line height, tracking, measure, expected line count, and wrapping.

03

Overflow, theme, contrast, motion, language coverage, and validation.

Token layers

Keep the public type surface small.

primitive.font.family.sans
primitive.font.size.400

semantic.body.reading
semantic.heading.section
semantic.metric.primary

component.card.title
context.compact.dark
display.heroHigh-impact, low-frequency statement with explicit mobile composition.
heading.sectionMajor navigation and document structure. Balanced wrap and limited line count.
body.readingLong-form prose with comfortable measure, line height, and minimal interruption.
body.compactDense interfaces, tables, logs, and technical metadata.
metric.primaryComparable numeric signal using stable numerals and explicit units.
label.metadataTimestamps, provenance, state, and secondary context.

02 · Font portfolio

Use fewer families with clearer responsibility.

Most products need one interface family, one optional expressive family, and one monospace family. Pair fonts by metric compatibility and structural relationship, not category labels alone.

Primary sans

Interface, body, controls.

Prioritize legibility, language coverage, numerals, and predictable fallback.

Optional serif

Editorial voice and contrast.

Use selectively for storytelling, display, and identity moments.

Monospace

code.status_200

Identifiers, logs, payloads, fixed-width comparison, and technical evidence.

Variable-font axes

wght

Hierarchy and emphasis. May change density and line breaks.

wdth

Responsive fit and expression. Avoid extreme compression for reading text.

opsz

Size-specific drawing. Use font-optical-sizing: auto when supported.

GRAD

Stroke darkness with minimal width change. Useful for mode and state calibration.

slnt

Controlled slant or oblique behavior. Prefer real styles over synthesis.

Fallback metrics are part of layout stability.

Two fonts at the same CSS size can differ in x-height, cap height, glyph width, ascenders, descenders, and internal line gaps.

Metric-compatible fallback example 
@font-face {
  font-family: "Product Fallback";
  src: local("Arial");
  size-adjust: 97.5%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
Numerals need an explicit policy.

Use tabular numerals for dashboards, prices, timers, and tables. Use proportional numerals in prose.

03 · Scale and rhythm

Use a scale as a constraint, not a religion.

Body copy should scale modestly. Display copy can scale dramatically. The actual font, container, line count, and reading measure matter more than preserving a perfect ratio.

17px
1.25
1.58
68ch
17pxBase size
26.9pxLine box
1.25Ratio
68chMeasure

Typography should reveal the structure of thought.

Good reading typography creates a stable channel. Size, line length, spacing, contrast, and wrapping work together so a reader can spend attention on meaning rather than mechanics.

Bound fluid type 
:root {
  --type-body:
    clamp(1rem, .97rem + .15vw, 1.125rem);

  --type-heading:
    clamp(1.75rem, 1.15rem + 2.4vw, 4rem);

  --type-display:
    clamp(2.75rem, 1.2rem + 6vw, 8rem);
}
Role-specific wrapping 
h1,
h2,
.display-copy {
  text-wrap: balance;
}

p,
li,
blockquote {
  text-wrap: pretty;
}

.prose {
  max-inline-size: 68ch;
}

04 · Composition

Choose one dominant typographic idea.

Cropping, outlines, gradients, rotation, unusual baselines, width, and scale become sophisticated when they share a compositional grammar. Unrelated effects create noise.

Oversized crop
Outline mass
Vertical annotation
Repeated angle
Gradient emphasis
Technical contrast

Alignment changes the reading pattern.

Flush left. Best default for long Latin-script reading.
Centered. Effective for short statements; weak for dense instruction.
Right aligned. Useful for totals, dates, or editorial tension.
Justified. Requires language-aware hyphenation and stable measure.

Break the grid with a visible anchor.

A

Shared baseline, cap height, edge, or center line.

B

Repeated angle, offset, crop, or directional relationship.

C

Continuation into another object, image, path, or chapter boundary.

Random displacement looks accidental.

Repeated displacement becomes a visual grammar.

05 · Emotion and color

Emotion comes from the whole composition.

Typeface category alone does not guarantee trust, warmth, authority, or innovation. Family, width, weight, spacing, color, copy, and motion combine to create the voice.

Technical system
Every type choice creates behavior.
Light surface

Stroke density must survive brightness.

Thin details can appear weaker on bright backgrounds. Test actual devices and rendering engines.

Dark surface

Pure white is not always the calmest foreground.

Calibrate luminance, secondary contrast, thin strokes, transparency, and grade independently.

FeelingTypographic strategy
CalmOpen counters, moderate width, generous spacing, restrained motion.
AuthoritativeStable alignment, clear hierarchy, controlled weight contrast.
TechnicalStructured sans, mono accents, tabular numerals, compact rhythm.
PremiumHigh-contrast display, restrained palette, large negative space.
EnergeticHeavy or condensed forms, directional composition, steep scale contrast.
EditorialSerif voice, annotations, asymmetry, deliberate measure and pacing.

06 · Motion

Animate meaning, not the reader’s attention.

Motion should explain entrance, hierarchy, progress, relationship, or state change. It should not delay reading, continuously move body text, or change semantic order.

Signal
Strong patterns
  • Line or mask reveal for a hero
  • Grade transition for focus or active state
  • Numeric transition for a confirmed value change
  • Motion synchronized with narration
Avoid
  • Continuous floating body copy
  • Letter-by-letter animation in every section
  • Effects that delay access to content
  • Motion that changes clickable geometry
Reduced motion preserves state, sequence, meaning, and completion feedback.

Replace travel with color, decoration, opacity, or an immediate state change.

07 · Overflow and disclosure

Truncation is deliberate information loss.

Every clipped value needs a priority decision and, when the full value matters, an explicit path to complete content. Do not rely on hover-only recovery.

Typography systems often fail at the edges: a translated heading becomes four lines, an account identifier has no safe break point, a card title is truncated before the distinguishing word, or a user increases text spacing and the disclosure control disappears. A reliable overflow policy names what may be hidden, how continuation is signaled, and how the complete value remains available without hover.

Good candidates
  • Repeated previews and search excerpts
  • Card summaries
  • Secondary metadata
  • Unbounded user content inside repeated lists
Never hide critical meaning
  • Error, warning, and safety messages
  • Prices, totals, and required units
  • Primary action labels
  • Ambiguous selected values or required identifiers

08 · Global and accessible typography

Do not validate a global system with English lorem ipsum.

Scripts differ in shaping, line breaking, emphasis, punctuation, vertical layout, bidirectionality, and diacritics. Accessibility preferences can also override the assumptions behind the original composition.

Design for the longest credible content.

A typography system must survive real names, translations, mixed scripts, long values, user zoom, and delayed font loading without losing meaning.

Script behavior

  • Arabic shaping and bidirectional text
  • CJK line breaking and punctuation
  • Devanagari conjuncts and vertical metrics
  • Vietnamese stacked diacritics

Direction-aware layout

Use correct lang and dir. Prefer logical properties over left/right assumptions.

.annotation {
  margin-inline-start: 1rem;
  border-inline-start: .2rem solid;
}

Vertical writing

Use writing-mode for actual vertical text rather than rotating a complete text box.

.vertical-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
Validate at 200% zoom, increased text spacing, forced colors, reduced motion, missing fonts, and long translations.

The content and controls must remain present, distinguishable, and operable.

09 · Performance and governance

A type system is complete when it survives change.

Font loading, fallback metrics, licenses, version control, localization, visual regression, and release criteria are operational parts of typography.

Choose the smallest viable portfolio.

One interface family, one optional expressive family, and one mono family.

Load only what earns its cost.

Prefer WOFF2, required axes, evidence-based subsets, and limited preload.

Match fallback metrics.

Test blocked, delayed, cached, and partially covered font states.

Govern change.

Pin versions, retain binaries, record licenses, and run visual regression.

Enterprise controls

  • Confirm web embedding and redistribution rights
  • Store source binaries and optimized derivatives separately
  • Record license, provenance, version, and glyph coverage
  • Validate every supported script before release
  • Monitor line-break and layout-shift changes after upgrades
  • Use deterministic hosting when privacy or change control requires it
Production font-face pattern 
@font-face {
  font-family: "Product Sans VF";
  src: url("/fonts/product-sans-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153;
}
Release gate 0 of 12 checks complete.

Ownership model

Design systemRoles, tokens, examples, and visual regression.
BrandPortfolio, licenses, expressive boundaries, and identity.
EngineeringLoading, fallbacks, metrics, CSP, and performance.
AccessibilityZoom, spacing, contrast, motion, and forced colors.
LocalizationScript coverage, expansion, language behavior, and bidi.

10 · Awards and references

Study systems, not screenshots.

Award archives are useful when decomposed into concept, hierarchy, rhythm, responsive transformation, motion grammar, and failure behavior.

01

Type Directors Club

Formal craft, type design, lettering, communication systems, and cultural range.

Open TDC
02

D&AD Typography

Commercial concept, advertising, execution, type design, and lettering.

Open D&AD
03

Communication Arts

Editorial, identity, campaigns, typeface work, and juried commercial design.

Open competition
04

ADC Awards

Typography, lettering, branding, and digital work across a long commercial-design history.

Open ADC
05

Awwwards Typography

Web-native motion, responsive type, interaction, and technical execution.

Open collection

Deconstruction worksheet

  1. Identify the central typographic idea.
  2. Map each family to a semantic role.
  3. Measure scale, line length, rhythm, and alignment.
  4. Describe motion as a grammar, not an effect list.
  5. Resize and record the responsive transformation.
  6. Remove effects and identify the remaining structural strength.
  7. Test fallbacks, reduced motion, and long content.
Primary standards and platform references
Design-system precedents

Provenance

Human-directed creator: Jesse Graupmann.

AI contribution: research synthesis, red-team review, structure, code generation, and implementation validation by OpenAI.

Version: 2.0 · Reviewed: July 18, 2026.

Handbook contents
Choose a chapter.
Search handbook
Find concepts, code, and guidance.

Enter a term to search.