Skip to content
Typography Master
Chapter 21Reference6 min read

Typography Checklist

Practical typography checklists for landing pages, dashboards, blogs, portfolios, design systems, and brand projects.

Typography quality is easier to verify than to invent. These checklists give you a repeatable audit process for common project types. Run through the relevant list before handoff, launch, or design review — checking items systematically catches issues that casual review misses.

Universal Checks (Every Project)

Before diving into project-specific lists, verify these fundamentals apply everywhere:

Typeface Selection

  • [ ] No more than two typeface families in use (three if mono is required)
  • [ ] All fonts are licensed and loaded with font-display: swap
  • [ ] Fallback fonts match primary metrics to prevent layout shift

Scale and Hierarchy

  • [ ] A defined type scale exists with 6–10 steps maximum
  • [ ] Heading levels map to distinct scale steps with at least 1.25× contrast between tiers
  • [ ] Body text is at least 16px (14px minimum for dense UI with high contrast)
  • [ ] No more than three typographic levels visible in any single viewport section

Spacing, Accessibility, and Responsive

  • [ ] Body line height is 1.4–1.7; heading line height is 1.1–1.3
  • [ ] All text meets WCAG AA contrast; readable at 200% zoom
  • [ ] Line length stays between 45–75 characters on reading content
  • [ ] Font sizes adjust across breakpoints; button text is minimum 14px

Landing Pages

Landing pages need immediate hierarchy — visitors decide in seconds whether to stay. Typography must guide the eye from headline to value proposition to call-to-action.

Hero and Content

  • [ ] Headline is 2.5–4× body size, no more than two lines on desktop
  • [ ] Subheadline and CTA are visually subordinate but scannable (14px minimum on buttons)
  • [ ] Hero text contrast against background passes WCAG AA
  • [ ] Section headings, testimonials, and statistics use distinct typographic treatment
  • [ ] Form labels, error messages, and pricing tiers use typography — not just color — for hierarchy

Dashboards and Data Interfaces

Dashboards prioritize density and scannability over reading comfort. Typography must organize data without overwhelming the user.

  • [ ] Page title, section headers, and data labels use three distinct levels
  • [ ] Table headers, numeric data (tabular figures), and status labels are styled consistently
  • [ ] Base UI text is 13–14px with minimum 1.4 line height
  • [ ] Monospace is used for IDs and code — not mixed with sans in the same column
  • [ ] Navigation, breadcrumbs, and tooltips are distinguishable by more than color alone

Blogs and Long-Form Content

Reading experiences demand comfort over density. Typography should disappear — readers focus on ideas, not letterforms.

  • [ ] Body text is 17–21px desktop / 16–18px mobile with 1.5–1.65 line height
  • [ ] Content width is constrained to 45–75 characters (max-width: 65ch)
  • [ ] H1 once per page; H2/H3 create a scannable outline
  • [ ] Pull quotes, captions, and metadata are visually distinct from body text
  • [ ] A reading-optimized face is used — not the same 14px UI settings as dashboards

Portfolios and Creative Sites

Portfolio sites use typography as expression. The rules relax, but intentionality matters more, not less.

  • [ ] Display typeface reflects brand identity; body text stays readable (16px minimum, 1.5 leading)
  • [ ] Project titles are scannable; case study body follows long-form guidelines
  • [ ] Image overlays and animated text maintain contrast at all viewport sizes
  • [ ] Bio, contact, and metadata are styled consistently across all pages

Design Systems

Design system typography must be tokenized, documented, and enforced. Ad-hoc styling undermines the entire system.

  • [ ] Primitive and semantic tokens exist for all five typography dimensions
  • [ ] Tokens match between code (CSS/Tailwind) and design (Figma variables)
  • [ ] Every text style has a name, example, usage guideline, and accessibility notes
  • [ ] Linting flags hard-coded font sizes; new styles require system team approval

Brand Projects

Brand typography establishes recognition and trust across every touchpoint — web, print, social, and environmental.

  • [ ] Primary and secondary typefaces reflect brand personality and are licensed for all media
  • [ ] Minimum/maximum sizes, approved weights, and color pairings are documented with contrast ratios
  • [ ] Incorrect usage examples and co-branding rules are included in guidelines
  • [ ] Templates exist for web, email, social, and print; vendors receive font files and rules

Pre-Launch Final Pass

Regardless of project type, run this five-minute final check before any public release:

  1. Zoom to 200% — does everything remain readable and properly spaced?
  2. Squint test — can you identify heading levels without reading the text?
  3. Font count — are you using more typefaces than intended?
  4. Contrast scan — does any text fail against its background?
  5. Mobile check — does typography work on the smallest supported viewport?
  6. Real content test — replace placeholder text with actual copy and re-evaluate

Typography checklists do not replace judgment — they ensure judgment is applied consistently. Keep these lists accessible, update them as your team learns, and treat typography review with the same rigor you apply to functionality and performance.