{lessons} Typography and Information Design 250

anatomy type-01type_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.


  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.

Typographic Sins-Santoro

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.

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.


Variable Fonts

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.


Leave a Reply

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