Typography Rules for UI Design

Interfaces are mostly text. Labels, buttons, headings, descriptions, error messages, table data, navigation — strip away the text and most products are just colored rectangles. That makes typography one of the highest-leverage skills in UI design.

Good UI typography isn't about choosing an exciting font. It's about readability, hierarchy, and consistency. These are the rules I rely on.

1. Choose a highly legible typeface#

For interface text, legibility beats personality. Look for:

• Clear, open letterforms, especially at small sizes.
• Distinct characters — capital I, lowercase l, and the number 1 shouldn't be confused.
• A large x-height for readability at small sizes.
• Multiple weights, at least regular, medium, and semibold.
• Good support for the languages and numerals you need, including tabular figures for data.

Proven UI typefaces like Inter, SF Pro, Roboto, and similar workhorses exist for a reason. Use expressive display fonts for headlines and brand moments, not for dense interface text.

2. Limit yourself to one or two typefaces#

One well-designed family with several weights can handle an entire interface. If you add a second, give it a clear role — usually headings or brand moments — and keep the pairing consistent. Three or more typefaces almost always look chaotic.

3. Use a type scale#

Don't pick font sizes ad hoc. Define a scale and use only those sizes. A practical UI scale might be:

12, 14, 16, 18, 20, 24, 30, 36, 48

Each size should have a defined role, such as caption, body small, body, subheading, and headings at several levels. Store them as text styles in Figma and as tokens in code, so designers and developers always use the same set.

4. Body text: 16px is a good default#

For web interfaces, 16px is a comfortable default for body text. Smaller sizes like 14px work for secondary text and dense interfaces, while 12px should be reserved for captions, labels, and metadata. Avoid going below 12px for anything people need to read.

On mobile, follow platform conventions and respect the user's system text size settings.

5. Set line height by size#

Line height affects readability as much as font size:

• Body text — around 1.4 to 1.6 times the font size.
• Headings — tighter, around 1.1 to 1.3.
• Single-line UI labels — can be tighter still, but ensure descenders don't clip.

Aligning line heights to a 4px increment helps text sit neatly in a spacing system.

6. Control line length#

Long lines are tiring to read; short lines break rhythm. Aim for roughly 50 to 75 characters per line for body text. In wide layouts, constrain text columns with a max width rather than letting paragraphs stretch across the screen.

7. Build hierarchy with more than size#

Hierarchy tells users what to read first. Size is one tool, but not the only one:

• Weight — semibold for headings and emphasis.
• Color — primary text for important content, secondary for supporting text.
• Spacing — more space above headings than below, grouping them with their content.
• Case — small uppercase labels with letter spacing for section labels, used sparingly.

Using several subtle tools often creates clearer hierarchy than dramatic size jumps alone.

8. Limit weights and styles#

Too many weights create noise. A typical interface needs regular for body, medium or semibold for emphasis and UI labels, and perhaps bold for large headings. Avoid using italics for UI text, and don't underline anything that isn't a link.

9. Ensure sufficient contrast#

Text must be readable against its background. Follow WCAG contrast guidelines: at least 4.5:1 for normal text and 3:1 for large text. Light gray text on white may look elegant in a mockup, but it fails real users in real conditions — bright sunlight, low-quality screens, and aging eyes.

10. Align text consistently#

Left-aligned text is easiest to read in left-to-right languages. Center alignment works for short headings and empty states, but not for paragraphs. Right alignment is best reserved for numbers in tables, where it helps people compare values.

11. Use tabular figures for numbers#

In tables, dashboards, and anything with changing numbers, use tabular (monospaced) figures so digits line up vertically and values don't jump as they update. Many UI fonts support this as an OpenType feature.

12. Handle truncation and wrapping deliberately#

Real content varies. Decide how text behaves when it's too long:

• Wrap body text naturally.
• Truncate single-line labels with an ellipsis, and provide the full text somewhere accessible.
• Avoid truncating critical information like prices or names when possible.
• Test with long words, long names, and translated text, which can be significantly longer than English.

13. Respect accessibility settings#

Users may increase their text size. Layouts should accommodate larger text without overlapping or clipping. Use relative units in code, and test designs at larger sizes to make sure they still work.

Typography is the interface#

When typography is consistent and readable, interfaces feel calm and trustworthy. When it isn't, no amount of color or illustration can fix it.

Choose a legible typeface, use a defined scale, set comfortable line heights and lengths, build hierarchy carefully, and make sure everything has enough contrast. Get those right, and you've solved a large part of UI design.