Typography Lesson

Published by Cindy Buckley Koren on

Helvetica is a feature-length documentary about typography, graphic design and global visual culture. It looks at the proliferation of one typeface as part of a larger conversation about the way type affects our lives.

type_resourcesjpg_Page_089-618x800

Screen Shot 2018-01-05 at 1.16.23 PM

Butterick’s Practical Typography is a wonderful resource. If you are in a hurry it gives you what you need to know about type in ten minutes, but it also serves as an interactive text book covering the basics and specifics in clickable bits.

Good ty­pog­ra­phy is mea­sured by how well it re­in­forces the mean­ing of the text, not by some ab­stract scale of merit.

Here is a sampling of what you will find.

SUMMARY OF KEY RULES

  1. The four most im­por­tant ty­po­graphic choices you make in any doc­u­ment are point sizeline spac­ingline length, and font, be­cause those choices de­ter­mine how the body text looks.
  2. point size should be 10–12 points in printed doc­u­ments, 15-25 pix­els on the web.
  3. line spac­ing should be 120–145% of the point size.
  4. The av­er­age line length should be 45–90 char­ac­ters (in­clud­ing spaces).
  5. The eas­i­est and most vis­i­ble im­prove­ment you can make to your ty­pog­ra­phy is to use a pro­fes­sional font, like those found in font rec­om­men­da­tions.
  6. Avoid goofy fontsmono­spaced fonts, and sys­tem fonts, es­pe­cially times new ro­man and Arial.
  7. Use curly quo­ta­tion marks, not straight ones (see straight and curly quotes).
  8. Put only one space be­tween sen­tences.
  9. Don’t use mul­ti­ple word spaces or other white-space char­ac­ters in a row.
  10. Never use un­der­lin­ing, un­less it’s a hyperlink.
  11. Use cen­tered text sparingly.
  12. Use bold or italic as lit­tle as possible.
  13. all caps are fine for less than one line of text.
  14. If you don’t have real small caps, don’t use them at all.
  15. Use 5–12% ex­tra let­terspac­ing with all caps and small caps.
  16. kern­ing should al­ways be turned on.
  17. Use first-line in­dents that are one to four times the point size of the text, or use 4–10 points of space be­tween para­graphs. But don’t use both.
  18. If you use jus­ti­fied text, also turn on hy­phen­ation.
  19. Don’t con­fuse hy­phens and dashes, and don’t use mul­ti­ple hy­phens as a dash.
  20. Use am­per­sands spar­ingly, un­less in­cluded in a proper name.
  21. In a doc­u­ment longer than three pages, one ex­cla­ma­tion point is plenty (see ques­tion marks and ex­cla­ma­tion points).
  22. Use proper trade­mark and copy­right sym­bols—not al­pha­betic approximations.
  23. Put a non­break­ing space af­ter para­graph and sec­tion marks.
  24. Make el­lipses us­ing the proper char­ac­ter, not pe­ri­ods and spaces.
  25. Make sure apos­tro­phes point downward.
  26. Make sure foot and inch marks are straight, not curly.

hyphen or dash
open type lesson

Behind the Typeface: Cooper Black from Cheshire Isaacs on Vimeo.

A short introduction to early 20th Century Modernist design and the art movements they evolved from including De Stijl, Dada, Constructivism and Futurism with work by Jan Tschichold, Walter Dexel, Piet Zwart, Kurt Schwitters and more. Talk recorded in Joshua’s Typography Studio class at MCAD, Spring 2015.

Letterforms as Identity: A Brief History of Typography at The New York Times with Kelly Doe from Type@Cooper on Vimeo.

This talk took place in The Rose Auditorium at The Cooper Union on April 11, 2017 as part of the Herb Lubalin Lecture Series

