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.

1. TYPOGRAPHY
is like
MUSIC
Andy Birchwood

3. 1.Fidelity
2.Timbre
3.Harmony
4.Rhythm

6. Aliased

7. Anti-aliased

8. Arial 12px
Aliased Anti-aliased With hinting
With hinting &
sub-pixel rendering

12. 1996 2001 2007
No default anti-aliasing Basic Anti-aliasing in XP Sub-pixel in Vista
Sub-pixel in OSX

14. Apple iPhone 4: 326 ppi
LG KM900 Arena: 311 ppi
Samsung S8000 Jet: 301 ppi
Canon EOS 550D (T2i): 289 ppi
HTC Touch Diamond: 286 ppi
Samsung S8500 Wave: 283 ppi
HTC Desire: 252 ppi
Google Nexus One: 252 ppi
Sony Ericsson XPERIA X10: 245 ppi
Samsung I9000 Galaxy S: 233 ppi
HTC HD2: 217 ppi
Nokia N8: 210 ppi
Apple iPhone 3GS: 165 ppi
Apple iPad: 132 ppi

15. 1.Fidelity
2.Timbre
3.Rhythm
4.Harmony

16. Speaker with sound waves
Waves transition to curve
curve into aliased graph

17. Speaker with sound waves
Waves transition to curve
curve into aliased graph

24. *this original appeared in a talk by Jon
Tan

25. *this original appeared in a talk by Jon
Tan

30. Helvetica
Helvetica
Helvetica
Helvetica
Helvetica
Helvetica

32. F***ing
Comic
Sans

33. F***ing
Comic
Sans

34. F***ing
Comic
Sans

35. F***ing
Comic
Sans

36. 1.Fidelity
2.Timbre
3.Harmony
4.Rhythm

37. Music
is the silence
between the notes
Claude Debussy

44. 1.Fidelity
2.Timbre
3.Harmony
4.Rhythm

46. Soul
The Winstons
Amen Brother
1969
Hiphop Rave Jungle IDM
NWA Mantronix SHY FX Squarepusher
Straight Outta Compton King of the Beats Original Nutta Venus no. 17
1984 1990 1994 2004

47. Kerning...........................
Note Length
Tracking.........................
Tempo
Word...............................
Bar
Word Spacing................ (time signature)
Meter
Measure..........................
Measure
Leading...........................
Phrase

48. Kerning
Kerning 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
VA
some 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

49. Tracking
Tracking affects the spacing between a! the letters
HEADING HEADING
Loose tracking can aid legibility of all caps headings
body text is meant for reading body text is meant for reading
Never negatively space lower case

50. Measure
“Anything from 45 to 75 characters is widely regarded as a
satisfactory length of line for a single-column page set in a serifed
text face in a text size. The 66-character line (counting both
letters and spaces) is widely regarded as ideal. For multiple column
work, a better average is 40 to 50 characters.”

51. Wrdos
Arocdnicg to rsceearch at Cmabrigde Uinervtisy, it deosn’t mttaer
in waht oredr the ltteers in a wrod are, the olny iprmoatnt tihng is
taht the frist and lsat ltteer are in the rghit pcale. The rset can be
a toatl mses and you can sitll raed it wouthit pobelrm. Tihs is
buseace the huamn mnid deos not raed ervey lteter by istlef, but
the wrod as a wlohe.

52. Leading
Leading is the spacing between baselines.
A good average is 130% of font size
On screen, leading should be looser, at least 150%
Longer lines need more leading
Shorter lines need less

54. 1.Fidelity Play a tune that
people know, and
2.Timbre they are much more
likely to listen
3.Harmony
4.Rhythm

55. THE END