SlideShare a Scribd company logo
1 of 55
TYPOGRAPHY
   is like
  MUSIC


             Andy Birchwood
1.Fidelity
2.Timbre
3.Harmony
4.Rhythm
Aliased
Anti-aliased
Arial 12px




Aliased      Anti-aliased   With hinting




                            With hinting &
                            sub-pixel rendering
1996                       2001                        2007
No default anti-aliasing   Basic Anti-aliasing in XP   Sub-pixel in Vista
                           Sub-pixel in OSX
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
1.Fidelity
2.Timbre
3.Rhythm
4.Harmony
Speaker with sound waves
Waves transition to curve
 curve into aliased graph
Speaker with sound waves
Waves transition to curve
 curve into aliased graph
*this original appeared in a talk by Jon
                                    Tan
*this original appeared in a talk by Jon
                                    Tan
Helvetica
Helvetica
Helvetica
Helvetica
Helvetica
Helvetica
F***ing
 Comic
 Sans
F***ing
 Comic
 Sans
F***ing
 Comic
 Sans
F***ing
 Comic
 Sans
1.Fidelity
2.Timbre
3.Harmony
4.Rhythm
Music
is the silence
between the notes
          Claude Debussy
1.Fidelity
2.Timbre
3.Harmony
4.Rhythm
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
Kerning...........................
                        Note Length

Tracking.........................
                        Tempo

Word...............................
                         Bar

Word Spacing................ (time signature)
                    Meter

Measure..........................
                       Measure

Leading...........................
                        Phrase
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
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
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.”
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.
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
1.Fidelity       Play a tune that
               people know, and
2.Timbre     they are much more
                  likely to listen
3.Harmony
4.Rhythm
THE END

More Related Content

Similar to Typography Is Like Music

typography 101.pdf
typography 101.pdftypography 101.pdf
typography 101.pdfjb00007
 
God (or devil) in the details: text typography
God (or devil) in the details: text typographyGod (or devil) in the details: text typography
God (or devil) in the details: text typographyKeith Tam
 
Web Typography for Front End Developers
Web Typography for Front End DevelopersWeb Typography for Front End Developers
Web Typography for Front End DevelopersPascal Rettig
 
Fsfinalbook spread
Fsfinalbook spreadFsfinalbook spread
Fsfinalbook spreadEngage8
 
Music Theory: Grade 1
Music Theory: Grade 1Music Theory: Grade 1
Music Theory: Grade 1Suzan G
 

Similar to Typography Is Like Music (6)

typography 101.pdf
typography 101.pdftypography 101.pdf
typography 101.pdf
 
Divya kerning pairs
Divya kerning pairsDivya kerning pairs
Divya kerning pairs
 
God (or devil) in the details: text typography
God (or devil) in the details: text typographyGod (or devil) in the details: text typography
God (or devil) in the details: text typography
 
Web Typography for Front End Developers
Web Typography for Front End DevelopersWeb Typography for Front End Developers
Web Typography for Front End Developers
 
Fsfinalbook spread
Fsfinalbook spreadFsfinalbook spread
Fsfinalbook spread
 
Music Theory: Grade 1
Music Theory: Grade 1Music Theory: Grade 1
Music Theory: Grade 1
 

Recently uploaded

