Skip to content
GitHub
Sections

Reference · Things to avoid

Monospace sized by a guessed ratio

Forbidden
Inline code set to 0.9em — or any fixed ratio — to stop it looking bigger than the text around it
Instead
Measure both faces before correcting either. If they share an x-height, the ratio is the mismatch. Let code inherit its host's size.

What this rule looks like

Forbidden
Instead

Why this rule

The habit comes from pairings where it is true: a mono face drawn separately from the text face often does sit larger at the same font-size. In a superfamily it does not. IBM Plex Sans and IBM Plex Mono are both x-height 51.6 and cap-height 69.8 per 1000 units — identical — and mono is *narrower*, not larger. A 0.9em there sets code at x-height 46.8 inside text at 52, creating the mismatch it was meant to remove. A ratio is also the wrong shape of answer. Inline code appears inside body text, headings, table cells and captions; one multiplier has to be right for all of them, and a fixed token is worse still — it collapses code in a heading to caption size. Inheriting is correct in every host, which is why this rule has no token. The measurement is one line in a browser: render x in both faces at the same size and compare the rendered heights, or read sxHeight from each font's OS/2 table. Do it once per project when the brand file is written, not per component.

Kind
Rule
Section
Things to avoid
Group
Typography
Bucket
judgment
Severity
note
Since
v0.9.0

Read as plain text