From hand-set beginnings in 1851 to current print and digital variations, typography has always been a defining characteristic of The New York Times identity.
Throughout its history, The Times has been an innovative and early adopter—there has always been a need to deliver the news as effectively as the technology of the moment allows. Yet its identity also evolved via the work of editors, art directors, type designers, and artists. Their intersecting relationships had considerable impact on the design of the news, the magazines, and the marketing.
This expansive look at New York Times typographic history will include such topics as: Black letter, logotypes and Q-heads; walking on the moon, the Pentagon Papers and 9/11; new typeface and digital development — and the creative impact of Lou Silverstein, Matthew Carter and many others.

Kelly Doe is the Design Director for Brand Identity at The New York Times, where she is currently focusing on video, new digital products and the creation of company-wide brand guidelines.

Web Typography is just typography, sort of with Amy Papaelias from Type@Cooper on Vimeo.

Typographics 2017: Type is a Canvas with Natasha Jen from Type@Cooper on Vimeo.

Typographics: Entertaining Typography with Emily Oberman from Type@Cooper on Vimeo.


Typographics 2015: The Good Old Bad Old Days with Louise Fili, Steven Heller, Seymour Chwast, and Paula Scher from Type@Cooper on Vimeo.

COMMENTJANUARY 18, 2016

Dear Data. Giorgia Lupi and Stefanie Posavec

Dear Data is a year-long, analog data drawing project by Giorgia Lupi and Stefanie Posavec, two award-winning information designers living on different sides of the Atlantic. By collecting and hand drawing their personal data and sending it to each other in the form of postcards, they became friends.

ONLINE RESOURCES

Variable Fonts

30 JAN 2017

 MEDIA AND PUBLISHING

Variable fonts are coming. How will it change the web design and development process? Tim Brown and Bram Stein explain how variable fonts will work and what you can do with them now.

https://responsivewebdesign.com/podcast/variable-fonts/

Legibility

NASA’s List of Design Recommendations

  1. Sans-serif fonts are usually more legible than fonts with serifs.
  2. Avoid using a font that has characters that are too similar to one another, as this will reduce the legibility of the print.
  3. Avoid using dot matrix print for critical flight-deck documentation.
  4. Long chunks of text should be set in lower case.
  5. If upper case is required, the first letter of the word should be made larger in order to enhance the legibility of the word.
  6. When specifying font height, or accessing graphs to determine the size of a lower-case character, the distinction between “x” height and overall size should be made.
  7. As a general recommendation, the “x” height of a font used for important flight-deck documentation should not be below 0.10 inch.
  8. The recommended height-to-width ratio of a font that is viewed in front of the observer is 5:3.
  9. The vertical spacing between lines should not be smaller than 25–33% of the overall size of the font.
  10. The horizontal spacing between characters should be 25% of the overall size and not less than one stroke width.
  11. Avoid using long strings of text set in italics.
  12. Use primarily one or two typefaces for emphasis.
  13. Use black characters over a white background for most cockpit documentation.
  14. Avoid using white characters over a black background in normal line operations. However, if this is desired:
    1. Use minimum amount of text.
    2. Use relatively large typesize.
    3. Use sans-serif to minimize the loss of legibility.
  15. Black over white or yellow are recommended for cockpit documentation.
  16. Avoid using black over dark red, green, and blue.
  17. Use anti-glare plastic to laminate documents.
  18. Ensure that the quality of the print and the paper is well above normal standards. Poor quality of the print will effect legibility and readability.
  19. The designer must assess the age groups of the pilots that will be using the documentation, and take a very conservative approach in assessing information obtained from graphs and data books.

There are, of course, countless examples of bad typography. Luckily, only a few of them ever come close to contributing to accidents or confusion in times of emergency. But in those cases, even tiny tweaks to a letterform or subtle differences in typeface style become a really big deal. So keep that in mind the next time you hit caps lock.

Know of any more life-saving font examples? Email me at lena.groeger@propublica.org.

Categories: { lessons }

Cindy Buckley Koren

Cindy Buckley Koren is the founder of {meetinghouse} Creative Collaborative and Professor of Communications Design at PrattMWP College of Art and Design

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *