The Journal

Interface Craft3 min read

Typography for Developers: The Only Guide You Need

Typography makes or breaks your UI. Here's everything a developer needs to know about fonts, sizing, spacing, and readability.

You don’t need a decade of type theory. You need five decisions, made once and applied everywhere. Get them right and your interface reads clean on every screen and every size. Get them fuzzy and no amount of shadow or spacing will save it. Here’s the whole system in five moves.

Pick one family

Ship one typeface for the whole app. A solid variable sans — Inter, Geist, or the native system stack — handles UI, headings, and body text without a second font download. You get hierarchy from weight and size, not a second family. Add a mono face only for code and hard numbers. Two families is plenty; three is a smell.

Build a scale

Stop picking sizes by feel. Define six or seven steps and use only those — say 12, 14, 16, 20, 24, 32, 48px, each roughly 1.2–1.25× the last. Body sits at 16px, and nothing users actually read goes below 14px. Put the steps in CSS variables so a size that isn’t on the list literally can’t ship. One scale kills the 15px-here, 17px-there drift that makes a UI look amateur.

Leading by size

Line height isn’t one global number. Small text needs air; large text needs to close up. Body at 16px wants about 1.5. A 32–48px heading wants 1.1, or it reads double-spaced. The rule you can’t forget: the bigger the text, the tighter the leading. Set it per step, not once at the root.

Measure and numbers

Long lines tire the eye — by the time you track back to the left edge, you’ve lost your place. Cap body text at 45–75 characters with max-width: 65ch; that single line fixes most walls of text. And anywhere digits change — prices, counts, timers, tables — set font-variant-numeric: tabular-nums so numbers line up in columns instead of jittering as they update.

Ship it

Set these five as tokens today: one family, a fixed scale, leading that tightens with size, a capped measure, and tabular numbers. That’s a real type system, and it takes an afternoon. Do it once and you stop re-litigating font size in every PR. Everything after — tracking on labels, all-caps eyebrows, pairing two weights — is a tweak on a foundation that already reads well.

Frequently asked questions

How should developers set up typography in a UI?
Make five decisions once and apply them everywhere: pick one variable sans family, define a fixed six to seven step size scale, set line height that tightens as text grows, cap line length at 45-75 characters, and use tabular numbers for changing digits.
What font size and line height should body text use?
Set body text to 16px with a line height around 1.5, and never drop text people actually read below 14px. Large headings from 32 to 48px want tighter leading near 1.1, since the bigger the text, the tighter the line height should be.
How do I stop text lines from being too long to read?
Cap body text at 45-75 characters per line with max-width: 65ch. Long lines tire the eye because tracking back to the left edge makes readers lose their place, and that single declaration fixes most walls of text.