Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Typography 101

249 views

Published on

Chalk talk on typography basics

Published in: Design
  • Be the first to comment

  • Be the first to like this

Typography 101

  1. 1. Typography 101
  2. 2. Typography is a design’s voice. - Jason Santa Maria On Web Typography
  3. 3. Text makes up 95% of all websites
  4. 4. Text makes up 95% of all websites FACT
  5. 5. Type is the essence of a website. And websites are the essence of the internet.
  6. 6. Typography is for the benefit of the reader, not the writer. - Matthew Butterick Practical Typography
  7. 7. - Ellen Lupton, Thinking with Type
  8. 8. - Ellen Lupton, Thinking with Type
  9. 9. Don't Be a Menace to South Central Don't Be a Menace to South Central Don't Be a Menace to South Central Don't Be a Menace to South Central Adobe Caslon Pro 60pt Times New Roman 60pt Garamond 60pt Bernhard Modern Pro 60pt
  10. 10. Don't Be a Menace to South Central Don't Be a Menace to South Central Don't Be a Menace to South Central Don't Be a Menace to South Central Adobe Caslon Pro 60pt Times New Roman 60pt Garamond 60pt Bernhard Modern Pro 60pt Don't Be a Menace to South CentralArial 60pt Don't Be a Menace to South CentrLucida Sans 60pt
  11. 11. Perpetua 90ptTimes New Roman 90pt Adobe Garamond Pro 90pt Bernhard Modern Pro 90pt Red Orange Yellow Cheetos
  12. 12. Perpetua 90ptTimes New Roman 90pt Adobe Garamond Pro 90pt Bernhard Modern Pro 90pt Red Orange Yellow Cheetos
  13. 13. Perpetua 90ptTimes New Roman 90pt Adobe Garamond Pro 90pt Bernhard Modern Pro 90pt Red Orange Yellow Cheetos
  14. 14. o o o Georgia 230ptHelvetica 230pt Bodoni 230pt < Low ———————————————————————— High >
  15. 15. http://nedbatchelder.com
  16. 16. Hey, I just met you, And this is crazy, But here's my number, So call me, maybe! Hoefler Text 45pt / Leading 40pt / line-height: 0.88em Hey, I just met you, And this is crazy, But here's my number, So call me, maybe! Hoefler Text 45pt / Leading 95pt / line-height: 2em
  17. 17. Hey, I just met you, And this is crazy, But here's my number, So call me, maybe! Hoefler Text 45pt / Leading 65pt / line-height: 1.4em Hey, I just met you, And this is crazy, But here's my number, So call me, maybe! Hoefler Text 45pt / Leading 75pt / line-height: 1.6em
  18. 18. Chicken fried tofu Chicken fried chicken C h i c k e n f r i e d w a f f l e s Chicken fried steak Bell MT 60pt — 5% tracking — letter-spacing: 1px; Bell MT 60pt — 0 tracking — letter-spacing: 0; Bell MT 60pt — 10% tracking — letter-spacing: 2px; Bell MT 60pt — 20% tracking — letter-spacing: 3px; ChickenfriedbaconBell MT 60pt — -5% tracking — letter-spacing: -1px
  19. 19. Chicken fried tofu Chicken fried chicken C h i c k e n f r i e d w a f f l e s Chicken fried steak Chickenfriedbacon Bell MT 60pt — 5% tracking — letter-spacing: 1px; Bell MT 60pt — 0 tracking — letter-spacing: 0; Bell MT 60pt — 10% tracking — letter-spacing: 2px; Bell MT 60pt — 20% tracking — letter-spacing: 3px; Bell MT 60pt — -5% tracking — letter-spacing: -1px;
  20. 20. http://xkcd.com/1015/
  21. 21. http://typekit.com
  22. 22. - Ellen Lupton, Thinking with Type
  23. 23. - Jason Santa Maria On Web Typography
  24. 24. - Jason Santa Maria On Web Typography
  25. 25. - Jason Santa Maria On Web Typography
  26. 26. - Jason Santa Maria On Web Typography
  27. 27. Martin came up to the stag, gently reached out and touched his neck. The great head swung up, and the stag nuzzled Martin's arm. Softly Martin said, “If you walk out slowly, without speaking, he might let you approach.” MARTIN CAME UP TO THE STAG, GENTLY REACHED OUT AND TOUCHED HIS NECK. THE GREAT HEAD SWUNG UP, AND THE STAG NUZZLED MARTIN'S ARM. SOFTLY MARTIN SAID, “IF YOU WALK OUT SLOWLY, WITHOUT SPEAKING, HE MIGHT LET YOU APPROACH.” Bookman Old Style 24pt — Leading 36pt — line-height: 1.5em;
  28. 28. Martin came up to the stag, gently reached out and touched his neck. The great head swung up, and the stag nuzzled Martin's arm. Softly Martin said, “If you walk out slowly, without speaking, he might let you approach.” MARTIN CAME UP TO THE STAG, GENTLY REACHED OUT AND TOUCHED HIS NECK. THE GREAT HEAD SWUNG UP, AND THE STAG NUZZLED MARTIN'S ARM. SOFTLY MARTIN SAID, “IF YOU WALK OUT SLOWLY, WITHOUT SPEAKING, HE MIGHT LET YOU APPROACH.” Bookman Old Style 24pt — Leading 36pt — line-height: 1.5em; X
  29. 29. “Into his mouth went the lizard, and before I could accuse, out it came again, squirming and alive and ready to bite once again. He handed it back to his younger brother, who smote it mightily with the rock, starting or ending the whole process again.” “Into his mouth went the lizard, and before I could accuse, out it came again, squirming and alive and ready to bite once again. He handed it back to his younger brother, who smote it mightily with the rock, starting or ending the whole process again.” Georgia 28pt — Leading 42pt — line-height: 1.5em; Bodoni 28pt — Leading 42pt — line-height: 1.5em;
  30. 30. “Into his mouth went the lizard, and before I could accuse, out it came again, squirming and alive and ready to bite once again. He handed it back to his younger brother, who smote it mightily with the rock, starting or ending the whole process again.” “Into his mouth went the lizard, and before I could accuse, out it came again, squirming and alive and ready to bite once again. He handed it back to his younger brother, who smote it mightily with the rock, starting or ending the whole process again.” Georgia 28pt — Leading 42pt — line-height: 1.5em; XBodoni 28pt — Leading 42pt — line-height: 1.5em;
  31. 31. “Don’t let anyone tell you that the Prince of Peace never struck anyone. In those early days, before he had become who he would be, Joshua smote me in the nose more than once.That was the first time.” “Don’t let anyone tell you that the Prince of Peace never struck anyone. In those early days, before he had become who he would be, Joshua smote me in the nose more than once. That was the first time.” Bookman Old Style 28pt — Leading 42pt — line-height: 1.5em; Perpetua 28pt — Leading 42pt — line-height: 1.5em;
  32. 32. “Don’t let anyone tell you that the Prince of Peace never struck anyone. In those early days, before he had become who he would be, Joshua smote me in the nose more than once.That was the first time.” “Don’t let anyone tell you that the Prince of Peace never struck anyone. In those early days, before he had become who he would be, Joshua smote me in the nose more than once. That was the first time.” Bookman Old Style 28pt — Leading 42pt — line-height: 1.5em; XPerpetua 28pt — Leading 42pt — line-height: 1.5em;
  33. 33. And then there's The Enforcers—but they cost a lot and don't take well to supervision. It is rumored that, under their uniforms, they wear T-shirts bearing the unofficial Enforcer coat of arms: a fist holding a nightstick, emblazoned with the words SUE ME. Times 25pt — Leading 37.5pt — line-height: 1.5em; And then there's The Enforcers—but they cost a lot and don't take well to supervision. It is rumored that, under their uniforms, they wear T-shirts bearing the unofficial Enforcer coat of arms: a fist holding a nightstick, emblazoned with the words SUE ME. Times 12pt — Leading 18pt — line-height: 1.5em;
  34. 34. And then there's The Enforcers—but they cost a lot and don't take well to supervision. It is rumored that, under their uniforms, they wear T-shirts bearing the unofficial Enforcer coat of arms: a fist holding a nightstick, emblazoned with the words SUE ME. Times 25pt — Leading 37.5pt — line-height: 1.5em; XAnd then there's The Enforcers—but they cost a lot and don't take well to supervision. It is rumored that, under their uniforms, they wear T-shirts bearing the unofficial Enforcer coat of arms: a fist holding a nightstick, emblazoned with the words SUE ME. Times 12pt — Leading 18pt — line-height: 1.5em;
  35. 35. Four things are on the cargo pallet: a bottle of expensive beer from the Puget Sound area, which Hiro cannot really afford; a long sword known in Nippon as a katana and a short sword known as a wakizashi—Hiro's father looted these from Japan after World War II went atomic—and a computer. Four things are on the cargo pallet: a bottle of expensive beer from the Puget Sound area, which Hiro cannot really afford; a long sword known in Nippon as a katana and a short sword known as a wakizashi —Hiro's father looted these from Japan after World War II went atomic—and a computer. Athletas 22pt — Leading 33pt — line-height: 1.5em
  36. 36. Four things are on the cargo pallet: a bottle of expensive beer from the Puget Sound area, which Hiro cannot really afford; a long sword known in Nippon as a katana and a short sword known as a wakizashi—Hiro's father looted these from Japan after World War II went atomic—and a computer. Four things are on the cargo pallet: a bottle of expensive beer from the Puget Sound area, which Hiro cannot really afford; a long sword known in Nippon as a katana and a short sword known as a wakizashi —Hiro's father looted these from Japan after World War II went atomic—and a computer. Athletas 22pt — Leading 33pt — line-height: 1.5em X
  37. 37. • http://practicaltypography.com • http://ilovetypography.com • http://www.thinkingwithtype.com/ • http://youtu.be/Ki6rcXvUWP0 • http://fontsinuse.com/ Resources

×