Graphic Design
Typography
"In a badly designed book, the letters mill and stand like starving horses in a field. In a book designed by rote, they sit like stale bread and mutton on the page. In a well-made book, where designer, compositor and printer have all done their jobs, no matter how many thousands of lines and pages, the letters are alive. They dance in their seats. Sometimes they rise and dance in the margins and aisles." -- Robert Bringhurst, Elements of Typographic Style
Typography makes a difference. Typography directly affects readability. Typography strongly influences the user's perception of our brand identity. Typography also influences the user's perception of our professionalism. (Imagine how you would react to a resume written entirely in "Comic Sans"). To earn this badge, you will immerse yourself in the world of typography
BADGE DELIVERABLES
- Access Lynda.Com, and watch Ina Saltz's tutorial "Foundations of Typography." The tutorial covers "principles of legibility, readability, and compatibility, and how they should be considered when you're selecting and designing with type." You can skip chapter 4 (type design) and chapter 8 (specialized uses of typography), but you should watch the rest of the material.
- After working through the Saltz tutorial, please review all of the readings linked in the "useful resources" section of this page.
- Surf the web and locate a terrible example of web typography, and use what you have learned to fix the poor web type choices. (Note: Don't just select the first example of bad typography that you find. Hunt around for a really, really bad example.) First, take a screen shot of the example of bad web typography. This will be the "before" version of the image. Next, mock up an improved version of the page in Photoshop (or a comparable application such as Skitch or Figment). This will be your "after" image.
- Locate a poor example of print typography, and use what you have learned to fix the poor typography choices. First, take a photo of the example of bad print typography. This will be your "before" image. Then, you should mock up an improved version of the page in Photoshop (or a comparable application such as Sketch or Figment). This will be your "after" image.
- Write post a short (approximately 600 word) analytical blog posting that explains how you used typography design principles to improve these pages. Be sure to include relevant screen shots, and make specific references to principles that emerged in the tutorial and in the other linked articles. All badge write-ups should be posted to your personal blog.
- Remember that your blog posting should be written in a professional tone, as if you were explaining typography to a colleague or client. Avoid first-person. When finished, send a message titled "Pending: Typography" to adelwich@trinity.edu and include a hyperlink to your blog posting.
USEFUL RESOURCES
- C. Knight & J. Glaser (2013) "Creating exciting and unusual visual hierarchies," Smashing Magazine, February 26.
- Yves Peters (2016) "Better web typography in a few simple steps," Creative Bloq, August 11.
- Jeremiah Shoaf (2014) "The good, the bad and the great examples of web typography," Smashing Magazine, December 22.
- Webdesigner Depot Staff (2009) "10 web typography rules every designer should know," Web Designer Depot, February 9.