Chart typography: axis labels, annotations, and the 8px crime scene

Chart typography: axis labels, annotations, and the 8px crime scene

Charts are typography under constraints: every pixel of text competes with data for attention. Most chart libraries default to typography that fails those constraints. The rules:

Axis labels: the 10-11px band

Axis labels want 10-11px - smaller than body text (they are reference material) but never below 10 (below that, numerals misread: 8s look like 6s at 8px). Tick labels in tabular figures so the axis column aligns. Rotate only as a last resort - rotated labels cost 20% of reading speed.

The chart title is a sentence

"Sales by region" is a title. "Sales grew 23% in EMEA, led by Germany" is a takeaway - and takeaway titles measurably outperform topic titles in comprehension studies. The type treatment: same size as section headings, no bold-scream, one line.

Annotations outrank data ink

The callout explaining the spike is why the chart exists. Type hierarchy: annotation text 12-13px with a clear link line to the data point; the annotation is the ONLY element allowed to interrupt the data area. Number your annotations when there are multiple (readers scan 1, 2, 3 in order).

Legends vs direct labeling

Direct labeling (text next to each line) beats legends whenever lines are few enough (<6). Direct labels are typography doing data work; legends force color-matching, a task humans are bad at under time pressure. If a legend is unavoidable: order it to match the visual stacking order, or mapping errors double.

Fonts for charts

• One family, usually the UI sans - charts inherit the page's type system.
• Tabular figures for any numeric column or axis.
• Avoid condensed faces for tick labels (numeral legibility dies); condensed works for category labels.
• When the chart library silently ships its own font (many embed one), the chart looks off-brand in a way nobody can name. Identify what the chart actually renders: screenshot it and check on-device - Typeye names the embedded typeface locally (typeye.com), no data leaving the machine.

The dashboard-scale problem

A dashboard is 9 charts competing for attention. Typography is the arbiter: chart titles at one consistent size, takeaway subtitles below them, axes identical everywhere. The charts that break the type grid draw the eye - which is exactly the tool for emphasis, and exactly the accident when inconsistent.

Chart typography is data accessibility. Ten deliberate decisions separate a chart people trust from a chart people squint at.