Typography 101 nr (1)

905 views

Published on

Our exploration of font and the rules to be used when bringing your work to life.

Published in: Design, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
905
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
30
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Typography 101 nr (1)

  1. 1. TYPOGRAPHY 101
  2. 2. Typography is the art and technique of arranging type in order to make language visible.
  3. 3. “Good typography goes unnoticed.”
  4. 4. Readability How easy it is to read words, phrases and blocks of text Legibility How easy it is to distinguish one letter from another
  5. 5. Tip 1 Use an appropriate font
  6. 6. Good Example Bad Example Readability and legibility are two elements that every designer needs to think about when making their type choices. Readability is how easy it is to read words, phrases, blocks of copy such as a book, a web page or an article. Legibility is a measure of how easy it is to distinguish one letter from another in a particular typeface. In this post we’ll focus on readability and next week, in part 2 we’ll look at legibility. As more fonts become available for use on the web, it’s important that you choose one that doesn’t wear your readers out. Readability and legibility are two elements that ever designer needs to y think about when making their type choices. Readability is how easy it is to read words, phrases, blocks of copy such as a book, a web page or an article. Legibility is a measure of how easy it is to distinguish one letter from another in a particular typeface. In this post we’ll focus on readability and next week, in part 2 we’ll look at legibility. As more fonts become a ailable for use on the web, it’s v important that you choose one that doesn’t wear your readers out.
  7. 7. Choosing between a serif and sans-serif font
  8. 8. Times Roman Arial Serif Sans-Serif
  9. 9. Tip 2 Adjust your Leading
  10. 10. Leading Space between lines of copy
  11. 11. Too much leading Readability and legibility are two elements that every designer needs to think about when making their type choices. Readability is how easy it is to read words, phrases, blocks of copy such as a book, a web page or an article. Legibility is a measure of how easy it is to distinguish one letter from another in a particular typeface. In this post we’ll focus on readability and next week, in part 2 we’ll look at legibility. As more fonts become available for use on the web, it’s important that you choose one that doesn’t wear your readers out. Not enough leading Readability and legibility are two elements that every designer needs to think about when making their type choices. Readability is how easy it is to read words, phrases, blocks of copy such as a book, a web page or an article. Legibility is a measure of how easy it is to distinguish one letter from another in a particular typeface. In this post we’ll focus on readability and next week, in part 2 we’ll look at legibility. As more fonts become available for use on the web, it’s important that you choose one that doesn’t wear your readers out.
  12. 12. Ideal leading should be 1.3–1.4 times the point size. Readability and legibility are two elements that every designer needs to think about when making their type choices. Readability is how easy it is to read words, phrases, blocks of copy such as a book, a web page or an article. Legibility is a measure of how easy it is to distinguish one letter from another in a particular typeface. In this post we’ll focus on readability and next week, in part 2 we’ll look at legibility. As more fonts become available for use on the web, it’s important that you choose one that doesn’t wear your readers out.
  13. 13. Tip 3 Measure
  14. 14. Measure The amount of words or characters per line
  15. 15. Too many words/characters per line Readability and legibility are two elements that every designer needs to think about when making their type choices. Readability is how easy it is to read words, phrases, blocks of copy such as a book, a web page or an article. Legibility is a measure of how easy it is to distinguish one letter from another in a particular typeface. In this post we’ll focus on readability and next week, in part 2 we’ll look at legibility. As more fonts become available for use on the web, it’s important that you choose one that doesn’t wear your readers out.
  16. 16. Too few words/characters per line Readability and legibility are two elements that every designer needs to think about when making their type choices. Readability is how easy it is to read words, phrases, blocks of copy such as a book, a web page or an article. Legibility is a measure of how easy it is to distinguish one letter from another in a particular typeface. In this post we’ll focus on readability and next week, in part 2 we’ll look at legibility. As more fonts become available for use on the web, it’s important that you choose one that doesn’t wear your readers out.
  17. 17. The ideal measure should be 10–12 words per line Readability and legibility are two elements that every designer needs to think about when making their type choices. Readability is how easy it is to read words, phrases, blocks of copy such as a book, a web page or an article. Legibility is a measure of how easy it is to distinguish one letter from another in a particular typeface. In this post we’ll focus on readability and next week, in part 2 we’ll look at legibility. As more fonts become available for use on the web, it’s important that you choose one that doesn’t wear your readers out.
  18. 18. Tip 4 Hang Punctuation
  19. 19. Hang Punctuation Typesetting punctuation marks so they do not disrupt the 'flow' of a body of text.
  20. 20. Punctuation not hanging Hanging punctuation
  21. 21. Tip 5 Kill all Widows and Orphans (Not the people)
  22. 22. Widow Orphan Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id laborum. loborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id.
  23. 23. Tip 6 Justification
  24. 24. Left Aligned Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id. No hyphenation Hyphenation
  25. 25. Justified (left) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id. Hyphenation No Hyphenation
  26. 26. Tip 7 Use optical margin alignment
  27. 27. Technically aligned Optically aligned L L N N
  28. 28. Tip 8 Avoid using caps in long copy
  29. 29. Legibility (How easy it is to distinguish one letter from another) Hello HELLO
  30. 30. Coastline (the readable shape of a word) Hello HELLO
  31. 31. Easy to read Readability and legibility are two elements that every designer needs to think about when making their type choices. Readability is how easy it is to read words, phrases, blocks of copy such as a book, a web page or an article. Legibility is a measure of how easy it is to distinguish one letter from another in a particular typeface. In this post we’ll focus on readability and next week, in part 2 we’ll look at legibility. As more fonts become available for use on the web, it’s important that you choose one that doesn’t wear your readers out. Hard to read READABILITY AND LEGIBILITY ARE TWO ELEMENTS THAT EVERY DESIGNER NEEDS TO THINK ABOUT WHEN MAKING THEIR TYPE CHOICES. READABILITY IS HOW EASY IT IS TO READ WORDS, PHRASES, BLOCKS OF COPY SUCH AS A BOOK, A WEB PAGE OR AN ARTICLE. LEGIBILITY IS A MEASURE OF HOW EASY IT IS TO DISTINGUISH ONE LETTER FROM ANOTHER IN A PARTICULAR TYPEFACE. IN THIS POST WE’LL FOCUS ON READABILITY AND NEXT WEEK, IN PART 2 WE’LL LOOK AT LEGIBILITY. AS MORE FONTS BECOME AVAILABLE FOR USE ON THE WEB, IT’S IMPORTANT THAT YOU CHOOSE ONE THAT DOESN’T WEAR YOUR READERS OUT.
  32. 32. Tip 9 Use correct hyphenation & punctuation
  33. 33. Quotation marks "Hello" “Hello”
  34. 34. Dashes Figure Dash En Dash Em Dash - – — Phone number Date range Reference quote 123-456-789 1888–1889 —John Baskerville
  35. 35. Tip 10 Check the Kerning
  36. 36. Kerning the space between characters
  37. 37. Bad kerning example Good kerning example ABOUT ABOUT To mater your kerning, check out: type.method.ac
  38. 38. FIN Author: Stephen Brabazon

×