Typography
03 / Typesetting & Legibility
Key question
How does text turn into a readable page?
Macrotypography arranges text on the page: alignment, font size, line spacing, line length and hierarchy. It determines whether reading is a pleasure or something you give up on after three lines.
Learning objective: You can coordinate font type, size, line spacing and line length with each other and establish a clear hierarchy using a typographic scale.
Readability is no accident.
3.1 / Types of Sentences
Ragged right, justified, centred.
The sentence structure determines how lines end. Each has its strengths.
01
ragged text
Left-aligned with ragged right. Consistent word spacing, ideal for screens and narrow columns.
02
Justified text
Both margins straight. Calm in books, but requires hyphenation and sufficient line length.
03
Central axis
Centred. For short texts such as invitations and titles, never for long paragraphs.
Good ragged text flows gently: no extremely short lines, no stair-stepping, and no single words at the end of a paragraph.
45 to 75 characters per line.
3.2 / Size, line spacing, line length
Three values that belong together.
Body text needs around 45 to 75 characters per line. Shorter lines break up the sentence, while longer ones are tiring because the eye has to search for the start of the next line.
Line spacing increases with line length: short lines work well with around 130 per cent of the font size, whereas long lines require 150 to 160 per cent. On screen, 16 pixels is the lower limit for body text.
Longer lines, more line spacing.
3.3 / Hierarchy and scale
Few sizes, clearly graduated.
Hierarchy shows what is important. It is created through size, weight, colour, and spacing. A type scale defines a few sizes that grow from a base size and a ratio, such as 1.25.
Less is more: four to five steps are enough for most projects. The space before a heading is larger than after it, ensuring the heading clearly belongs to the following text. In the "Scale" tab, you can calculate a scale and copy it as CSS.
Few sizes, clearly graded.
Exercise
A programme double-page spread
Task: Design a double-page spread for the Rheinufer Theatre programme.
STEP 1
Use the tool to set the size, line spacing, and line length for the body text.
STEP 2
Calculate four heading levels in the 'Scale' tab.
STEP 3
Organise the play's title, cast, synopsis, and a quote in a clear hierarchy.
STEP 4
Print the page at actual size and read it from a normal distance.
Evaluation: Can a stranger find the title, date and location in five seconds?