(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...ranjana rawat
 
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...Yantram Animation Studio Corporation
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...home
 
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️soniya singh
 
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service AmravatiVIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service AmravatiSuhani Kapoor
 
VIP College Call Girls Gorakhpur Bhavna 8250192130 Independent Escort Service...
VIP College Call Girls Gorakhpur Bhavna 8250192130 Independent Escort Service...VIP College Call Girls Gorakhpur Bhavna 8250192130 Independent Escort Service...
VIP College Call Girls Gorakhpur Bhavna 8250192130 Independent Escort Service...Suhani Kapoor
 
VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Room
VIP Kolkata Call Girl Gariahat 👉 8250192130  Available With RoomVIP Kolkata Call Girl Gariahat 👉 8250192130  Available With Room
VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Roomdivyansh0kumar0
 
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779Best VIP Call Girls Noida Sector 47 Call Me: 8448380779
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779Delhi Call girls
 
CBD Belapur Individual Call Girls In 08976425520 Panvel Only Genuine Call Girls
CBD Belapur Individual Call Girls In 08976425520 Panvel Only Genuine Call GirlsCBD Belapur Individual Call Girls In 08976425520 Panvel Only Genuine Call Girls
CBD Belapur Individual Call Girls In 08976425520 Panvel Only Genuine Call Girlsmodelanjalisharma4
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...
AMBER GRAIN EMBROIDERY | Growing folklore elements |  Root-based materials, w...AMBER GRAIN EMBROIDERY | Growing folklore elements |  Root-based materials, w...
AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...BarusRa
 
WAEC Carpentry and Joinery Past Questions
WAEC Carpentry and Joinery Past QuestionsWAEC Carpentry and Joinery Past Questions
WAEC Carpentry and Joinery Past QuestionsCharles Obaleagbon
 
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Delhi Call girls
 
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130Suhani Kapoor
 
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...Amil baba
 
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai Doux
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai DouxDubai Call Girls Pro Domain O525547819 Call Girls Dubai Doux
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai Douxkojalkojal131
 
Kurla Call Girls Pooja Nehwal📞 9892124323 ✅ Vashi Call Service Available Nea...
Kurla Call Girls Pooja Nehwal📞 9892124323 ✅  Vashi Call Service Available Nea...Kurla Call Girls Pooja Nehwal📞 9892124323 ✅  Vashi Call Service Available Nea...
Kurla Call Girls Pooja Nehwal📞 9892124323 ✅ Vashi Call Service Available Nea...Pooja Nehwal
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdftbatkhuu1
 
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...kumaririma588
 

Recently uploaded (20)

(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
 
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
 
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance VVIP 🍎 SER...
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance  VVIP 🍎 SER...Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance  VVIP 🍎 SER...
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance VVIP 🍎 SER...
 
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
 
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service AmravatiVIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
 
VIP College Call Girls Gorakhpur Bhavna 8250192130 Independent Escort Service...
VIP College Call Girls Gorakhpur Bhavna 8250192130 Independent Escort Service...VIP College Call Girls Gorakhpur Bhavna 8250192130 Independent Escort Service...
VIP College Call Girls Gorakhpur Bhavna 8250192130 Independent Escort Service...
 
VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Room
VIP Kolkata Call Girl Gariahat 👉 8250192130  Available With RoomVIP Kolkata Call Girl Gariahat 👉 8250192130  Available With Room
VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Room
 
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779Best VIP Call Girls Noida Sector 47 Call Me: 8448380779
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779
 
young call girls in Vivek Vihar🔝 9953056974 🔝 Delhi escort Service
young call girls in Vivek Vihar🔝 9953056974 🔝 Delhi escort Serviceyoung call girls in Vivek Vihar🔝 9953056974 🔝 Delhi escort Service
young call girls in Vivek Vihar🔝 9953056974 🔝 Delhi escort Service
 
CBD Belapur Individual Call Girls In 08976425520 Panvel Only Genuine Call Girls
CBD Belapur Individual Call Girls In 08976425520 Panvel Only Genuine Call GirlsCBD Belapur Individual Call Girls In 08976425520 Panvel Only Genuine Call Girls
CBD Belapur Individual Call Girls In 08976425520 Panvel Only Genuine Call Girls
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...
AMBER GRAIN EMBROIDERY | Growing folklore elements |  Root-based materials, w...AMBER GRAIN EMBROIDERY | Growing folklore elements |  Root-based materials, w...
AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...
 
WAEC Carpentry and Joinery Past Questions
WAEC Carpentry and Joinery Past QuestionsWAEC Carpentry and Joinery Past Questions
WAEC Carpentry and Joinery Past Questions
 
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
 
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
 
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...
 
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai Doux
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai DouxDubai Call Girls Pro Domain O525547819 Call Girls Dubai Doux
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai Doux
 
Kurla Call Girls Pooja Nehwal📞 9892124323 ✅ Vashi Call Service Available Nea...
Kurla Call Girls Pooja Nehwal📞 9892124323 ✅  Vashi Call Service Available Nea...Kurla Call Girls Pooja Nehwal📞 9892124323 ✅  Vashi Call Service Available Nea...
Kurla Call Girls Pooja Nehwal📞 9892124323 ✅ Vashi Call Service Available Nea...
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
 
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
 

Typography Is Like Music

  • 1. TYPOGRAPHY is like MUSIC Andy Birchwood
  • 2.
  • 4.
  • 5.
  • 8. Arial 12px Aliased Anti-aliased With hinting With hinting & sub-pixel rendering
  • 9.
  • 10.
  • 11.
  • 12. 1996 2001 2007 No default anti-aliasing Basic Anti-aliasing in XP Sub-pixel in Vista Sub-pixel in OSX
  • 13.
  • 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
  • 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
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24. *this original appeared in a talk by Jon Tan
  • 25. *this original appeared in a talk by Jon Tan
  • 26.
  • 27.
  • 28.
  • 29.
  • 31.
  • 37. Music is the silence between the notes Claude Debussy
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 45.
  • 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
  • 53.
  • 54. 1.Fidelity Play a tune that people know, and 2.Timbre they are much more likely to listen 3.Harmony 4.Rhythm