Typography · 04 of 04
Make the reading order clear
Use size, weight and spacing to show what matters and what belongs together.
The idea
Hierarchy helps a reader identify the subject, scan the sections and find supporting detail.
Size can establish that order, but it works alongside weight, position and spacing. Choose a treatment for each role and repeat it consistently.
Keep a heading visibly connected to the content it introduces. Give secondary information less emphasis while keeping it readable. If several elements compete, decide which needs attention first before adding more contrast. A small interface may need only a few levels; a long document may need more.
How to see it
Terms used in this lesson
The parts
- Hierarchy
- The visible order of importance and relationship between elements.
- Weight
- The relative thickness of a type style.
- Proximity
- How closeness suggests that elements belong together.
In practice
- Define a style for each content role
- Keep headings connected to their sections
- Make secondary information readable
Avoid
- Emphasising every line equally
- Using inconsistent styles for the same role
- Shrinking supporting text until it is difficult to read
The test
Scan the page without reading every sentence. Can you identify the main subject, section headings and supporting details in a sensible order?
Use the Type Scale to compare heading and body sizes before refining their weight and spacing in your layout.
Sources
- Ellen LuptonThinking with Type
- Rudolf ArnheimArt and Visual Perception
Reviewed against all forty, on your product.
The audit is the cheapest thing we sell, and it regularly concludes that you do not need the project you came for.