Typographic Hierarchy Study

Subtle Hierarchy and Underlying Grid Structures

The extended versions above attempts to illustrate the use of a series of four nested modular and proportional grids. Each body of text and related text(s) is nested and aligned to its own grid structure. The grid can be turned ON to elevate its organizational purpose; turned OFF to call out each set of information; or potentially used to graphically unify contrasting pieces of information. The grid can create order or unnecessarily add to a compositions visual complexity. Another variation might activate one opposing grid structure, with an opposite and unaligned set of grouped information.


Hierarchy is the order of importance within a social group (such as the regiments of an army) or in a body of text (such as the sections and subsections of a book). Hierarchical order exists in nearly everything we know, including the family unit, the workplace, politics, and religion. Indeed, the ranking of order defines who we are as a culture.

Hierarchy is expressed through naming systems: general, colonel, corporal, private, and so on. Hierarchy is also conveyed visually, through variations in scale, value, color, spacing, placemet, and other signals.

Like fashion, graphic design cycles through periods of structure and chaos, ornament and austerity. A designer’s approach to visual hierarchy reflects his or her personal style, methodology, and training as well as the zeitgeist of the period. Hierarchy can be simple or complex, rigorous or loose, flat or highly articulated. Regardless of approach, hierarchy employs clear marks of separation to signal a change from one level to another. As in music, the ability to articulate variation in tone, pitch, and melody in design requires careful delineation.

In interaction design, menus,texts, and images can be given visual order through placement and consistent styling, but the user often controls the order in which information is accessed. Unlike a linear book, interactive spaces feature multiple links ans navigation options. Cascading Style Sheets (CSS) articulate the structure of a document separately from its presentation so that information can be automatically reconfigured for different output devices, from desktop computer screens to mobile phones, PDAs, kiosks, and more. A different visual hierarchy might be used in each instance.

Text by Ellen Lupton, Jennifer Cole Philips
Graphic Design The New Basics [website], Princeton Architectural Press, 2008


The typographic studies included above were prepared for Ellen Lupton and Jennifer Cole Philips as a MFA candidate at the Maryland Institute College of Art. The diagrams/studies were considered for the studio publication Graphic Design The New Basics: Hierarchy. [Ultimately other sketches were included for publication] Each design follows a strict pattern of research and ongoing development of neue ideas/examples to educate and inspire hierarchy as a basic design principle. While the specific content is unimportant for this particular exercise, the examples are used for an educational introduction to the relationship of scale, position, grid structures, and the subtle relationship of hierarchical clustering between two bodies of text.


About this entry