Typography is the art and technique of arranging type in order to make language visible.

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 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.

Choosing between a serif and sans-serif font

Times Roman Serif Arial 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 N L 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 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. 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 - Phone number 123-456-789 En Dash Date range 1888 1889 Em Dash Reference quote 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