Typography Tuesday: Hierarchy
Samantha Warren, Former Viget
Article Category:
Posted on
Unlike print, the web is interactive; establishing a visual hierarchy through typography is essential in guiding the user to the information they are seeking online. Visual Hierarchy is the arrangement of elements in a gradual series in order of importance, enticing users to interact with a web site through visual cues. Typography online is less an element and more an interface, where characteristics such as size, weight, style, color, and location help the user to navigate the site through emphasis.
Visual Language
A user automatically comprehends visual relationships when one first views a web site. In other words, users' minds group things that are similar and separate things that are visual differently. For web typography, these associations provide visual cues to the functionality and importance of type itself. Once the mind comprehends these cues, it associates them with their functions defining a visual language.For example, once the size, typeface, location, and color of navigation text is determined, the user will continue to associate those characteristics with navigation throughout the site. The wonderful thing about web typography is that HTML provides a hierarchical structure that can translate into a visual hierarchy. HTML tagging descends in order of importance putting emphasis on prominent elements of the content. The trick is translating this degradation clearly and effectively into the typographic styles.
Gestalt
When understanding hierarchy, I have found it really helpful to revisit the Gestalt Principles of Perception in order to fully understand these relationships. I have found it extraordinarily helpful to understand this theory when justifying design decisions as well; after all, designers just don't pull this stuff out of thin air ... right? The idea behind Gestalt theory explains that the human mind groups smaller pieces of visual puzzles to make a greater whole.The Gestalt Principles of Perception include:
- Proximity - How close elements are to each other.
- Similarity - Items that look similar are grouped together.
- Closure - Elements are grouped together if they complete a pattern or form.
- Continuance - Items come together according to symmetry, regularity, and smoothness.
Emphasis
Typographic emphasis comes into play when designating a higher priority to one element over another. Emphasis is giving type a treatment that contrasts with that of the type around it in order to call more attention to it. While stroke-weight, size, and color can all do this, style can be a fantastic way to creatively apply more emphasis. Drop caps, small caps, or handwritten lettering when used sparingly and effectively can attract the user's attention. The level of attention a specific element can demand from a user is often referred to as "visual weight." Heavier stroke weights, bright colors, and more exaggerated fonts all carry heavier levels of visual weight.
Hierarchy is a fundamental concept that has a direct impact on how a user experiences a web site. At the heart, it's just about getting your priorities straight.
Examples of Sites with Fantastic Typographic Hierarchies:
(Sites that have good Typographic Hierarchies don't have to be predominantly type sites ... I just happen to dig them as clear examples. These are good too.)
