07
3 min read
Type Tokens
You hardcoded 18px on one card title. 17px on another. 1.125rem on a third. Same role. Three sizes. The page reads careless before anyone reads a word.
The Principle
A typographic system defines font sizes, weights, spacing, and hierarchy once. Design systems express this with design tokens. Familiar patterns reduce cognitive load.
The Rule I Follow
I define text styles early and reuse them everywhere. If I'm inventing a new heading style halfway through a project, the system needs work.
Try It Yourself
Slide from ad hoc styles to full tokens and watch this lesson snap into one system.
The Mistake I'd Avoid
Making small visual tweaks on every screen because they "feel right." Tiny inconsistencies add up fast.
Remember This
A good typography system is one people stop noticing after they've learned it once.
:root {
/* type scale */
--text-body: 1rem;
--text-h3: calc(var(--text-body) * 1.333);
--text-h2: calc(var(--text-h3) * 1.333);
--text-h1: calc(var(--text-h2) * 1.333);
--text-meta: calc(var(--text-body) / 1.333);
/* leading per role */
--line-body: 1.6;
--line-meta: 1.5;
--line-h1: 1.2;
--line-h2: 1.25;
--line-h3: 1.3;
/* weight */
--weight-body: 400;
--weight-heading: 600;
}
body {
font-size: var(--text-body);
font-weight: var(--weight-body);
line-height: var(--line-body);
}
h1 {
font-size: var(--text-h1);
font-weight: var(--weight-heading);
line-height: var(--line-h1);
}
h2 {
font-size: var(--text-h2);
font-weight: var(--weight-heading);
line-height: var(--line-h2);
}
h3 {
font-size: var(--text-h3);
font-weight: var(--weight-heading);
line-height: var(--line-h3);
}
.meta {
font-size: var(--text-meta);
line-height: var(--line-meta);
}:root {
/* type scale */
--text-body: 1rem;
--text-h3: calc(var(--text-body) * 1.333);
--text-h2: calc(var(--text-h3) * 1.333);
--text-h1: calc(var(--text-h2) * 1.333);
--text-meta: calc(var(--text-body) / 1.333);
/* leading per role */
--line-body: 1.6;
--line-meta: 1.5;
--line-h1: 1.2;
--line-h2: 1.25;
--line-h3: 1.3;
/* weight */
--weight-body: 400;
--weight-heading: 600;
}
body {
font-size: var(--text-body);
font-weight: var(--weight-body);
line-height: var(--line-body);
}
h1 {
font-size: var(--text-h1);
font-weight: var(--weight-heading);
line-height: var(--line-h1);
}
h2 {
font-size: var(--text-h2);
font-weight: var(--weight-heading);
line-height: var(--line-h2);
}
h3 {
font-size: var(--text-h3);
font-weight: var(--weight-heading);
line-height: var(--line-h3);
}
.meta {
font-size: var(--text-meta);
line-height: var(--line-meta);
}