Typography 101 nr (1)
 

Typography 101 nr (1)

on

  • 248 views

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

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

Statistics

Views

Total Views
248
Views on SlideShare
248
Embed Views
0

Actions

Likes
1
Downloads
11
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Typography 101 nr (1) Typography 101 nr (1) Presentation Transcript

  • TYPOGRAPHY 101
  • Typography is the art and technique of arranging type in order to make language visible.
  • “Good typography goes unnoticed.”
  • Readability How easy it is to read words, phrases and blocks of text Legibility How easy it is to distinguish one letter from another
  • Tip 1 Use an appropriate font
  • 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.
  • Choosing between a serif and sans-serif font
  • Times Roman Arial Serif Sans-Serif
  • Tip 2 Adjust your Leading
  • Leading Space between lines of copy
  • 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.
  • 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.
  • Tip 3 Measure
  • Measure The amount of words or characters per line
  • 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.
  • 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.
  • 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.
  • Tip 4 Hang Punctuation
  • Hang Punctuation Typesetting punctuation marks so they do not disrupt the 'flow' of a body of text.
  • Punctuation not hanging Hanging punctuation
  • Tip 5 Kill all Widows and Orphans (Not the people)
  • 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.
  • Tip 6 Justification
  • 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
  • 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
  • Tip 7 Use optical margin alignment
  • Technically aligned Optically aligned L L N N
  • Tip 8 Avoid using caps in long copy
  • Legibility (How easy it is to distinguish one letter from another) Hello HELLO
  • Coastline (the readable shape of a word) Hello HELLO
  • 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.
  • Tip 9 Use correct hyphenation & punctuation
  • Quotation marks "Hello" “Hello”
  • Dashes Figure Dash En Dash Em Dash - – — Phone number Date range Reference quote 123-456-789 1888–1889 —John Baskerville
  • Tip 10 Check the Kerning
  • Kerning the space between characters
  • Bad kerning example Good kerning example ABOUT ABOUT To mater your kerning, check out: type.method.ac
  • FIN Author: Stephen Brabazon