TYPOGRAPHY

101

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

“Good typography goes unnoticed.”

ReadabilityHow easy it is to read words, phrases and blocks of text

LegibilityHow easy it is to distinguish one letter from another

Use an appropriate fontTip 1

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.

Good Example Bad Example

Choosing between a serif and sans-serif font

Arial

Sans-SerifTimes Roman

Serif

Adjust your LeadingTip 2

LeadingSpace between lines of copy

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 read-ability 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 read-

ability 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 much leading

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.

MeasureTip 3

MeasureThe amount of words or 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 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

Hang PunctuationTip 4

Hang PunctuationTypesetting punctuation marks so they do not disrupt the 'flow' of a body of text.

Punctuation not hanging Hanging punctuation

Kill all Widows and OrphansTip 5

(Not the people)

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.

Widow Orphan

JustificationTip 6

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 ali-qua. Ut enim ad minim veniam, quis nos-trud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in vo-luptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id.

Left Aligned

No hyphenation Hyphenation

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna ali-qua. Ut enim ad minim veniam, quis nos-trud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in volup-tate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupida-tat 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.

Justified (left)

Hyphenation No Hyphenation

Use optical margin alignmentTip 7

L LN N

Technically aligned Optically aligned

Avoid using caps in long copyTip 8

Hello HELLO

Legibility(How easy it is to distinguish one letter from another)

Hello HELLO

Coastline(the readable shape of a word)

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.

Easy to read Hard to read

Use correct hyphenation & punctuationTip 9

“Hello”"Hello"

Quotation marks

Figure Dash-

En Dash–

Em Dash—

Dashes

Phone number123-456-789

Date range1888–1889

Reference quote —John Baskerville

Check the KerningTip 10

Kerningthe space between characters

ABOUT ABOUT

type.method.ac

Bad kerning example Good kerning example

To mater your kerning, check out:

FIN

Author:Stephen Brabazon