Pathwise

Visual Design Fundamentals · Lesson 9 of 12 · 12 min

Typography that reads well

Choosing a font is the small decision. Size, line height and line length are the big ones. Learn the numbers that make text comfortable, how to pair typefaces, and what changes in Persian.

Serif and sans-serif

Serif

Letters with small strokes at the ends, like the ones on a printed book page or a newspaper masthead. Feels traditional, literary, official. Good for long printed text and for anything that wants to sound established.

Sans-serif

No end strokes; plain, even shapes. Feels modern, neutral, technical. Good for screens, signs, small sizes and interfaces. Most apps and most road signs are sans.

What actually decides readability

  • Size. Body text around 10–12pt in print, around 16px on screen, 24pt or more on a slide. Then ask where it will really be read: from the back row, on a wall, on a phone in sunlight.
  • Line height. About 1.4 to 1.6 times the size for body text. Tighter for big headings.
  • Line length. Roughly 45 to 75 characters a line.
  • Alignment. Align to the side where reading starts and leave the far edge ragged, as in lesson 3. Justified text on short lines opens ugly rivers of white space.
  • Which typeface. Last, and the least important. Almost every well-known family you already have is good enough for the work you're doing.

Check yourself

Omid writes a one-page notice on A4 at 11pt, running the full width of the page with narrow margins. Readers say it is tiring even though the words are short. Which change helps most?

  1. Make the text smaller so the page holds it more comfortably
  2. Narrow the text to about 45 to 75 characters a line
  3. Centre every paragraph so the page looks balanced
  4. Switch to a more decorative typeface with more character
Show the answer

Narrow the text to about 45 to 75 characters a line

Right. Full-width A4 at 11pt runs well past 80 characters, and the eye keeps losing its place returning to the start of the next line. Wider margins or two columns fix it without touching a word.

Line height

NOUN · TYPOGRAPHY · also called leading

The distance from one line of text down to the next, usually written as a multiple of the font size. 1.0 means the lines almost touch. Body text reads best at about 1.4 to 1.6. Large headings need less, roughly 1.1 to 1.2, because at a big size the same multiple opens into a hole.

16px text at 1.5 puts 24px between one line and the next. Drop the same paragraph to 1.1 and it turns into a grey brick your eye slides off.

Line length

NOUN · TYPOGRAPHY · also called the measure

How many characters fit on one line, spaces counted. Comfortable reading sits at roughly 45 to 75 characters, with about 60 in the middle of that range. Too long, and the eye loses its place on the journey back to the start of the next line. Too short, and the sentence arrives in fragments and you read in jerks.

A paragraph running the full width of a wide laptop screen can reach 130 characters. That is why the same article often feels easier on a phone, where the column is narrow whether the designer thought about it or not.

A body-text recipe

  where          size       line height   line length
  printed A4     10-12 pt   1.4-1.5 x     45-75 characters
  a web page     16 px      1.5-1.6 x     45-75 characters
  a phone        16 px      1.5-1.6 x     35-50 characters
  a slide        24 pt +    1.2-1.3 x     one short line

Working out an A4 page:
  page width                21 cm
  margins 3 cm each side -> text column 15 cm
     at 11 pt that is roughly 80+ characters: still too wide
  margins 4 cm each side -> text column 13 cm
     roughly 65 characters: right

Output

Wide margins are not decoration.
They are how you set the line length.

If you can't change the margins, use two columns, or raise the text size: bigger letters mean fewer characters per line.

Check yourself

Negar sets her body text at 1.5 line height and her 48pt heading at 1.15. Two different numbers is the consistent choice here, not a slip.

Show the answer

True

True. Line height is a multiple of the text size, so the bigger the type the more space each step adds. Body text is comfortable at about 1.4 to 1.6, but a 48pt heading at 1.5 opens a visible hole between its lines; about 1.1 to 1.2 keeps it tight. Consistency means applying one rule everywhere, not one number.

PAIRING

Two typefaces at most

Two is the ceiling, and one is often better. The safest pairing isn't two typefaces at all: it is one family in two weights, bold for headings and regular for body. If you do want two, make them clearly unlike, because lesson 2's rule about timid contrast applies to type as well. A serif for headings with a sans for body is the classic pair, and it works because nobody could confuse the two.

A café menu set in one family: section names in bold, dish names in regular, prices in the same regular. One typeface doing three jobs, and nothing on the page can clash.

Check yourself

Match each setting to the number that usually works

Show the answer
  • Line height for body text → About 1.4 to 1.6 times the size
  • Line height for a large heading → About 1.1 to 1.2 times the size
  • Line length for comfortable reading → About 45 to 75 characters
  • Number of typefaces on one page → Two, and often one is better

Check yourself

Does this help reading or hurt it?

  • Body text set at 1.5 line height
  • A whole paragraph set in capitals
  • Headings in the bold weight of the body font
  • Four typefaces on one poster
  • Lines running the full width of a wide screen
  • A text column narrowed to about 60 characters
Show the answer

Helps: Body text set at 1.5 line height, Headings in the bold weight of the body font, A text column narrowed to about 60 characters

Hurts: A whole paragraph set in capitals, Four typefaces on one poster, Lines running the full width of a wide screen

Check yourself

Negar is making a Persian poster from a template built for English. To make the title stand out she adds letter-spacing and slants the Persian text into italic. What is wrong?

  1. Letter-spacing breaks the joined script and the slant distorts the letterforms
  2. Nothing is wrong; both are normal ways to make a title stand out in any language
  3. The title also needs to be centred for the poster to look balanced
  4. Persian titles should always be set in a serif typeface
Show the answer

Letter-spacing breaks the joined script and the slant distorts the letterforms

Right. Persian letters connect, so spacing them apart splits words into pieces, and most Persian fonts have no true italic, so the tool just skews them. Use size, weight and colour instead, with a family that has real weights.

Lesson recap

  • Serif feels traditional and suits long printed text; sans feels modern and suits screens, signs and small sizes.
  • Body text: about 16px on screen or 10–12pt in print, line height 1.4–1.6, lines of 45–75 characters.
  • Big headings take a tighter line height, about 1.1–1.2.
  • Two typefaces at most, and one family in two weights is safer than two families.
  • Persian needs a real Persian font, more line height (about 1.7–2.0), no letter-spacing, no all-caps and no fake italic.

Keep it, don't just read it

Pathwise brings each idea back just before you'd forget it, with a quick question. Free on Android and on the web, in English and Persian.

Cafe Bazaar Myket Open the web app

All lessons in this course

  1. Visual hierarchy: what do I look at first?
  2. Contrast: make different things really different
  3. Alignment and proximity
  4. Whitespace and a spacing system
  5. Grids and balance
  6. Composition and the focal point
  7. How colour works
  8. Building a palette
  9. Typography that reads well
  10. How to critique a design
  11. Design a poster, step by step
  12. Ten mistakes and your checklist