Key question
How do you guide readers step by step into an article?
A page has an architecture: kicker, headline, lead paragraph, body copy, subheadings, captions, and callout boxes create levels with varying weight. A clear hierarchy shows at a glance where to start and what is important. It is created through size, font weight, spacing, colour, and positioning.
Learning objective: You will be able to identify the text levels of a page, create targeted entry points, and establish a typographic scale across all levels.
What is important must look important.
5.1 / The Elements of a Page
Each text level has a purpose.
An article consists of several text levels. These four lead into the text:
01
Kicker
Short line above the title; indicates the category, location or topic.
02
Title
The highest level; sparks curiosity and makes it clear what it's all about.
03
Lead
Introductory paragraph following the title; summarises the content and entices the user to read on.
04
Subheading
Breaks up long texts and offers new entry points when scanning.
In addition, there are elements such as bylines, captions, pull quotes and callout boxes. Each level is given its own, clearly distinguishable design. Too many levels cause confusion: five to seven distinctly different levels are usually sufficient.
A few clear levels beat many.
5.2 / Creating entry points
Those who scan need many doors.
Many people do not read an article from start to finish, but rather dip into it. Pull quotes, subheadings, and callout boxes offer additional points of entry. A pull quote is a highlighted quote from the text that piques readers' curiosity.
An info box contains facts, addresses, or background information that would otherwise disrupt the flow of reading. It is clearly separated from the main body of text, such as by a shaded background, a line, or a different font.
01
Pull quote
A striking quote from the text, set in large type, as an additional hook.
02
Lead
Summarises the article in two to three sentences and introduces the text.
03
Info box
Separates facts and service information from the main text.
Every entry point is an invitation.
5.3 / The typographic scale
Good sizes are interrelated.
Instead of choosing sizes at random, you can derive them from a scale: starting with the base font, each step is multiplied by the same factor, such as 1.25 or 1.5. This creates sizes that work together harmoniously and are clearly distinct.
A small ratio creates a calm impression and is well suited to books and reports, whereas a large one feels loud and fits magazines. The scale is a starting point: round the values to half points and adjust the line spacing to match the baseline grid.
One factor, many harmonious sizes.
Exercise
Build a landing page
Task: Design the landing page of a feature article for "Quer", incorporating all text levels.
STEP 1
Use the tool to set a scale for all text layers.
STEP 2
Place the kicker, headline, lead, body text and a subhead into the grid.
STEP 3
Add a pull quote or an info box as an additional entry point.
STEP 4
Use the three-second test to check whether the reading order is correct.
Evaluation: What did others see first within three seconds, and was that intentional?