Typography Is Like Music


Published on

Explaining one thing in terms of another is characteristic of human expression
It’s closely linked to the way language evolves
Like the web-related metaphors of “page” “mouse” “shopping cart”
we borrow terms from one field to explain something unfamiliar. In this slideshow I explain key concepts in typography using music theory.

Published in: Design, Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Typography Is Like Music

  1. 1. TYPOGRAPHY is like MUSIC Andy Birchwood
  2. 2. 1.Fidelity2.Timbre3.Harmony4.Rhythm
  3. 3. Aliased
  4. 4. Anti-aliased
  5. 5. Arial 12pxAliased Anti-aliased With hinting With hinting & sub-pixel rendering
  6. 6. 1996 2001 2007No default anti-aliasing Basic Anti-aliasing in XP Sub-pixel in Vista Sub-pixel in OSX
  7. 7. Apple iPhone 4: 326 ppiLG KM900 Arena: 311 ppiSamsung S8000 Jet: 301 ppiCanon EOS 550D (T2i): 289 ppiHTC Touch Diamond: 286 ppiSamsung S8500 Wave: 283 ppiHTC Desire: 252 ppiGoogle Nexus One: 252 ppiSony Ericsson XPERIA X10: 245 ppiSamsung I9000 Galaxy S: 233 ppiHTC HD2: 217 ppiNokia N8: 210 ppiApple iPhone 3GS: 165 ppiApple iPad: 132 ppi
  8. 8. 1.Fidelity2.Timbre3.Rhythm4.Harmony
  9. 9. Speaker with sound wavesWaves transition to curve curve into aliased graph
  10. 10. Speaker with sound wavesWaves transition to curve curve into aliased graph
  11. 11. *this original appeared in a talk by Jon Tan
  12. 12. *this original appeared in a talk by Jon Tan
  13. 13. HelveticaHelveticaHelveticaHelveticaHelveticaHelvetica
  14. 14. F***ing Comic Sans
  15. 15. F***ing Comic Sans
  16. 16. F***ing Comic Sans
  17. 17. F***ing Comic Sans
  18. 18. 1.Fidelity2.Timbre3.Harmony4.Rhythm
  19. 19. Musicis the silencebetween the notes Claude Debussy
  20. 20. 1.Fidelity2.Timbre3.Harmony4.Rhythm
  21. 21. Soul The Winstons Amen Brother 1969 Hiphop Rave Jungle IDM NWA Mantronix SHY FX SquarepusherStraight Outta Compton King of the Beats Original Nutta Venus no. 17 1984 1990 1994 2004
  22. 22. Kerning........................... Note LengthTracking......................... TempoWord............................... BarWord Spacing................ (time signature) MeterMeasure.......................... MeasureLeading........................... Phrase
  23. 23. KerningKerning is not the space between every letter.It’s a subtle variation in the spacing between letter pairs il adjacent square shaped ol rounded letters are kerned oo adacent rounded letters are letters are loosely kerned closer to square ones kerned closest together VAsome kerning pairs overlap Yi In a good font, like 2011is a bitch to kern because of their shape helvetica, thousands of kerning pairs are specified
  24. 24. TrackingTracking affects the spacing between a! the lettersHEADING HEADINGLoose tracking can aid legibility of all caps headingsbody text is meant for reading body text is meant for readingNever negatively space lower case
  25. 25. Measure“Anything from 45 to 75 characters is widely regarded as asatisfactory length of line for a single-column page set in a serifedtext face in a text size. The 66-character line (counting bothletters and spaces) is widely regarded as ideal. For multiple columnwork, a better average is 40 to 50 characters.”
  26. 26. WrdosArocdnicg to rsceearch at Cmabrigde Uinervtisy, it deosn’t mttaerin waht oredr the ltteers in a wrod are, the olny iprmoatnt tihng istaht the frist and lsat ltteer are in the rghit pcale. The rset can bea toatl mses and you can sitll raed it wouthit pobelrm. Tihs isbuseace the huamn mnid deos not raed ervey lteter by istlef, butthe wrod as a wlohe.
  27. 27. LeadingLeading is the spacing between baselines.A good average is 130% of font sizeOn screen, leading should be looser, at least 150%Longer lines need more leadingShorter lines need less
  28. 28. 1.Fidelity Play a tune that people know, and2.Timbre they are much more likely to listen3.Harmony4.Rhythm
  29. 29. THE END