typography is the interface
every casing decision, every punctuation mark, every numeral is a micro-decision about trust, cognition, and personality. the specification is deterministic — every rule is machine-checked at ci time, every surface inherits the same discipline.
type tester · live
type any string · pick a family · scrub the size · the brand types itself across the 16-token ladder, the 5 leadings, the 6 trackings, the 5 weights. every value is a token id, never an inline number.
- 1010px
- 1111px
- 1212px
- 1313px
- 1414px
- 1515px
- 1616px
- 1818px
- 2020px
- 2424px
- 2828px
- 3232px
- 4040px
- 4848px
- 6464px
- 8080px
- family
- serif
- size
- 48px · token 48
- weight
- 400
- tracking
- 0
- leading
- 1.10
- chars
- 69 typed
every fontSize token · rendered
sixteen fontSize tokens compose the entire type ladder. anything outside this set fails the per-category ceiling check at ci. display sizes (32px and up) lead with semibold + tight leading; ui sizes use regular + relaxed leading.
one stack · four scripts
the --mono stack covers latin and cyrillic in jetbrains mono; cjk falls through the stack to the operating system mono. tabular numerics and slashed zero stay enforced across every script via font-variant-numeric.
if-this · then-this · per rule
five branches resolve every casing question deterministically. sentence case is the default for 85% of all copy.
| condition | case | note |
|---|---|---|
text inside a product UI (nav, button, label, form, table, chip, error) | sentence | — |
tiny meta label (≤3 words, ≥11px, eyebrow / column group / badge) | uppercase | letter-spacing ≥ 0.08em |
marketing headline (≤10 words) AND brand tone is formal or classic | title | optional · default still sentence |
brand wordmark / logotype / intentional brand stylization (documented) | any | must be documented |
| else | sentence | — |
first word capitalized · rest lowercase
unless it is a proper noun. nav, buttons, labels, page titles, error toasts, ai output — all sentence case.
- ✓
Save changes - ✓
Create workspace - ✓
Email address - ✓
Recent activity - ✓
No results found
- ✗
Save Changes - ✗
Create Workspace - ✗
Something Went Wrong - ✗
EMAIL ADDRESS
narrow window · capitalize substance
allowed for marketing headlines under twelve words. articles, short prepositions, and coordinating conjunctions stay lowercase. first and last word capitalized regardless.
| example | form | note |
|---|---|---|
✓Design Intelligence for Everyone | title | marketing headline |
✓The Future of Interactive Brand Systems | title | marketing headline |
✓Building What Matters Most | title | marketing headline |
✗The Future Of Interactive Brand Systems | title | prepositions / articles wrongly capped |
✗design intelligence for everyone | title | prepositions / articles wrongly capped |
structural meta-labels only
section eyebrows, badges, status tags, period labels. never on buttons, never on errors, never on body text.
SAVE CHANGES · SOMETHING WENT WRONG ·THIS FEATURE ALLOWS YOU TO… — all-caps on a button, an error, or body text degrades trust silently.documented brand stylization
lowercase is reserved for brand wordmarks and intentional voice moments. zero is one of the documented brands: the wordmark, the surfaces, the tone — all lowercase. signals restraint and machine-readability.
| documented brand | lowercase form | exception |
|---|---|---|
zero | zero | brand wordmark |
getzero.dev | getzero.dev | brand wordmark |
zero-universe | zero-universe | brand wordmark |
proper nouns | Hyperliquid · Telegram · Web3 · JavaScript | capitalized inside body copy |
structural caps | OBSERVE · DECIDE · REFUSE · LIVE | eyebrows ≤3 words override the lowercase rule |
single line · no period
full sentences in body copy take periods. multi-sentence errors and helper text take periods. single-line ui labels, headings, placeholders — no period.
- ✓body copy with full sentences
- ✓multi-sentence error / warning messages
- ✓tooltip or helper text containing a full sentence
- ✗single-line UI labels (button text, form labels, nav items, chips, tags)
- ✗single-sentence notifications or toasts
- ✗headings and subheadings
- ✗table column headers and non-sentence list items
- ✗placeholder text
in every list of three or more
the serial comma prevents ambiguity. it is the standard for product, editorial, and marketing copy alike. two-item lists never take a comma.
✓ Your plan includes storage, team access, and priority support.✗ Your plan includes storage, team access and priority support.✓ Create and share.✗ Create, and share.three glyphs · three jobs · zero overlap
the hyphen joins words. the en dash spans ranges. the em dash breaks thought. chicago em dash takes no spaces.
| glyph | character | use | example |
|---|---|---|---|
| hyphen | - | compound modifiers · compound nouns | AI-generated content |
| en dash | – | number / date / time ranges | Active Monday–Friday |
| em dash | — | break in thought · amplification · parenthetical | Three things matter—speed, accuracy, and trust. |
word—word · never word — word · never word - word.digits stack · per column
tabular-nums slashed-zero everywhere digits appear in columns. comma thousands · period decimals · no space before % or $.
| rule | value |
|---|---|
| tabular | Always use tabular-nums slashed-zero in tables, prices, timestamps, percentages, sparklines, and any column where digits stack. |
| thousands | comma (84,312) |
| decimals | period (1.42%) |
| percent | no space (1.42%, not 1.42 %) |
| currency | no space ($184.21, not $ 184.21) |
the contract is enforced · not aspired to
scripts/check-typography.mjs walks every surface file before any deploy. eight checks, three severity levels, non-zero exit on any error.
| check |
|---|
| ✓no straight ' or " inside JSX text — use curly quotes |
| ✓no double-hyphen ' -- ' — use em dash |
| ✓no spaced em dash ' — ' — use Chicago no-space style |
| ✓no Title Case On Long Headings (>12 words) |
| ✓no missing Oxford comma in lists of 3+ ('a, b and c' should be 'a, b, and c') |
| ✓no period on h1/h2/h3 headings |
| ✓no exclamation point in error / warning copy |
| ✓ALL CAPS chips warn if >3 words |
pnpm run ci:typography and pnpm run ci:all. the gate must be green before any commit lands on main.