facebook google plus twitter
Webucator's Free Typography Tutorial

Lesson: Type Hierarchy

Welcome to our free Typography tutorial. This tutorial is based on Webucator's Typography course.

Type hierarchy is important in a page layout, as it helps the user understand levels of importance in the text and gives meaning to the message being shared. Hierarchy is also relevant to Section 508. When a web page is read aloud to a user by assist technology, the page hierarchy needs to be set up to work with these technologies in order for the page meaning to be translated correctly.

Lesson Goals

  • To create a flow of information on a page.
  • To implement proper structure in a print or web page.
  • To document your choices for future use.

Creating a Flow

Creating a Smooth Flow of Information on a Page

Using the proper typeface, font variations, and layout structure all add up to a good flow of information on a page. Using the right placement of white space will also add to a smooth flow. If any of these aspects is out of place, we run the risk of the message not getting across.

The designer of the layout is not always the best one to judge if the flow delivers the right message as they are too close to the topic. To test the flow, use a sample group of the target audience and request that they provide feedback on the design. Listening to what they have to say, and implementing a few of their ideas, often leads to a good design that delivers a clear message.

As we have talked about, there is always room for innovation and creativity. Just be sure that you test the design out on a wide audience.

Section 508 Compliance

You can read more about Section 508 here: www.section508.gov.

Per the official government website, the following is a brief description of Section 508:

"In 1998, Congress amended the Rehabilitation Act of 1973 (29 U.S.C. 794d) as amended by the Workforce Investment Act of 1998 (P.L. 105 - 220), August 7, 1998 to require Federal agencies to make their electronic and information technology (EIT) accessible to people with disabilities."

"Specifically, Section 508 of that act requires that when federal agencies develop, procure, maintain, or use EIT, Federal employees with disabilities have access to and use of information and data that is comparable to the access and use by federal employees who are not individuals with disabilities, unless an undue burden would be imposed on the agency."

What Does This Mean for Designers?

Once you have reviewed the official website, you may be overwhelmed or confused about what Section 508 means to you. In short, you will find a few basic rules to follow when building and formatting projects.

  • Use good contrast: make sure your text blocks have dark text and light backgrounds or dark backgrounds and light text.
  • When calling attention to items, do not solely rely on color alone; change the "shape" of the item by using bold fonts and other design techniques.
  • Use solid, easy-to-read fonts in heavy text areas.
  • Keep the layout simple.

These are just a few ideas; please always refer to the official site and comply with all rules posted.

Proper Structure

Implementing Structure in a Print or Web Page

Use of proper code structure tags, such as <h1> tags for titles will aid in building a good structure that will help the flow of layout. Other benefits are for SEO (Search Engine Optimization) and 508 compliance.

If you do not have Adobe Dreamweaver installed, please feel free to use your favorite text editor and browser to alter the HTML code. Dreamweaver is not required, it simply makes the edits a bit faster.

  1. Using Dreamweaver, open the web page type-hierarchy/Demos/amendments.html and switch to code view. You can switch to code view, by clicking on the Code button in the upper-left corner of the Dreamweaver window.Code Button in Dreamweaver
  2. Look on line 9 to view the content and its very long length.Lengthy Content
  3. The structure of this file would be better rendered if we added proper tags, such as <h1> and <p> tags. Images need an ALT tag to be considered 508 compliant.
  4. Select the text and, using the Properties panel, apply formatting. (If your Properties panel is not showing as in the image below, go to Window > Properties.)Selected Text and Properties Panel
  5. Repeat as needed until the structure is complete.
  6. Select the picture of the flag and alter the ALT tag to read "Historic Flag".Flag Picture and Alt Drop-Down

Applying Proper Structure

Duration: 15 to 25 minutes.

In this exercise, you will open a web page and apply proper structure tags.

  1. Using Dreamweaver (Note: depending on your version, your options may be different), open the web page type-hierarchy/Exercises/declare.html and switch to code view.
  2. Look on line 9 to view the content and its very long length. The structure of this file would be better rendered if we added proper tags, such as <h1> and <p> tags. Images need an ALT tag to be considered 508 compliant.
  3. Select the text and using the properties panel and apply formatting.
  4. Select the picture of the people and alter the ALT tag to read "Historic Meeting".

Solution:

  1. Using Dreamweaver, open the web page type-hierarchy/Exercises/declare.html and switch to code view.Web Page in Dreamweaver
  2. Look on line 9 to view the content and its very long length.Content in Code View
  3. The structure of this file would be better rendered if we added proper tags, such as <h1> and <h2> tags. Images need an ALT tag to be considered 508 compliant.
  4. Switch back to Design View.
  5. Select the text and using the properties panel and apply formatting.Heading 1 Format in Properties Panel
  6. Repeat as needed until the structure is complete.
  7. Select the picture of the people and alter the ALT tag to read "Historic Meeting".Historic Meeting Alt Tag in Properties Panel
  8. Save the file as "declareDONE.html".

Documentation Choices

Documenting Your Choices for Future Use

Once you have established a set of typefaces, their use, and other rules for layout, it is a good idea to document it. This documentation then turns into the basis for your templates and style guide, which we will cover later in this course.

Below is a sample of a documentation option.Sample Documentation

Documenting Your Choices

Duration: 15 to 25 minutes.

In this exercise, you will learn to document your choices for future use. You will create documentation for your three case studies.

  1. Open type-hierarchy/Exercises/ProjectForm.docx.
  2. Add details per each of the three case studies from earlier.
  3. Save the files as we will use them again later.

Note: There is no true right or wrong on this exercise. Have fun and be creative. We'll discuss in the presentation that follows this exercise.