Typography Is the Cheapest Upgrade Your Design System Has

When a product feels cheap and nobody can say why, the answer is almost always typography. Not the typeface choice, which gets all the attention, but the system around it: the scale, the line lengths, the rhythm, the fifty small decisions that either got made once with care or get made badly every day by default.

The good news is that type is the highest-leverage fix in design. You do not need to rebuild components or re-architect the app. You need about two weeks of focused work and the discipline to hold the line afterward.

Start with a scale that means something

Most design systems we audit have between fourteen and twenty text styles, named things like Heading-3-Alt and Body-Small-Medium-2. Nobody knows when to use which. The system did not decide, so every designer decides, so nothing matches.

We rebuild to a scale with six or seven steps, generated from a ratio so the relationships are consistent, and named for role rather than appearance: display, title, heading, body, caption, overline. When a style is named for what it does, the decision of when to use it makes itself.

Two weights. Occasionally three, if the brand genuinely needs a display weight. Every weight you add doubles the ways a screen can drift off-system, and it costs you on the wire too. Our engineering team budgets around 100 KB for fonts, and a tight system fits inside that with room to spare.

Line length is the silent killer

The single most common typographic failure on the web is body text running 120 characters wide because the container was wide and nobody stopped it. Reading comfort collapses somewhere past 75 characters. We set a max-width on prose in character units, bake it into the body components, and treat violations as bugs.

Related, and just as neglected: line height is not one number. Display sizes want tight leading, around 1.1. Body wants 1.5 or a touch more. A system that applies 1.5 everywhere makes headlines feel gappy and amateur. A system that applies 1.2 everywhere makes paragraphs suffocate.

The details that read as money

A short list of small things that quietly separate premium from template:

• Real quotation marks and apostrophes, everywhere, enforced in the CMS if necessary
• Tabular figures in tables and anywhere numbers align vertically
• Optical sizing enabled when the typeface supports it
• Letter spacing tightened slightly at display sizes and never tightened at body sizes
• Hanging punctuation on pull quotes, where the platform allows it

Individually, no user will ever mention these. Collectively, they are the difference between an interface that feels designed and one that feels assembled. Perceived quality is an accumulation of subthreshold signals, and type is where most of them live.

Hold the line

The system fails the first time someone ships a one-off size because the real sizes did not quite fit the layout. Sometimes the one-off is right and the scale should grow. Usually the layout is wrong and should change. Either way, the decision goes through whoever owns the system, and it gets made once.

We rebuilt the type system inside Møller's digital design language last autumn: seven styles, two weights, strict prose measures. Their team shipped a full season of campaign pages afterward without a single new text style, and the pages look like one company made them. That is the whole game.

Fix the type first. Everything else gets easier.