+ All Categories
Home > Documents > 101 - New Republique · Typography is the art and technique of arranging type in order to make...

101 - New Republique · Typography is the art and technique of arranging type in order to make...

Date post: 02-Aug-2020
Category:
Upload: others
View: 4 times
Download: 0 times
Share this document with a friend
39
TYPOGRAPHY 101
Transcript
Page 1: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

TYPOGRAPHY

101

Page 2: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

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

Page 3: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

“Good typography goes unnoticed.”

Page 4: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

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

LegibilityHow easy it is to distinguish one letter from another

Page 5: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

Use an appropriate fontTip 1

Page 6: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

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

Page 7: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

Choosing between a serif and sans-serif font

Page 8: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

Arial

Sans-SerifTimes Roman

Serif

Page 9: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

Adjust your LeadingTip 2

Page 10: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

LeadingSpace between lines of copy

Page 11: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

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

Page 12: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

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.

Page 13: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

MeasureTip 3

Page 14: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

MeasureThe amount of words or characters per line

Page 15: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

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

Page 16: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

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

Page 17: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

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

Page 18: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

Hang PunctuationTip 4

Page 19: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

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

Page 20: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

Punctuation not hanging Hanging punctuation

Page 21: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

Kill all Widows and OrphansTip 5

(Not the people)

Page 22: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

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

Page 23: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

JustificationTip 6

Page 24: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

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

Page 25: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

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

Page 26: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

Use optical margin alignmentTip 7

Page 27: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

L LN N

Technically aligned Optically aligned

Page 28: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.
Page 29: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

Avoid using caps in long copyTip 8

Page 30: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

Hello HELLO

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

Page 31: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

Hello HELLO

Coastline(the readable shape of a word)

Page 32: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

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

Page 33: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

Use correct hyphenation & punctuationTip 9

Page 34: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

“Hello”"Hello"

Quotation marks

Page 35: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

Figure Dash-

En Dash–

Em Dash—

Dashes

Phone number123-456-789

Date range1888–1889

Reference quote —John Baskerville

Page 36: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

Check the KerningTip 10

Page 37: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

Kerningthe space between characters

Page 38: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

ABOUT ABOUT

type.method.ac

Bad kerning example Good kerning example

To mater your kerning, check out:

Page 39: 101 - New Republique · Typography is the art and technique of arranging type in order to make language visible.

FIN

Author:Stephen Brabazon


Recommended