Consistency

Every typography decision you've made in this series (measure, contrast, scale, leading, weight, spacing) only works if it repeats. A type systemA complete, consistent set of typographic rules, covering sizes, weights, line heights, and spacing, encoded as reusable tokens and applied uniformly across every component in a product. is not a set of good values. It's the same good values, applied the same way, every time.

Same content. Same layout. The left version was built component by component. Each developer picked sizes that looked right in isolation. The right version uses a scale. You trust it before you read it.

Slide through four stages, from ad hoc sizes to a full token system. The inconsistent version isn't ugly. That's what makes it dangerous. Each choice is defensible alone. Together they signal that no one owns the typography.

Consistency compounds. A user who sees the same heading size in three sections stops parsing size and starts parsing content. A user who sees three different "heading" sizes stays in low level visual processing, comparing, doubting, tiring, which raises cognitive loadThe mental effort required to process and understand information. High cognitive load slows comprehension. Good typography reduces it by making structure instantly readable without conscious thought..

The left panel above shows it: Dashboard at one size and weight, Recent activity at another, caption at a third. Same page, three hierarchy levels, no shared scale. This ships on production apps every day.

Inconsistent typography increases cognitive loadThe mental effort required to process and understand information. High cognitive load slows comprehension. Good typography reduces it by making structure instantly readable without conscious thought. because the reader cannot build a predictive model of the page. Consistent typography disappears, which is the goal. The type should carry structure silently so content carries meaning.

:root {
--text-body: 1rem;
--text-h3: 1.333rem;
--text-h2: 1.777rem;
--text-h1: 2.368rem;
--line-body: 1.6;
--weight-body: 400;
--weight-heading: 600;
}

h1 { font-size: var(--text-h1); font-weight: var(--weight-heading); }
h2 { font-size: var(--text-h2); font-weight: var(--weight-heading); }
h3 { font-size: var(--text-h3); font-weight: var(--weight-heading); }
p  { font-size: var(--text-body); font-weight: var(--weight-body); line-height: var(--line-body); }

:root {
--text-body: 1rem;
--text-h3: 1.333rem;
--text-h2: 1.777rem;
--text-h1: 2.368rem;
--line-body: 1.6;
--weight-body: 400;
--weight-heading: 600;
}

h1 { font-size: var(--text-h1); font-weight: var(--weight-heading); }
h2 { font-size: var(--text-h2); font-weight: var(--weight-heading); }
h3 { font-size: var(--text-h3); font-weight: var(--weight-heading); }
p  { font-size: var(--text-body); font-weight: var(--weight-body); line-height: var(--line-body); }