Typography

One focused chapter from the Thorbis interface research. 8 rules. Read the research index for every chapter and focused study.

Typography

Inter Variable for UI. Body and interface: Inter Variable, Rasmus Andersson . Designed for computer screens, not print. Headings may use Inter’s display/optical-size axis. Mono is Geist, from the Vercel design team. Paco Coursey , reserved for IDs, commands, code, and timestamps.
Weight and color do more than size. Use the Type scale: at 14px, a value may use 500 and a sentence uses 400. Color roles separate the rest: fg for emphasis, body for reading, marker for short metadata. Do not dim a sentence into metadata. If you squint and cannot tell the roles apart, the hierarchy is too weak.
A small named scale. Deviate from it as little as possible. Equivalent peers share size, weight, line-height, and numeric treatment. Thin weights are display-only, never below 18px.
Line-height by role. Follow the Type scale’s line heights: a page title uses 1.25 and reading text uses 1.5. Use unitless values. If a heading needs three or more lines, shorten it or use a reading role with at least 1.4 line height; do not squeeze the lines to fit.
Cap the measure. Long-form text follows the Type measure, 65–75ch. Operational tables, boards, and schedules may use the full work surface.
Centered type is ceremony. A hero, a symmetrical product, a universal claim may sit center. Specs, comparisons, chapters, and proof sit start. Do not center a paragraph of performance numbers. Do not center body on a workbench.
Font smoothing on the root. Apply antialiased once so macOS does not render type heavier than intended.
Wrap with intent. text-wrap: balance on headings, pretty on descriptions. Skip both on long-form. Use an en dash for ranges (2010–2020) and a non-breaking space so 10 MB never splits.

I built this for the dispatcher at 7 a.m., the tech in a crawlspace, and the owner closing the books. Quiet chrome. Precise work. I’m still learning. These are the notes.

Applied bookmark research

Reviewed 2026-09-06. These examples reinforce the existing owners; they do not introduce another visual style or claim the product behavior is implemented. Read the 26-source review and access limits.

Keep operational text steady and unambiguous

Changing digits, shifting labels, and brittle wrapping make money and status harder to inspect.

Evaluate numeric alignment where amounts are compared, stable action labels during requests, and wrapping with real content. Treat optical adjustments as controlled system decisions. Keep the existing font families and semantic type roles.

Thorbis example. An invoice comparison aligns changing amounts without hiding their currency or precision. A long property name wraps without displacing the next action. Save remains the action; the adjacent status explains what happened.

Verify. Try zero, negative and large amounts, long names, missing values, fallback fonts, text expansion, and browser zoom. Compare readability at actual size rather than approving a magnified specimen alone.

Do not import. No blanket balanced wrapping on data rows, copied display face, custom page-local type scale, or status copy that claims more than the system knows.

Open the type skill · Evidence: Details that make interfaces feel better; Web Interface Guidelines; Invisible Details