Lesson 0004
The workhorse of hierarchy. 95% of your design problems are typography problems in disguise.
Primary source: Matthew Butterick, Practical Typography (Key Rules) ↗
Most BI documents are 90% text: model descriptions, metric definitions, dashboard captions, Slack updates. If your typography is bad, the document is bad, full stop. Good news: the rules are tiny. You can hold them in your head.
Every concept below opens with a concrete demo. Look first; read the definition second.
Demo
Charter, 1.4rem, regular
Charter, 1.4rem, bold italic
Both lines are the same typeface (Charter). Each is a different font (Charter Regular 1.4rem vs Charter Bold Italic 1.4rem).
A typeface is the family. A font is one specific style at one specific size and weight. In practice everyone says “font” for both, but knowing the distinction helps you ask for what you want.
Demo
Serif, Charter
Sans-serif, Inter
See the little feet on the serif sample, the strokes at the ends of Q, l, y? Those are serifs. Sans-serif (French sans = without) drops them.
Rule of thumb for BI work: sans-serif for UI (dashboards, buttons, labels), serif for long-form reading (whitepapers, postmortems). Don’t agonise, Inter or system-ui will carry you 95% of the way.
Demo, same point size, very different visual size
Verdana, tall x-height
Garamond, short x-height
Both lines are 2.4rem. Verdana looks bigger. Why? Its x-height, the height of a lowercase x, takes up more of the line. Tall x-heights read larger and stay legible at small sizes. Short x-heights feel elegant but disappear in body copy.
For UI and dashboards, pick a typeface with a tall x-height (Inter, Source Sans, Verdana). You’ll get more readable text at the same size.
Demo, three leading values on the same paragraph
Leading (pronounced “ledding”) is the vertical space between lines. Too tight, lines crash; too loose, they float apart and the paragraph stops feeling like one paragraph.
Default: 1.5–1.7 for body text. Headings can be tighter (1.1–1.25) because their lines are short anyway.
Demo, same text, three line lengths
Measure = number of characters per line. The eye loses its place on a return trip if the line is too long, and chops thought into fragments if too short.
Sweet spot: 45–75 characters per line for body copy (Butterick’s rule). 66 is the often-quoted ideal. This page is set to 680px exactly for this reason.
Demo, same word, three tracking values
Body text, default tracking
Tight (-0.06em), for very large headlines
Wide (+0.18em, uppercase), for small labels
Tracking is the space between letters across a word or line. Two practical uses:
Leave body text alone. Don’t track to fit, rewrite to fit.
Kerning is the same idea but between two specific letters (the V-A gap in “VARIANCE”). Software handles it; you rarely touch it.
Demo, a 6-step scale on a real page
A type scale is the small set of sizes you allow yourself to use. Pick 5–7 sizes, use only those. Never invent a one-off size for one heading.
Each step should be visibly bigger than the last (remember CRAP, Contrast). The scale above uses a ratio of roughly 1.25× per step (a “major third” scale, common and safe).
This is the engineering bit: define your scale once, then your job is to pick from it, not invent. Same idea as a design token system.
Butterick’s short list of the most common beginner mistakes. Avoiding these alone puts you ahead of 80% of internal docs.
Same content, two typographic treatments. One is the kind of thing you produce by default; the other applies everything above.
Before
This model represents one row per order. It joins customers and products. Created by data team. Last updated 2026-05-12. The grain is order_id. Below are the fields:
order_id - primary key, integer. customer_id - foreign key to customers.id. product_id - foreign key to products.id. order_date - date the order was placed. total_amount - sum in usd, two decimal places. status - enum: pending, paid, shipped, cancelled.
Note: this model is rebuilt nightly at 02:00 utc. for real-time use the orders_streaming model instead.
Sins committed: one typeface for everything (Times), body 16px Times feels cramped, no scale, all-flat-no-hierarchy, fields jammed into prose. Reader hates this page.
After
One row per order. Joins customers and products. Grain: order_id.
order_id, primary key. Integer.
customer_id, foreign key → customers.id.
product_id, foreign key → products.id.
order_date, date the order was placed.
total_amount, sum in USD, two decimals.
status, enum: pending, paid, shipped, cancelled.
Rebuilt nightly at 02:00 UTC. For real-time, use orders_streaming.
Same words. But: one sans-serif typeface, one monospace for code, a 4-step type scale (meta / h1 / h2 / body), leading 1.6, measure capped, fields broken out for proximity. Reader scans this in 5 seconds.
Exercise 1 of 5
A teammate’s 1500-word incident postmortem is set in Inter at 14px, full-window-width. Which two typography rules are violated, and which gives the bigger fix?
Body text too small (14px) and lines too long (no measure cap).
Measure is the bigger fix. Cap the width to 600–700px and the document becomes readable even at 14px. Bumping to 16px helps but doesn’t solve the eye-losing-place problem.
Long-form text is a 1D scanning task. The eye can only return-trip reliably across so many characters. Width is the binding constraint.
Exercise 2 of 5
You’re designing a one-page handout that has a 60-word headline-style summary at the top, and three paragraphs of background below. Pick the right typeface strategy:
C. Sans-serif heading (sharp, modern, reads well at large sizes) plus serif body for long reading. A also works and is safer if you’re unsure. B is unusual but not wrong. D breaks rule 1.
For a handout the prospect will read, serif body is calmer on the eye over 200+ words. For a dashboard or quick-glance UI, stay all sans-serif.
Exercise 3 of 5
A page title sits at 18px and the body text at 16px. The title doesn’t feel like a title. Which CRAP principle is violated, and which typography concept fixes it?
Contrast is violated. Fix with a wider type scale, e.g. title at 28–32px, body at 16px. The title should be at least 1.5–2× the body.
A timid type scale is the most common hierarchy mistake. Pick a ratio (1.25× or 1.5× per step) and commit.
Exercise 4 of 5
A KPI tile shows QUARTERLY REVENUE as the label and $4.2M as the
value. The label is in caps with default tracking and looks mashed. What’s the fix?
Widen the tracking on the all-caps label (+0.08 to +0.12em). The letters get room to breathe and the label looks deliberate.
All-caps + tight tracking is one of the most common BI dashboard sins. A two-character tracking adjustment makes the difference between “built by an engineer” and “designed”.
Exercise 5 of 5
Name the four typographic sins from memory. Don’t peek.
1. Too many typefaces. 2. Body text too small. 3. Lines too long (measure). 4. All-caps body copy.
If you ever review your own work and can’t find a bug, run this four-item checklist. It catches the majority.
Ask me anything. Have a Holistics doc, slide, or dashboard you want critiqued with the typography rules? Paste it in, I’ll mark up the sins and propose a fix.