Typography Expert

---
name: typography-expert
description: Master typographic craft with type selection, pairing, scale, spacing, and readability best practices.
category: creative-design
---

## Overview

Typography is 90% of most designs' visual voice — and the difference between
amateur and
professional work is rarely the font choice but the spacing, scale, and
discipline. This skill
covers type selection, pairing, hierarchical scale, micro-typography (kerning,
leading, measure),
and readability across print and screen.

## When to use

- Choosing and pairing typefaces for a brand or project

- Building a typographic scale and hierarchy

- Fixing typography that feels "off" but you can't say why

- Setting long-form text for readability (articles, reports, books)

- Reviewing designs for typographic quality

## Core concepts

- - - **Pairing: contrast with harmony.** Pair typefaces that contrast in one
  dimension (serif/sans,
  geometric/humanist) but share another (x-height, proportions). The safest
professional pairing:
  one distinctive display face + one workhorse text face.
- - - **The type scale.** A modular scale (e.g., 1.25 ratio:
  12/15/19/23/29/36/45) creates harmonious
  size relationships. Define roles (display, h1-h4, body, caption) with size,
weight, and
  line-height — then never deviate.
- - - **Line height and measure.** Body text: line-height 1.4-1.6, measure (line
  length) 45-75
  characters. Too tight suffocates; too loose disconnects lines. Headlines can
go tighter (1.0-1.2).
- - - **Micro-typography.** Kerning (space between specific pairs, especially in
  headlines), tracking
  (overall letter-spacing — tighten headlines slightly, loosen small
caps/uppercase), and optical
  alignment (punctuation hangs outside the margin).
- - - **Hierarchy through contrast.** Size, weight, color, and spacing create
  levels. Adjacent levels
  need clear contrast — if h2 and h3 look similar, the hierarchy has failed.
When in doubt,
  exaggerate the difference.
- - - **Readability rules.** Left-aligned body text (never justified on screen —
  it creates rivers),
  adequate contrast (4.5:1 minimum), one idea per paragraph, and hyphenation off
for narrow columns.

## Practical workflow

1. 1. 1. **Define the typographic job.** Brand personality, content types
   (headlines? long-form?
   data?), contexts (screen, print, both?). The job determines the requirements.
2. 2. 2. **Select the text face first.** The workhorse matters most — it carries
   90% of words. Test
   candidates with real content at real sizes: does it stay readable at 14px?
Does it have the
   needed weights and italics?
3. 3. 3. **Choose the display face.** Personality lives here. Ensure it
   contrasts with the text face in
   a controlled way and works at large sizes (check distinctive letters: g, a,
R).
4. 4. 4. **Build the scale.** Define every role with
   size/weight/line-height/letter-spacing. Test the
   full scale on a real page — headlines through captions — before finalizing.
5. 5. 5. **Set the details.** Kerning on headlines and logos (check AV, To, Wa
   pairs), hanging
   punctuation, proper dashes (— em, – en, - hyphen), curly quotes, and tabular
figures for data.
6. 6. 6. **Stress-test.** Long paragraphs, short labels, all-caps treatments,
   tiny captions, dark mode.
   Fix widows/orphans, awkward breaks, and any size where the hierarchy
collapses.
7. 7. 7. **Document the system.** A one-page type spec: faces, scale table,
   usage rules, and don'ts.
   Typography systems die when the next person guesses.

## Common pitfalls

- - - **Too many typefaces.** Each additional face dilutes the voice. Two is the
  professional
  standard; three needs justification.
- - - **System fonts by default.** Nothing wrong with system fonts functionally,
  but they're the
  typographic equivalent of a blank wall — fine, forgettable, and sometimes
exactly right for
  native-feeling UI.
- - - **Ignoring line height.** Default line-heights (usually 1.2) are too tight
  for body text. This
  single fix improves more designs than any font swap.
- - - **Fake styling.** Faux bold/italic (browser-synthesized) instead of real
  weights. If the face
  lacks a true bold, pick a different face.
- - - **Centered paragraphs.** Centered body text destroys readability — the eye
  can't find the next
  line start. Center headlines only.
- - - **Widows and orphans.** Single words stranded on the last line, or single
  lines stranded at
  column tops. Fix with non-breaking spaces or subtle rewording — details
readers feel but never
  notice.