Typography

Inter at twelve sizes and five weights, tuned for dense tables of readings.

Live React portsrc/assets/css/tokens.css

Scale

Twelve sizes, from 9 to 36px, all in Inter (--font-family-base). Half of them sit under 14px.

--font-size-5xl · 36pxSoil moisture 300 mm

--font-size-4xl · 30pxSoil moisture 300 mm

--font-size-3xl · 24pxSoil moisture 300 mm

--font-size-2xl · 20pxSoil moisture 300 mm

--font-size-xl · 18pxSoil moisture 300 mm

--font-size-lg · 16pxSoil moisture 300 mm

--font-size-base · 14pxSoil moisture 300 mm

--font-size-md · 13pxSoil moisture 300 mm

--font-size-sm · 12pxSoil moisture 300 mm

--font-size-xs · 11pxSoil moisture 300 mm

--font-size-2xs · 10pxSoil moisture 300 mm

--font-size-3xs · 9pxSoil moisture 300 mm

Five weights. The names run one step light: semibold is 500 and bold is 600.

400 · normal

Bore 12 · 4.2 m

475 · medium

Bore 12 · 4.2 m

500 · semibold

Bore 12 · 4.2 m

600 · bold

Bore 12 · 4.2 m

700 · extrabold

Bore 12 · 4.2 m

475 is the house medium. It stays open at 11px, where 500 fills in, and holds a row apart better than 400.

The size and weight each part of the interface uses.

Role	Size	Weight
Metrics tile figure	5xl · 36	700
Gauge reading	3xl–4xl · 24–30	600
Inline edit title	2xl · 20	500
Dialog and empty-state title	lg · 16	600
Body text, checkbox and radio labels	base · 14	400
Button label	base · 14	475
Field value	base · 14	500; placeholder 400
Table cell	md · 13	400; numbers 475
Table header, field label, badge	sm · 12	475
Helper and error text	xs · 11	400
Tooltip	2xs · 10	500
Menu group label	2xs · 10	600, capitals

Use 14px for body text, and 13px inside tables.
Set numbers in a table at 475 with tabular figures, so the columns line up.
Use 475 (--font-weight-medium) for button labels, field labels, badges and table headers.