Typography

Inter throughout, three weights, and line heights in even pixels rather than unitless multipliers — the vertical rhythm has to survive nesting inside dense control rows, and multipliers drift with font size.

Three registers, not one size ramp

title · 16/600/22
Puzzle Cutline
App bar only
field-strong · 14/500/20
Section header · value 200 mm
Structure and values
field · 14/400/20
Field label: tab size
Labels
label · 14/600/20
Button label
Buttons only
note · 12/400/18
Affects line width in the cut file only; the actual kerf is set by power and focus. The 18px line height is what keeps four lines from suffocating.
Paragraph helper text
micro · 12/400/16
mm · 14:32 · 24px dense controls
Units and time
ruler · 9/400
0 20 40 60 80 100
Ruler only

Structure and explanation are two registers and should not be scaled together. 12px is not "14 one size smaller"; it is the step for paragraph helper text — line height 18 rather than 16, precisely because four lines of 12px on a 16px rhythm suffocate. Rescaling the whole system takes two groups of variables.

Build hierarchy with weight and colour, not size

Three layers inside a single 14px. What separates the field label from the value is one step of weight plus one of colour — clearer than adding another size, and it doesn't make the panel taller.

Pieces14/500 primary
30 pieces, 33.33 × 30.00 mm each.

Section header 14/500 primary → field label 14/400 secondary → helper text 12/400 tertiary. Three layers, one size.

Esc
Search all docs · to navigate · to open