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

1. TYPOGRAPHY
101

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

3. “Good typography goes unnoticed.”

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. Tip 1
Use an appropriate font

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. Choosing between a serif and sans-serif font

8. Times Roman
Arial
Serif
Sans-Serif

9. Tip 2
Adjust your Leading

10. Leading
Space between lines of copy

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. 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. Tip 3
Measure

14. Measure
The amount of words or characters per line

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. 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. 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. Tip 4
Hang Punctuation

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

20. Punctuation not hanging
Hanging punctuation

21. Tip 5
Kill all Widows and Orphans
(Not the people)

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. Tip 6
Justification

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. 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. Tip 7
Use optical margin alignment

27. Technically aligned
Optically aligned
L L
N N

29. Tip 8
Avoid using caps in long copy

30. Legibility
(How easy it is to distinguish one letter from another)
Hello
HELLO

31. Coastline
(the readable shape of a word)
Hello
HELLO

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

33. Tip 9
Use correct hyphenation & punctuation

34. Quotation marks
"Hello"
“Hello”

35. Dashes
Figure Dash
En Dash
Em Dash
-
–
—
Phone number
Date range
Reference quote
123-456-789
1888–1889
—John Baskerville

36. Tip 10
Check the Kerning

37. Kerning
the space between characters

38. Bad kerning example
Good kerning example
ABOUT
ABOUT
To mater your kerning, check out:
type.method.ac

39. FIN
Author:
Stephen Brabazon