Visual hierarchy: give information a clear reading order
Rank actual content, assign consistent typographic and spatial roles, and troubleshoot layouts where everything competes or the important details disappear.
Rank content before choosing sizes
Visual hierarchy tells readers what to notice first and how the supporting information relates to it. Begin by ranking the content in plain text. A headline, a date, a location, and background explanation do not automatically deserve equal prominence simply because they are all necessary.
Identify the reading situation. A quick notice needs an immediate entry point and a short path to action. A reference sheet may need several clearly labeled starting points. The hierarchy should match that use rather than imitate a dramatic magazine cover regardless of how people will read it.
Use more than size
Scale is useful, but weight, placement, spacing, color, and grouping also establish order. A modest heading surrounded by clear space can lead a dense page. A very large heading buried among competing shapes may struggle to do so. Evaluate the complete relationship instead of measuring the title in isolation.
Choose a small set of recurring roles. For example, use one strong style for section headings and one quiet style for captions. Make the differences clear enough to recognize. Several nearly identical styles often feel accidental and require the reader to inspect each line before understanding its role.
Connect the levels
Keep a heading close enough to the material it introduces and separate it more clearly from the preceding group. Align related blocks or give them a shared visual treatment. A hierarchy needs connections as well as differences; otherwise, the page becomes a collection of unrelated announcements.
Watch repeated accents. If every price, name, label, and decorative dot uses the strongest color, that color no longer distinguishes the essential item. Reassign it to a specific role or reduce the competing accents. A clear system gives the reader a dependable expectation they can carry through the page.
Test finding as well as looking
Ask someone to locate a specific piece of information, such as the start time or the second step. Their route through the page can reveal a different problem from a general question about whether the design looks good. Observe the confusion before explaining how you intended the hierarchy to work.
Inspect the page at thumbnail size, then read it normally. The thumbnail exposes competing masses; close reading exposes misleading spacing and weak labels. Revise the highest-impact problem first. Shrinking secondary text is not the only way to create order: shortening copy, grouping details, and increasing useful gaps may work better.
Try it yourself
- Rank the content according to the actual reading task.
- Use a small set of clear, recurring visual roles.
- Test whether a new reader can find specific information quickly.
Worked example: a workshop schedule
Arrange a fictional workshop schedule with a title, three sessions, times, room names, and descriptions. Let session names lead each group, put times in a consistent position, and keep room labels quieter but easy to find. Use spacing to separate sessions. If a reader finds the large descriptions before the times, shorten the descriptions or reduce their visual weight. Preserve the same pattern for every session so the reader can scan the second and third entries after learning the first.
References & further reading
Examples and exercises in this guide are original teaching scenarios.
