Home/Foundations/Typography

Typography

One family — Atkinson Hyperlegible Next. Designed by the Braille Institute specifically to be hyperlegible. Weight does the work serifs would normally do.

Single family 14 semantic roles Mono for numbers

Family

Atkinson Hyperlegible Next solves the legibility problem at every size. Loaded from Google Fonts as a variable font (200–800).

200 · Extralight

Display fade

400 · Regular

Body text

500 · Medium

Labels, nav

600 · Semibold

Section titles

700 · Bold

Display, hero

Scale

Fourteen semantic roles. Use the role token; never hard-code font-size.

Display--type-display

Settle in good time

700 · 56 / 1.04

Display sm--type-display-sm

Branch performance

600 · 32 / 1.15

Page title--type-page-title

Today's pours

600 · 22 / 1.3

Section title--type-section-title

Cash count

600 · 16 / 1.4

Body lg--type-body-lg

Three tills open. Cash up due at close.

400 · 16 / 1.55

Body--type-body

Operating system for every site, every shift.

400 · 14 / 1.55

Body sm--type-body-sm

Receipt printed at 14:32 · 4 items · $ 284.50

400 · 13 / 1.5

Label--type-label

Cash sales

500 · 14 / 1.4

Label sm--type-label-sm

Branch

500 · 13 / 1.4

Caption--type-caption

Last updated 12 seconds ago

400 · 12 / 1.45

Eyebrow--type-eyebrow

Foundations

500 · 12 / 1.3

Table head--type-table-head

SKU · QTY · PRICE

500 · 12 / 1.3

Mono--type-mono

SKU-0421 · $ 4,827.40 · 2026-06-03

500 · 12 / mono

In context

A typical product surface — one display, one section title, one body run.

Greendale yard · today

Tuesday 3 June · 14:38. 14 supplier deliveries today. 38.4 tonnes intake. 3 queued at the gate.

Yard stockpiles

Mixed steel grade A · 142 t. Cast iron grade B · 84 t. Copper cable · 3.2 t.

Today's intake by hour

07:00 open · 13:00 peak ($ 412) · 19:00 close.

Numbers

Always tabular-num. Always mono for IDs, timestamps and money. The product is full of numbers; they need to line up.

$ 2,816.40

Daily revenue

38.4 t

Yard intake

14:32

Receipt timestamp

SKU-0421

Identifier

Anatomy

Token	Value	Used for
--font-sans	Atkinson Hyperlegible Next	Everything except numbers
--font-mono	Atkinson Hyperlegible Mono	IDs, timestamps, money, prices
--type-display	700 56/1.04	One per page; the headline
--type-page-title	600 22/1.3	The h1 inside the page header
--type-section-title	600 16/1.4	Card and panel titles
--type-body	400 14/1.55	Default running text
--type-caption	400 12/1.45	Sub-labels, helpers, timestamps

Do & don't

Set font-variant-numeric: tabular-nums anywhere numbers might change. Money in a list looks broken otherwise.

Don't

Reach for a different font for emphasis. Weight (500 → 600) gives the same emphasis without breaking rhythm.

Use sentence case for every heading and button. Title Case feels marketing-y; ALL CAPS is for eyebrows only.

Don't

Hand-set font-size: 17px. Use the closest semantic role token; the scale was tuned for harmony.

Code

/* Use the role token — never raw px */
.greeting h1  { font: var(--type-display); }
.card-title { font: var(--type-section-title); }
.amount     { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }