Typography is 90% of design. Here's how to actually use it.

The 90% figure is a provocation, not a measurement. But if you sit with it for a moment, it's harder to dismiss than it sounds.

Take away the layout, the color, the illustrations, the icons. What's left is text. And text is where most of the actual communication in an interface happens. Labels, headings, body copy, error messages, empty states, tooltips, button text. The quality of that text, and how it's set, determines whether the interface works. Everything else is presentation.

This is why getting type right is so disproportionately important. You can have mediocre illustration work and still have a great product. You cannot have mediocre typography and have a great product. The words are too visible.

The font choice is the smallest decision

Most people spend a lot of energy on font selection. The choice matters, but less than you think. A well-set geometric sans at appropriate sizes with good spacing reads better than a beautiful display typeface handled carelessly.

The more useful question isn't "which font" but "how many weights, and which ones?" Most interfaces need three: a regular weight for body copy, a medium weight for UI labels and secondary headings, and a semibold for primary headings and emphasis. Four if you need bold for specific moments. More than that and you're adding complexity without adding clarity.

Variable fonts have made this easier. You can get precise control over weight, width, and optical size from a single file. If you're choosing a typeface for a system, the variable version of an otherwise identical font is almost always the right call.

The line height problem

Line height is where most type goes wrong. The default in most tools is too tight for body copy and too generous for headings.

For body copy, 1.5 to 1.6 times the font size is a good starting point. This applies to anything above about 16px that's meant to be read for more than a sentence. At 18px body text, that's 27–29px line height. This gives each line room to breathe and makes scanning easier.

For headings, tighter is almost always better. A 48px heading at 1.5 line height looks like a paragraph. At 1.1 to 1.2, it looks like a heading. The tighter line height signals "this is a unit" rather than "these are individual lines."

For UI labels like button text, form labels, and navigation items, line height barely matters because they're single-line. Use 1 or slightly above, trim the text box if your tools support it, and move on.

Tracking: less is more, except when it isn't

Tracking (letter-spacing) has two useful settings for product design:

For large display sizes, anything over about 40px, slightly negative tracking helps the letters sit together the way they look in print. Around -1% to -2% at 64px. It compensates for the optical looseness that large type shows on screen at default tracking.

For small sizes and all-caps labels, anything under 14px set in uppercase, positive tracking helps. Tight all-caps text at small sizes is hard to read; a little extra space between letters opens it up. Around 5% to 8% is a good range for small uppercase labels.

For everything between, leave tracking alone. The default is almost always correct in that range.

The type scale question

Every design system needs a type scale. What most design systems have instead is a type collection. A set of sizes that were chosen individually at different points and happen to coexist in the same Figma library.

A real scale has a mathematical relationship between sizes. The exact ratio matters less than having one. Whether you use a major third (1.25x), perfect fourth (1.333x), or minor second (1.067x) determines how dramatic the jumps feel. More dramatic scales work for editorial and marketing. More compressed scales work for data-dense product interfaces.

The rule I use: pick your base size (usually the body text size, typically 16–18px), choose a ratio, generate the scale upward and downward, then round to whole pixels and evaluate visually. The math gives you a starting point. Your eyes tell you whether it's working.

Where most interfaces fail at type

Not in the font choice. In the consistency of application.

A type scale is useless if three different heading sizes are being used for the same function across different screens. Component libraries with well-defined type styles only work if the styles are actually applied instead of overridden locally. The design system might have a perfectly tuned scale, but if individual components override it with hardcoded values, you get visual noise that's hard to articulate but immediately felt.

The other common failure: not enough contrast between type levels. If your body text and your secondary label are the same size with different weights, the hierarchy is doing very little work. Size differences communicate more reliably than weight differences. Use both together when you want clear hierarchy, not as substitutes for each other.

---

The 90% claim is a reminder that type is not a cosmetic decision. It's a structural one. Getting it right is less about taste than about understanding how visual weight, rhythm, and contrast work together to guide attention. That's learnable, and it's worth the time to learn it properly.