Typography in UI Design: Choosing and Pairing Fonts

Most of an interface is text. Labels, buttons, headings, messages and content all depend on typography, which means type decisions affect usability as much as appearance. Good typography is mostly invisible: the reader simply understands. Bad typography creates friction, strain and mistakes.

This guide covers the practical decisions that make interface text work.

Start with readability

Prioritise legibility over personality.

• Choose typefaces designed for screens, with clear letterforms and open shapes
• Make sure similar characters are distinguishable, such as capital I, lowercase l and the number 1
• Test at the smallest size you will use
• Avoid overly thin weights for body text, which disappear on low-resolution screens and in bright light

Safe, flexible choices include system fonts (San Francisco on Apple platforms, Roboto on Android, Segoe UI on Windows) and well-designed open-source families such as Inter. System fonts load instantly and feel native.

Limit your fonts

Most products need one or two families.

• One family in several weights is often enough and keeps pages light
• Two families can work: one for headings, another for body text
• More than two usually looks messy and slows down loading

Every extra font file adds weight. Load only the weights and character sets you use. See Core Web Vitals for performance tips such as font-display: swap.

Pairing fonts

When you do pair two typefaces:

• Choose contrast with harmony. Combine different styles (for example, a geometric sans-serif heading with a humanist body font), not two that are almost the same.
• Match x-height and proportions so they sit well together.
• Use one font for one job. Do not mix them randomly within the same element.
• Check licences for web and app embedding.

When unsure, pair a distinctive heading font with a neutral body font, or use a single family with varied weights.

Build a type scale

A type scale is a set of sizes that relate to each other, giving the interface rhythm and hierarchy. A simple approach multiplies a base size by a consistent ratio. For example, a base of 16 px with a ratio around 1.25 gives approximately 16, 20, 25, 31 and 39 px.

Define roles instead of random sizes:

Role	Typical use
Display / H1	Page or screen title
H2, H3	Section headings
Body	Main text
Small / caption	Secondary details, helper text
Label	Buttons, form fields, navigation

Document them as tokens in your design system.

Choose sizes that work

• Body text: at least 16 px on the web is a common baseline. On mobile, follow platform defaults (around 17 pt body on iOS, 16 sp on Android).
• Avoid text below roughly 12 px except for rare, non-essential details.
• Respect user settings. Support dynamic type on iOS and font scaling on Android, and use relative units like rem on the web so layouts adapt.

Control line height

Line height (leading) affects how comfortable text is to read.

• For body text, roughly 1.4 to 1.6 times the font size works well
• Headings can be tighter, around 1.1 to 1.3
• Increase line height for longer lines

Manage line length

Long lines tire the eye. Aim for roughly 45 to 75 characters per line for body copy. On wide screens, constrain text width (for example, with max-width: 65ch) instead of letting it stretch.

Create hierarchy

Guide the reader’s eye through size, weight, colour and spacing.

• Use size and weight for primary hierarchy, and avoid relying on color alone
• Keep a consistent order: title, subtitle, body, caption
• Add space between groups. Proximity signals relationship.
• Use bold and italics sparingly for emphasis
• Avoid long passages in all caps; they are harder to read

Align and space text

• Left-align body text for left-to-right languages. Centered paragraphs are harder to scan.
• Avoid justified text on narrow screens, where it creates uneven gaps.
• Keep consistent paragraph spacing and margins.
• Support right-to-left languages if relevant, including mirrored layouts.

Make text accessible

• Ensure sufficient contrast: 4.5:1 for normal text. See colour theory for UI.
• Do not embed important text in images
• Test with large text and zoom up to 200 percent
• Use real text so screen readers can read it
• Be careful with decorative fonts that harm legibility for people with dyslexia or low vision

See accessibility basics for more.

Internationalisation

If your product supports multiple languages:

• Choose fonts with full character coverage for your target scripts
• Allow room for text expansion; some languages run 30 percent longer than English
• Avoid hard-coded text widths and fixed-height containers
• Test line breaking and font fallbacks in each script

Common mistakes

• Too many typefaces and sizes
• Light grey, thin text on white
• Cramped line height
• Very long line lengths
• Fixed pixel sizes that ignore user settings
• Using decorative fonts for body text

Checklist

• One or two families, with only needed weights loaded
• Clear type scale with defined roles
• Body text at a comfortable size and line height
• Line length around 45 to 75 characters
• Strong contrast and real text
• Supports dynamic text sizing
• Tested across languages and devices

Final thoughts

Good typography makes content effortless to read. Choose reliable fonts, set a clear scale, protect readability and test on real devices. For help building a typographic system that fits your brand, see our UI/UX design service or brand design service, or get in touch.