Visual Design Basics

Choosing Readable Typefaces

Learn what makes type easy to read, from letter shapes and size to spacing, and how to pair two typefaces without making a page look cluttered.

On this page
  1. Typeface, font and why the words matter
  2. What makes type legible
  3. Size, spacing and line length
  4. Pairing without clutter
  5. Consistency across a body of work
  6. Text inside images and video
  7. Testing and licensing

Typeface, font and why the words matter

A typeface is a design family, such as a serif or a sans serif style. A font is one specific version of it, such as the bold weight at a given size. In everyday speech the words are often swapped, and that is fine. What matters more is knowing what you are choosing: the overall character of the letters, plus the weights and styles available within the family.

Good type is mostly invisible. Readers should think about what the words say, not how the letters look. That is the main test for any typeface choice: does it get out of the way?

What makes type legible

Legibility describes how easily one letter can be told from another. Readability describes how comfortable it is to read a whole passage. Several features affect both.

  • Open letter shapes. Letters with generous openings, like the gaps inside an “e” or “a,” stay distinct when small or blurry.
  • Clear differences between similar characters. In some typefaces a capital “I,” a lowercase “l” and the number “1” look almost the same. This matters for names, codes and short labels.
  • A reasonable x-height. The x-height is the height of lowercase letters such as “x.” Typefaces with a larger x-height often look bigger at the same point size and tend to hold up well on screens.
  • Moderate stroke contrast. Very thin strokes can disappear on low-resolution screens or in bright light. Extremely heavy strokes can clog the letter shapes.

Serif and sans serif styles are both used for long reading. Older advice that serifs are always better in print and sans serifs always better on screens is too simple, since modern screens render both well. Choose by the quality of the individual typeface rather than the category.

Size, spacing and line length

A well-chosen typeface can still be hard to read if the settings are poor. Three adjustments often matter more than the typeface itself.

Size. Body text that is too small is a common complaint. For web pages, a base size around 16 pixels is a frequently used starting point, and many readers prefer slightly larger. Test on a real phone rather than only on a large monitor.

Line spacing. Lines packed tightly together make it easy to lose your place. Slightly open line spacing, often around one and a half times the text size for body copy, usually reads comfortably. Headings can sit tighter.

Line length. Very long lines tire the eye, and very short lines break the rhythm. A line of roughly 50 to 75 characters is a common guideline for body text, though it is a guide and not a rule. On a narrow phone screen the line will naturally be shorter, which is usually fine.

Alignment matters too. Short paragraphs and generous white space also help, because they make text easier to scan. Left-aligned text with an uneven right edge is typically easier to read than fully justified text, which can create uneven gaps between words in narrow columns.

Pairing without clutter

You rarely need more than two typefaces. A typical approach is one for headings and one for body text, or even a single family used in different weights. Each added typeface raises the chance of a messy page.

Some habits keep pairings tidy:

  1. Give each typeface a job. One is for headlines, the other for paragraphs. Do not swap roles from page to page.
  2. Make the difference clear. Two sans serifs that are nearly alike look like a mistake. Pairing a serif with a sans serif, or a bold display style with a quiet text style, creates visible contrast.
  3. Match the underlying feel. Typefaces with similar proportions and similar x-heights often sit comfortably together even when their styles differ.
  4. Use one family with several weights. This is the safest option. Light, regular and bold from one family are designed to work together.
  5. Keep decorative styles for short moments. Script or ornamental faces are hard to read in paragraphs.

This is an application of the contrast idea in the overview of design principles: if two things differ, let them differ clearly, and if they do not need to differ, make them match.

Consistency across a body of work

Once you pick a pairing, keep it. Using the same headings, the same body style and the same sizes across posts, slides and graphics makes your work easier to scan and recognizable over time. Writing the choices into a simple style guide, covering typefaces, sizes and spacing, saves decisions later. The broader idea is covered in the article on consistency and visual identity.

Type also supports structure. Distinct heading levels help readers find their way, and clear heading structure helps people who use assistive technology as well. Keep the sizes in a visible order: the main title largest, subheads smaller, body text smallest of the three.

Text inside images and video

Type on images has extra risks, and the same applies to video captions. Busy photo backgrounds can make letters hard to read, so a plain area behind the text or a darker overlay often helps. Avoid thin weights over photos, and keep on-screen text short enough to read in a moment. Text that appears briefly on a small screen needs to be larger than you think.

Testing and licensing

Set a real paragraph, not dummy text, in your chosen style and view it on a phone and a larger screen. Squint and check that heading, subheading and body still look clearly different.

Licensing is also worth a quick check. Typefaces are usually licensed, and the terms vary on where they can be used, such as websites, print or video. Read the license that comes with the one you pick, and prefer typefaces whose terms clearly cover your use.

Readers vary, so no single choice suits everyone. Keep the number of styles small and adjust if people say something is hard to read.

The complete guide to visual design basics

Visual Design Basics for Non-Designers
Read the guide

Keep exploring

Guides from other topics

All topics →