Your SlideShare is downloading. ×
Typography Is Like Music
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Typography Is Like Music


Published on

Explaining one thing in terms of another is characteristic of human expression …

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. TYPOGRAPHY is like MUSIC Andy Birchwood
  • 2. 1.Fidelity2.Timbre3.Harmony4.Rhythm
  • 3. Aliased
  • 4. Anti-aliased
  • 5. Arial 12pxAliased Anti-aliased With hinting With hinting & sub-pixel rendering
  • 6. 1996 2001 2007No default anti-aliasing Basic Anti-aliasing in XP Sub-pixel in Vista Sub-pixel in OSX
  • 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. 1.Fidelity2.Timbre3.Rhythm4.Harmony
  • 9. Speaker with sound wavesWaves transition to curve curve into aliased graph
  • 10. Speaker with sound wavesWaves transition to curve curve into aliased graph
  • 11. *this original appeared in a talk by Jon Tan
  • 12. *this original appeared in a talk by Jon Tan
  • 13. HelveticaHelveticaHelveticaHelveticaHelveticaHelvetica
  • 14. F***ing Comic Sans
  • 15. F***ing Comic Sans
  • 16. F***ing Comic Sans
  • 17. F***ing Comic Sans
  • 18. 1.Fidelity2.Timbre3.Harmony4.Rhythm
  • 19. Musicis the silencebetween the notes Claude Debussy
  • 20. 1.Fidelity2.Timbre3.Harmony4.Rhythm
  • 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. Kerning........................... Note LengthTracking......................... TempoWord............................... BarWord Spacing................ (time signature) MeterMeasure.......................... MeasureLeading........................... Phrase
  • 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. 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. 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. 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. 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. 1.Fidelity Play a tune that people know, and2.Timbre they are much more likely to listen3.Harmony4.Rhythm
  • 29. THE END