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.
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.
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."
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.
These are just a few ideas; please always refer to the official site and comply with all rules posted.
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.
In this exercise, you will open a web page and apply proper structure tags.
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.
In this exercise, you will learn to document your choices for future use. You will create documentation for your three case studies.
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.