Understanding Visual Hierarchy

Now that we’ve got the scale of text type talked about, however successfully, (I think I’ll end up completely revisiting that subject later, when I’ve got a better approach worked out) we can move on to the relationships created by scale.


Visual hierarchy – whether used in a magazine, book or other long text, or on a single page or slip of paper, or a sign or system of signs, or in the presentation of a single piece of data in relation to a larger data set – serves to draw a clear relationship between the one thing, and the whole thing. Hierarchy obviously exists beyond the visual. There are levels, real, imagined, and imposed, in and upon any medium. The organizing principles are essentially the same at whatever scale. And we should take into account things like hierarchy in non-visual media, but this is already beginning to get deep, and that’s probably a full discussion to have some other time. I’ll put it on my list, and keep the rest pretty light and practical.


Using type to create hierarchy is more than setting headers and subheads at different type sizes; but can incorporate several principles of design, such as scale, composition or arrangement, pattern, and pacing, contrast (above all), and probably more if you care to go looking for examples. Even if all the type on a page is the same size, such as in a resume, we can still draw conclusions about the related nature and relative importance of each piece just by looking at what it’s grouped with, whether it’s set near the top of the page or the bottom, whether it aligns the same or differently from elements around it, and how much negative space it requires above or beneath it, or to one side. The following are a few bits of advice, which we’ll get into with more depth next week.

Separate the content from its navigation.

Just as a policeman is capable of policing in large part because of what he wears, the navigational elements of a document should set themselves apart from the content in order to be in its service. This can be made to work simply by setting the navigational type in a complementary voice (using a different typeface or contrasting style within the same face), or by using any number of techniques to break up and separate the two.

Understand the complexity of the piece you’re working on, and get rid of as much of it as you can.

If you’ve got seven main levels of hierarchy, but only really use four of them regularly, then condense, adapt, rearrange, erase, etc. (to the extent you can) to get it down to four. When I’ve had to do this in the past, the client has been generally happy that I take interest in the content’s accessibility and readability, not just its appearance.

Make sure the hierarchical steps are well-defined.

A header with a lower-level header set just below it should appear as such. The audience should not be left to wonder why these two appear so similar to one another, nor should they wonder if there’s room for a step in between. Find a way to differentiate, so that each step down can occupy and own its place in the hierarchy.


Switch up your approach.

If you’re laying out a numbered-item proposal, or some very sequential piece of technical writing, such as product documentation, you’ll soon find that additional left indent accompanying each level of hierarchy will lead to some ungainly narrow columns, high page counts, and odd margins. Create systems that reset themselves periodically, using all the ways you can think of to diversify the content within each level.

That’s all for now. Using Type looks more closely into visual hierarchy on Thursday. A special thanks to Octavio Pardo’s Sutturah, featured here in a small way (outside its use in the title graphic). Its period character used at different sizes illustrates the points above.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s