One of the most important techniques for effectively communicating content is the use of a typographic hierarchy. Typographic hierarchies are systems for organizing type that establish an order of importance within the data, allowing the reader to easily find what they are looking for and navigate to the content. It helps guide the reader’s eye to where a section begins and ends, whilst enabling the user to isolate certain information based on the consistent use of style throughout a body of text.

Titles, dates, and descriptions should all be styled uniquely, consistently and isolated by using paragraph spacing. This allows the viewer to easily separate information based on the styling, so they can get at the information needed.

Styling Techniques

There are a few basic methods for establishing a visual typographic hierarchy:

  • Size
  • Weight
  • Color
  • Position
  • Type Contrast

Most commonly these methods are used in combination with each other. In the concert list shown earlier, size, color, spacing, and type contrast were all used. The combinations are literally endless.

Size:

This is the easiest and most common method for establishing hierarchy.

Weight:

Simply using a bolder weight of a font can help isolate.

Color:

Color plays a big role in what our eye sees as primary and secondary. Generally speaking; warm colors pop, cooler colors recede.

Position:

Where sections of information are positioned in relationship to each other can establish a hierarchy.

Contrasting Typefaces:

A great way to achieve hierarchy is to use contrasting typefaces.

Combination:

As mentioned previously, these methods can be most effective when used in combination with one another. This is the most interesting part – deciding what combination is right for your content and layout.

Spacing Matters

One of the most important concepts in type design is spacing. It’s one of the most difficult concepts to grasp for beginning designers, yet it is also one of the most visually obvious. Proper typographic spacing is critical in establishing hierarchy; it can make the difference between confusion and clarity. It is used in the majority of hierarchical systems, and it is present in all of the examples in this article.

The rule of proximity in design generally states that related items should appear closer to each other than items that are not related. However, proper spacing involves more than just a hard return between sections of type. Generally, a hard return creates too much space between content in the context of a paragraph. Paragraph spacing – either before or after – should be used. I tend to use paragraph spacing that is equal to half of the line-height (or leading). This typically allows the group of content to hold together while providing an adequate division of content within it.

Other Considerations

It’s important that the meaning of a particular piece of content be taken into account when thinking about hierarchy. What is the subject matter of the content? What is it trying to communicate? If you don’t know, read it before making decisions on hierarchy and style.

In some scenarios, you may have the freedom to employ any of the hierarchy methods listed above, but in other cases you may be limited to a certain vertical or horizontal space or be concerned with adequate contrast of type on a background. Evaluate which methods work for the situation, and employ the ones that make sense. The old “simpler is better” mantra usually applies here. Remember, the goal is to present the content in an organized way.

Creating a Typographic Hierarchy Sheet

Your project is meant to go along with the logo sketches you have worked on. These should support the look and feel of your logo, and provide a more in-depth visual identity. Research the fonts you can use that you feel will be effective, balanced, and interesting without clashing or being distracting from your main logo. A logo that looks completely hand-drawn should not be paired with a geometric or “techy” looking font, and a minimal sans-serif would not look good with a hand-drawn or elegant “fancy” script.

You can look through free fonts to download from various sites that are listed on the resource links page.

Step 1:

Download the Typographic Hierarchy template, and create a style for each of the following:

  1. Headline 1
  2. Headline 2
  3. Headline 3
  4. Headline 4
  5. Sub Headline 1
  6. Sub Headline 2
  7. Tagline/Slogan
  8. Body Copy

Step 2:

Edit the top right section to reflect your name where it says “Student Name” – this is important as we will be using this for review as well as your final student portfolio.

Step 3:

Modify the text of each description line with the font name, style, and size as shown to the left; example: Font: Raleway Semibold | 56 pt. This should reflect the updated information and be as accurate as possible, so that if anyone else needed to work with your brand, they would be able to do so successfully.

Step 4:

Also ensure that you change the title lines to the appropriate font, while leaving the description text in a standard, plain font (sans-serif as shown or serif) for readability’s sake.

Pre-Flighting & Saving

Once you are happy with your typographic hierarchy sheet, follow these steps to ensure proper delivery of your file.

These steps are part of a process known as pre-flighting. Pre-flighting ensures that your files are properly setup for printing and viewing; as not everyone has the same fonts installed on their computer as the designer, it’s important to have both your native file as well as a final export file. The native file is the file that you can open and edit and continue to work on or take elements out of, while the the final export file converts all of your fonts to outlines so that they transfer and can be read.

You can zoom in on the images below by clicking on each to open a lightbox.

Step 1:

Make a copy of your file by selecting “Save as” under the File menu.

Step 2:

Use Command A (⌘A) to select all of your text (this ensures you don’t forget to convert an element to outlines) and then select “Create Outlines” under the Type menu.

Step 3:

Export your final file by saving it as a new version. You need to include your first initial and last name somewhere within the file structure so your grade will be properly attributed. You can use “TypographicHierarchies_MHale.pdf” so you can include the project title and your name.

Upload your finished file so these type projects can be discussed in class.

Full Name
Email
File Upload

Self-Assessment

Reading each statement given, be honest and introspective about your work. Check the box next to the number you feel is most reflective of it.

Be sure to write your name and date, and submit to the instructor for proper grade attribution.

Download the PDF to print and complete. Due by February 15th.