Typography
Font families, the type scale, weights, and the semantic role rule.
Typography tokens control font families, sizes, weights, and line heights. Each theme can override font families — switching themes refreshes the live previews on this page.
Font family must match the element's semantic role. Heading/title elements → --font-family-heading. Label/badge/tag/button/caption → --font-family-label. Body copy → --font-family-body. BDS defaults all three to the same family during development, so misuse only surfaces when a client theme assigns distinct typefaces — by which point the violation has shipped.
Heading casing
Headings and section titles use title case. This is the copy-side companion to the semantic role rule above: the role rule governs which font a heading uses, this governs how its words are capitalized. Apply it to every hardcoded heading and Section / __title string.
The rule
- Capitalize the first and last word, and every major word (nouns, verbs, adjectives, adverbs, pronouns).
- Lowercase these minor words unless they fall first or last:
- articles —
a,an,the - coordinating conjunctions —
and,but,or,nor,for,so,yet - prepositions of three letters or fewer —
of,in,to,on,at,by
- articles —
- Capitalize both parts of a hyphenated compound —
Full-Time,Inside-Out. - Pronouns are always capitalized —
We,Us,Our,Your,It.
Prepositions of four letters or more are treated as major words and stay capitalized (With, From, Into, Over).
Examples (from the brikdesigns.com #490 sweep):
| Sentence case | Title case |
|---|---|
| Our services | Our Services |
| Get in touch | Get in Touch |
| What we collect | What We Collect |
| What we do with it | What We Do With It |
| Your rights | Your Rights |
| Monthly support services | Monthly Support Services |
| Other customer stories | Other Customer Stories |
| Share your details | Share Your Details |
Scope — what this does not govern:
- CMS-authored content — service, story, and plan names are editor-owned; render them as authored. Don't auto-case at render time (lossy for acronyms and proper nouns, and the wrong ownership).
- Conversational status / confirmation microcopy — "Message sent!", "Thanks! We'll be in touch." stay sentence case; they're voice, not headings.
Enforcement lives in each consumer repo (e.g. a JSX heading lint gate in brikdesigns, brikdesigns#491), not in BDS.
Font families
--font-family-display--font-family-heading--font-family-body--font-family-labelSemantic typography
These are the tokens components actually use. Each row renders the sample at its actual size — comparing a heading-md to a body-md is a hover-and-look operation, not a math operation.
Heading sizes
The heading scale starts at 18px (--heading-tiny). 16px territory is body and label.
Headings
--heading-tiny...--heading-sm...--heading-md...--heading-lg...--heading-xl...--heading-xxl...--heading-huge...Heading scale variants (data-mode-typography)
The heading scale is the one mode axis on --heading-* (see Cascade → Modes). Default needs no attribute; set data-mode-typography on :root (or any subtree) to select a variant. compact/comfortable/spacious are uniform density steps; expressive is a steeper modular curve (smaller small end, larger large end) for editorial / marketing surfaces. Values are --font-size-* references (px shown):
| token | default | compact | comfortable | spacious | expressive |
|---|---|---|---|---|---|
--heading-tiny | 20 | 18 | 22.5 | 25.3 | 16 |
--heading-sm | 22.5 | 20 | 25.3 | 28.5 | 20 |
--heading-md | 25.3 | 22.5 | 28.5 | 32 | 25.3 |
--heading-lg | 28.5 | 25.3 | 32 | 36 | 32 |
--heading-xl | 32 | 28.5 | 36 | 40.5 | 40.5 |
--heading-xxl | 36 | 32 | 40.5 | 45.5 | 45.5 |
--heading-huge | 40.5 | 36 | 45.5 | 51 | 57.5 |
<html data-mode-typography="expressive"> <!-- whole document -->
<section data-mode-typography="compact">…</section> <!-- one subtree -->display-* is mode-invariant — variants move --heading-* only.
Body sizes
Body
--body-tiny...--body-xs...--body-sm...--body-md...--body-lg...--body-xl...--body-huge...Label sizes
Labels
--label-tiny...--label-xs...--label-sm...--label-md...--label-lg...--label-xl...Display sizes
Display
--display-sm...--display-md...--display-lg...--display-xl...Icon sizes
Icon sizing tokens used by IconButton and inline icons.
Icons
--icon-tiny...--icon-xs...--icon-sm...--icon-md...--icon-lg...--icon-xl...--icon-huge...Font size scale (primitives)
Primitive scale from 10px to 515px. Components reference these only through the semantic tokens above.
--font-size-2510.26px--font-size-5011.54px--font-size-7514px--font-size-10016px--font-size-20018px--font-size-30020px--font-size-40022.5px--font-size-50025.3px--font-size-60028.5px--font-size-70032px--font-size-80036px--font-size-90040.5px--font-size-100045.5px--font-size-110051px--font-size-120057.5px--font-size-130064.7px--font-size-140072.8px--font-size-150081.9px--font-size-160092.2px--font-size-1700103.9px--font-size-1800116.9px--font-size-1900143px--font-size-2000171px--font-size-2100205px--font-size-2200247px--font-size-2300296px--font-size-2400355px--font-size-2500426px--font-size-2600515pxFont weights
--font-weight-lightThe quick brown fox (300)--font-weight-thinThe quick brown fox (300)--font-weight-regularThe quick brown fox (400)--font-weight-mediumThe quick brown fox (500)--font-weight-semi-boldThe quick brown fox (600)--font-weight-boldThe quick brown fox (700)--font-weight-extra-boldThe quick brown fox (800)--font-weight-blackThe quick brown fox (900)Line heights
| Token | Value |
|---|---|
--font-line-height-tight | 100% |
--font-line-height-snug | 125% |
--font-line-height-normal | 150% |
--font-line-height-175 | 175% |
--font-line-height-200 | 200% |
Related
- Color tokens — pair text-* tokens with semantic backgrounds
- Spacing tokens — the rhythm typography sits on