Where Does the Eye Go
Exploring visual hierarchy
"I collected five transit posters from different cities — I thought we could tape them up and see what makes some of them work and others fail."
Sable pressed the last strip of tape against the whiteboard wall and stepped back. Five posters in a row. She could already feel that two of them pulled her eye immediately, and three of them felt like static.
"Start with poster two — the Berlin U-Bahn service change. Three things to notice: 1) the headline is 48pt bold, roughly three times the body text at 14pt, 2) the route map sits in the top third occupying about 40% of the poster area, 3) the effective date is in red — the only red element on the page. Size, position, and color are doing all the work."
"And poster four — the Meridian weekend schedule — I noticed everything feels the same size? The headline, the schedule table, the disclaimer at the bottom... my eye just kind of wanders around without landing anywhere."
"Exactly. Poster four has no visual hierarchy. The headline is 18pt, the table headers are 16pt, the body is 14pt — that's not enough difference. You need at least a 1.5× scale jump between levels to create a clear step. Berlin's poster uses a 3.4× ratio between headline and body. The Meridian poster barely hits 1.3×."
Sable leaned closer and squinted. Tomoko was right — once you measured it, the difference was obvious. The Berlin poster created a staircase for your eye to descend. The Meridian poster was a flat floor.
"What about position? The Berlin map is in the upper third. But the Meridian schedule table starts right at the top with no breathing room — it feels like you're being thrown into a spreadsheet."
"Position tells the eye where to enter. The Berlin poster gives you a headline first — context before content. The Meridian poster gives you raw data with no entry point. There's no doorway, just a wall of information."
"So visual hierarchy isn't just about making things look organized — it's about controlling the order someone reads a design? Like a path through the information?"
What Sable is describing — design as a controlled sequence of attention — is the core of visual hierarchy. It combines size, contrast, color, and position to create a reading order that guides the viewer through information step by step, from the most important element to the least.
"A path is the right word. If you can trace it — headline, then map, then date, then details — the hierarchy is working. If the eye bounces randomly, it isn't."
Sable pulled out her notebook and sketched the Berlin poster in miniature, drawing arrows between the headline, the map, the red date, and the body text. Four stops on a visual route. She drew the Meridian poster next — and couldn't place a single arrow.
1. When Tomoko measured the Berlin poster — 48pt headline, 14pt body, a 3.4× scale ratio — she revealed the mechanics of visual hierarchy. The size difference between elements isn't decorative; it creates a sequence. The eye reads the largest element first, then the next largest, descending like steps. When the Meridian poster compressed that ratio to 1.3×, the steps disappeared and the eye had no path to follow.
2. Sable's insight — that hierarchy is "a path through the information" — captures the principle precisely. Visual hierarchy isn't about making a design look neat. It's about engineering the order in which someone encounters information, using size, contrast, color, and position as directional tools. A poster without hierarchy is a room without doors — the information is all there, but you don't know where to enter.
Berlin poster: 3.4× scale ratio = clear reading path from headline → map → date → detailsThe understanding that visual communication depends on controlling the sequence of attention — that readers don't absorb a page all at once but follow a path created by the designer — is a principle that connects graphic design to architecture, wayfinding, and every discipline concerned with how people navigate information.