Presentation on the basics of typography at SORT, a Salt Lake City Tech Conferenece

1. Initiate Typography
Selection, Arrangement & formatting
Tony Naccarato
SORT 2011

2. @tonynaccarato
#typesort

3. ini•ti•ate
1. to cause or facilitate the beginning of :
set going
2. to instruct in the rudiments or principles
of something : Introduce
Merriam-Webster Dictionary

4. Why Typography
Matters

7. “
Good type on the web might
not be our primary focus when
creating a website but
typography is unavoidable.

8. “
95% of the information on the
web is written language.
Oliver Reichenstein, Web Design is 95% Typography

9. What is typography?
Typography entails the selection, arrangement
and formatting of type.

10. “
Typography exists to honor
the content.
Robert Bringhurst, The Elements of Typographic Style

11. “
Paths that each of us is free
to follow or not…if only we
know the paths are there and
have a sense of where they
lead.
Robert Bringhurst, The Elements of Typographic Style

12. What you need to know
Typography

13. Typography isn’t about picking the coolest font

14. Dysfunction
Typothermia
The refusal to make a lifelong commitment to a single typeface—or even to
five or six, as some doctors recommend. The typothermiac is constantly
tempted to test drive "hot" new fonts, often without a proper license

15. “
Typography has one plain duty
before it and that is to convey
information in writing. No
arguments or considerations
can absolve typography from
this duty.
Emil Ruder, Typography: A Manuel of Design

16. Legibility & Readability

17. Legibility
Readability

18. Legibility
Can I understand and recognize the characters?
Readability

19. Legibility
Can I understand and recognize the characters?
Readability
Can I read this comfortably for a long time?

21. In traditional typography, text is composed to
create a readable, coherent, and visually satisfying
whole that works invisibly, without the awareness
of the reader. Even distribution of typeset
material, with a minimum of distractions and
anomalies, is aimed at producing clarity and
transparency.
In traditional typography, text is composed to
create a readable, coherent, and visually
satisfying whole that works invisibly, without the
awareness of the reader. Even distribution of
typeset material, with a minimum of distractions
and anomalies, is aimed at producing clarity and
transparency.
Choice of font(s) is the primary aspect of text
typography—prose fiction, non-fiction, editorial,
educational, religious, scientific, spiritual and
commercial writing all have differing
characteristics and requirements of appropriate
typefaces and fonts. For historic material
established text typefaces are frequently chosen
according to a scheme of historical genre acquired
by a long process of accretion, with considerable
overlap between historical periods.
Choice of font(s) is the primary aspect of text
typography—prose fiction, non-fiction, editorial,
educational, religious, scientific, spiritual and
commercial writing all have differing
characteristics and requirements of appropriate
typefaces and fonts. For historic material
established text typefaces are frequently chosen
according to a scheme of historical genre
acquired by a long process of accretion, with
considerable overlap between historical periods.
Contemporary books are more likely to be set with
state-of-the-art seriffed "text romans" or "book
romans" with design values echoing present-day
design arts, which are closely based on traditional
models such as those of Nicolas Jenson,
Contemporary books are more likely to be set
with state-of-the-art seriffed "text romans" or
"book romans" with design values echoing
present-day design arts, which are closely based
on traditional models such as those of Nicolas

23. 1
Selection

24. 234,580

25. What Typeface Should I
Use?

26. What context will the typeface be used and what
purpose will it serve?

27. Body
The text we read
Text
Display
Type used at large sizes
Text

28. Serif or Sans-serif ?

30. Sans-serif

32. Serif vs. Sans-Serif in Body Copy
34%
66%
Serif
Sans-Serif

33. Serif vs. Sans-Serif in Display Copy
40%
60%
Serif
Sans-Serif

34. Georgia
Arial
Verdana
Lucida Grande
Helvetica
Times New Roman
Other
0
5
Body Text
10
15
Display Text
20

35. CHOOSING YOUR
Body
The text we read

36. 1
Generous x-height
NOT GOOD
GOOD
Fox
Fox
144pt, Lindon Hill
144pt, Georgia

39. 2
Familiar Letterforms
NOT GOOD
Il1
144pt, Gill Sans

40. 2
Familiar Letterforms
NOT GOOD
GOOD
Il1
Il1
144pt, Gill Sans
144pt, Georgia

41. 3
Designed for the screen
M

42. Verdana
9
Verdana
18
Verdana
36
Verdana
60

43. CHOOSING YOUR
Display text
Type used at large sizes

44. Dress for the Occasion

45. This afternoon, let’s go for a walk in
the park.

46. This afternoon, let’s go for
a walk in the park.

47. Workhorse Typeface

48. Workhorse Typeface
‣
‣
Easily recognizable letterforms
Trustworthy and reliable under heavy or
prolonged use
‣
Has different styles within the typeface
‣
Can be used in body text or display text
‣
Looks good at any size

49. WELCOME TO THE SHOW
Typography
In traditional typography, text is composed to create a readable, coherent, and visually
satisfying whole that works invisibly, without the awareness of the reader. Even distribution of
typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity
and transparency.
Fonts
Do you mean fonts or typefaces?
Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial,
educational, religious, scientific, spiritual and commercial writing all have differing
characteristics and requirements of appropriate typefaces and fonts. For historic material
established text typefaces are frequently chosen according to a scheme of historical genre
acquired by a long process of accretion, with considerable overlap between historical periods.
Helvetica Neue

50. WELCOME TO THE SHOW
Typography
In traditional typography, text is composed to create a readable, coherent, and visually
satisfying whole that works invisibly, without the awareness of the reader. Even distribution of
typeset material, with a minimum of distractions and anomalies, is aimed at producing clarity
and transparency.
Fonts
Do you mean fonts or typefaces?
Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial,
educational, religious, scientific, spiritual and commercial writing all have differing
characteristics and requirements of appropriate typefaces and fonts. For historic material
established text typefaces are frequently chosen according to a scheme of historical genre
acquired by a long process of accretion, with considerable overlap between historical periods.
Georgia

51. “
It is essential to be
creative…, but typography
must be legible or else it
becomes almost useless
Matt Cronin, 10 Principles for Readable Web Typography

52. Don’t be Wimpy

53. “
Keep it exactly the same,
or change it a lot — avoid
wimpy, incremental variations
Dan Mayer, What Font Should I Use?

54. Typography
Franklin Gothic Book
In traditional typography, text is composed to
create a readable, coherent, and visually
satisfying whole that works invisibly, without the
awareness of the reader. Even distribution of
typeset material, with a minimum of distractions
and anomalies, is aimed at producing clarity and
transparency.
Helvetica Neue
Fonts
Do you mean fonts or typefaces?
Choice of font(s) is the primary aspect of text
typography—prose fiction, non-fiction, editorial,
educational, religious, scientific, spiritual and
commercial writing all have differing
characteristics and requirements of appropriate
typefaces and fonts. For historic material
established text typefaces are frequently chosen
according to a scheme of historical genre
acquired by a long process of accretion, with

55. Typography
Georgia
In traditional typography, text is composed
to create a readable, coherent, and visually
satisfying whole that works invisibly,
without the awareness of the reader. Even
distribution of typeset material, with a
minimum of distractions and anomalies, is
aimed at producing clarity and
transparency.
Verdana
Fonts
Do you mean fonts or typefaces?
Choice of font(s) is the primary aspect of
text typography—prose fiction, non-fiction,
editorial, educational, religious, scientific,
spiritual and commercial writing all have
differing characteristics and requirements of
appropriate typefaces and fonts. For
historic material established text typefaces
are frequently chosen according to a

56. Georgia typeface is
named after a tabloid
headline titled, “Alien
heads found in Georgia”.

57. Georgia
Arial
Verdana
Lucida Grande
Helvetica
Times New Roman
Other
0
5
Body Text
10
15
Display Text
20

58. 2
Arrangement

59. “
How users read on the web:
they don't. Instead, they scan
the page, picking out individual
words and sentences.
Jakob Nielson

60. Measure
Line length

61. The Measure
In traditional typography, text is composed to create
a readable, coherent, and visually satisfying whole
that works invisibly, without the awareness of the
reader. Even distribution of typeset material, with a
minimum of distractions and anomalies, is aimed at
producing clarity and transparency.
Choice of font(s) is the primary aspect of text
typography—prose fiction, non-fiction, editorial,
educational, religious, scientific, spiritual and
commercial writing all have differing characteristics
and requirements of appropriate typefaces and fonts.
For historic material established text typefaces are
frequently chosen according to a scheme of
45–75 characters

64. Hierarchy & Scale
Type Size

65. “
You should understand that
the relationship between
different sizes of type within a
composition is meaningful…
create a scale thoughtfully
and then stick to it.
Jeff Croft, Elegant Web Typography

66. ab
ab
ab
ab
ab
ab ab
ab ab
6 7 8 9 10 11 12 14 16
ab ab
18
21
ab
24
ab ab
36
48
ab
ab
ab
ab
8 13
21
34
55
ab
ab ab ab
60
ab
89
72
84
ab
144
ab ab
96
110

67. Heading font size ÷ Body copy font size = 1.96
Typography
In traditional typography, text is composed to create a
readable, coherent, and visually satisfying whole that
works invisibly, without the awareness of the reader. Even
distribution of typeset material, with a minimum of
distractions and anomalies, is aimed at producing clarity
and transparency.
14pt – 28pt
Typography
In traditional typography, text is composed to
create a readable, coherent, and visually
satisfying whole that works invisibly, without
the awareness of the reader. Even distribution
of typeset material, with a minimum of
distractions and anomalies, is aimed at
20pt – 40pt

68. Typography
In traditional typography, text is composed to
create a readable, coherent, and visually
satisfying whole that works invisibly, without the
awareness of the reader. Even distribution of
typeset material, with a minimum of distractions
and anomalies, is aimed at producing clarity and
transparency.
Fonts
Do you mean fonts or typefaces
Choice of font(s) is the primary aspect of text
typography—prose fiction, non-fiction, editorial,
educational, religious, scientific, spiritual and
commercial writing all have differing
characteristics and requirements of appropriate
typefaces and fonts. For historic material
established text typefaces are frequently chosen
according to a scheme of historical genre
acquired by a long process of accretion, with
considerable overlap between historical periods.
Contemporary books are more likely to be set

69. 36
18
Typography
In traditional typography, text is composed to
create a readable, coherent, and visually
satisfying whole that works invisibly, without the
awareness of the reader. Even distribution of
typeset material, with a minimum of distractions
and anomalies, is aimed at producing clarity and
transparency.
36
Fonts
24
Do you mean fonts or typefaces?
18
Choice of font(s) is the primary aspect of text
typography—prose fiction, non-fiction, editorial,
educational, religious, scientific, spiritual and
commercial writing all have differing
characteristics and requirements of appropriate
typefaces and fonts. For historic material
established text typefaces are frequently chosen
according to a scheme of historical genre

70. Leading
Line Height

71. In traditional typography, text is composed to
create a readable, coherent, and visually
satisfying whole that works invisibly, without the
awareness of the reader. Even distribution of
typeset material, with a minimum of distractions
and anomalies, is aimed at producing clarity and
transparency.

72. In traditional typography, text is composed to
create a readable, coherent, and visually
satisfying whole that works invisibly, without the
awareness of the reader. Even distribution of
typeset material, with a minimum of distractions
and anomalies, is aimed at producing clarity and
transparency.
1.5 x font size

73. In traditional typography, text is composed to
create a readable, coherent, and visually
satisfying whole that works invisibly, without the
awareness of the reader. Even distribution of
typeset material, with a minimum of distractions
and anomalies, is aimed at producing clarity and
transparency.
In traditional typography, text is composed to create a readable, coherent, and visually satisfying
whole that works invisibly, without the awareness of the reader. Even distribution of typeset
material, with a minimum of distractions and anomalies, is aimed at producing clarity and
transparency.
Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial,
educational, religious, scientific, spiritual and commercial writing all have differing characteristics
and requirements of appropriate typefaces and fonts. For historic material established text
typefaces are frequently chosen according to a scheme of historical genre acquired by a long

74. Spacing

75. “
Space in typography is like
time in music.
Robert Bringhurst

76. Typography
In traditional typography, text is composed to
create a readable, coherent, and visually
satisfying whole that works invisibly, without the
awareness of the reader. Even distribution of
typeset material, with a minimum of distractions
and anomalies, is aimed at producing clarity and
transparency.
Fonts
Do you mean fonts or typefaces?
Choice of font(s) is the primary aspect of text
typography—prose fiction, non-fiction, editorial,
educational, religious, scientific, spiritual and
commercial writing all have differing
characteristics and requirements of appropriate
typefaces and fonts. For historic material
established text typefaces are frequently chosen
according to a scheme of historical genre
acquired by a long process of accretion, with
considerable overlap between historical periods.
Contemporary books are more likely to be set
with state-of-the-art seriffed "text romans" or
"book romans" with design values echoing
present-day design arts, which are closely based
on traditional models such as those of Nicolas
Jenson, Francesco Griffo (a punchcutter who
created the model for Aldine typefaces), and

77. Typography
In traditional typography, text is composed to
create a readable, coherent, and visually
satisfying whole that works invisibly, without the
awareness of the reader. Even distribution of
typeset material, with a minimum of distractions
and anomalies, is aimed at producing clarity and
transparency.
Fonts
Do you mean fonts or typefaces?
Choice of font(s) is the primary aspect of text
typography—prose fiction, non-fiction, editorial,
educational, religious, scientific, spiritual and
commercial writing all have differing
characteristics and requirements of appropriate
typefaces and fonts. For historic material
established text typefaces are frequently chosen
according to a scheme of historical genre
acquired by a long process of accretion, with

78. “
Space plays the most
important part in maintaining
flow of your design. Good
use of space will tell the
reader where to start, when
to pause, where it ends and
what to do next.
Sean Hodge, 5 Principles of Setting Type on the Web

79. Flow
Start
Typography
In traditional typography, text is composed to
create a readable, coherent, and visually
satisfying whole that works invisibly, without the
awareness of the reader. Even distribution of
typeset material, with a minimum of distractions
and anomalies, is aimed at producing clarity and
transparency.
Stop
Start
Fonts
Flow
Do you mean fonts or typefaces?
Stop
Choice of font(s) is the primary aspect of text
typography—prose fiction, non-fiction, editorial,
educational, religious, scientific, spiritual and
commercial writing all have differing
characteristics and requirements of appropriate
typefaces and fonts. For historic material
established text typefaces are frequently chosen
according to a scheme of historical genre
acquired by a long process of accretion, with

80. White Space is Good
In traditional typography, text is composed to
create a readable, coherent, and visually
satisfying whole that works invisibly, without the
awareness of the reader. Even distribution of
typeset material, with a minimum of distractions
and anomalies, is aimed at producing clarity
and transparency.
Fonts
Do you mean fonts or typefaces?
Choice of font(s) is the primary aspect of text
typography—prose fiction, non-fiction, editorial,
educational, religious, scientific, spiritual and
commercial writing all have differing
characteristics and requirements of appropriate
typefaces and fonts. For historic material
established text typefaces are frequently
chosen according to a scheme of historical
genre acquired by a long process of accretion,
In traditional typography, text is composed to
create a readable, coherent, and visually
satisfying whole that works invisibly, without the
awareness of the reader. Even distribution of
typeset material, with a minimum of distractions
and anomalies, is aimed at producing clarity
and transparency.
Choice of font(s) is the primary aspect of text
typography—prose fiction, non-fiction, editorial,
educational, religious, scientific, spiritual and

81. “
Once you know how to design
and manipulate the space
outside, inside, and around
your content, you’ll give your
readers a head start…
Mark Boulton, Whitespace

83. Paragraphs

84. In traditional typography, text is composed to create a readable, coherent, and visually satisfying whole
that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a
minimum of distractions and anomalies, is aimed at producing clarity and transparency.
Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial,
educational, religious, scientific, spiritual and commercial writing all have differing characteristics and
requirements of appropriate typefaces and fonts. For historic material established text typefaces are
frequently chosen according to a scheme of historical genre acquired by a long process of accretion,
with considerable overlap between historical periods.
Contemporary books are more likely to be set with state-of-the-art seriffed "text romans" or "book
romans" with design values echoing present-day design arts, which are closely based on traditional
models such as those of Nicolas Jenson, Francesco Griffo (a punchcutter who created the model for
Aldine typefaces), and Claude Garamond.
With their more specialized requirements, newspapers and magazines rely on compact, tightly fitted
seriffed text fonts specially designed for the task, which offer maximum flexibility, readability and
efficient use of page space. Sans serif text fonts are often used for introductory paragraphs, incidental
text and whole short articles.
Paragraph Spacing

85. In traditional typography, text is composed to create a readable, coherent, and visually satisfying whole
that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a
minimum of distractions and anomalies, is aimed at producing clarity and transparency.
Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial,
educational, religious, scientific, spiritual and commercial writing all have differing characteristics and
requirements of appropriate typefaces and fonts. For historic material established text typefaces are
frequently chosen according to a scheme of historical genre acquired by a long process of accretion,
with considerable overlap between historical periods.
Contemporary books are more likely to be set with state-of-the-art seriffed "text romans" or "book
romans" with design values echoing present-day design arts, which are closely based on traditional
models such as those of Nicolas Jenson, Francesco Griffo (a punchcutter who created the model for
Aldine typefaces), and Claude Garamond.
With their more specialized requirements, newspapers and magazines rely on compact, tightly
fitted seriffed text fonts specially designed for the task, which offer maximum flexibility, readability and
efficient use of page space. Sans serif text fonts are often used for introductory paragraphs, incidental
text and whole short articles.
A current fashion is to pair sans-serif type for headings with a high-performance seriffed font of
matching style for the text of an article.
Indent

86. In traditional typography, text is composed to create a readable, coherent, and visually satisfying whole
that works invisibly, without the awareness of the reader. Even distribution of typeset material, with a
minimum of distractions and anomalies, is aimed at producing clarity and transparency.
Choice of font(s) is the primary aspect of text typography—prose fiction, non-fiction, editorial,
educational, religious, scientific, spiritual and commercial writing all have differing characteristics and
requirements of appropriate typefaces and fonts. For historic material established text typefaces are
frequently chosen according to a scheme of historical genre acquired by a long process of accretion,
with considerable overlap between historical periods.
Contemporary books are more likely to be set with state-of-the-art seriffed "text romans" or "book
romans" with design values echoing present-day design arts, which are closely based on traditional
models such as those of Nicolas Jenson, Francesco Griffo (a punchcutter who created the model for
Aldine typefaces), and Claude Garamond.
With their more specialized requirements, newspapers and magazines rely on compact, tightly
fitted seriffed text fonts specially designed for the task, which offer maximum flexibility, readability and
efficient use of page space. Sans serif text fonts are often used for introductory paragraphs, incidental
text and whole short articles.
Paragraph Spacing + Indent

87. 3
Formatting

88. 3
Type Sins

89. SI N N UM B E R O NE
Two Spaces After a
Period.

90. I have set this paragraph with
one space after a period. The
flow is a lot better and doesn’t
create awkward gaps in the
paragraph. Please forget
everything you learned in your
typewriter class. Use only one
space after a periods. The great
thing about the web is that it
ignores multiple spaces. Even if
you put two spaces in, only one
will show.
I have set two spaces after each
period. Squint your eyes at this
text. You’ll notice the big gaps
those extra spaces create. I
guarantee this: never in your life
have you read professionally set
text printed since 1942 that used
two spaces after each period. If
you don’t believe me, check The
Chicago Manual of Style. You’ll
find answers to a lot of questions.

91. SI N N UM B E R T W O
Using Prime Marks for
Quotes

92. '"

93. '"

94. '"
6' 1"

95. “”

96. “”
“Where did the cat go?”

97. SI N N UM B E R T HRE E
Improper Use of the
Hyphen

98. -
Hyphen
mother-in-law
–
En dash
October–December
6:30–8:45 A.M.
—
Em dash
It’s twice as long as the
en dash—it’s about the
size of a capital M.

99. “
opening double quote
“
”
closing double quote
”
‘
opening single quote
‘
’
closing single quote
’
–
en dash
–
—
em dash
—

100. SI N N UM B E R F O UR
Not Using Hanging
Punctuation

101. In traditional typography, text is composed to
create a readable, coherent, and visually
satisfying whole that works invisibly, without the
awareness of the reader.
• Even distribution of typeset material.
• A minimum of distractions and anomalies.
• Aimed at producing clarity and transparency.
Choice of font(s) is the primary aspect of text
typography—prose fiction, non-fiction, editorial,
In traditional typography, text is composed to
create a readable, coherent, and visually
satisfying whole that works invisibly, without the
awareness of the reader.
• Even distribution of typeset material.
• A minimum of distractions and anomalies.
• Aimed at producing clarity and transparency.
Choice of font(s) is the primary aspect of text
typography—prose fiction, non-fiction, editorial,

102. In traditional typography, text is composed to
create a readable, coherent, and visually
satisfying whole that works invisibly, without the
awareness of the reader.
“ Even distribution of typeset material, with a
minimum of distractions and anomalies, is
aimed at producing clarity and transparency.”
Choice of font(s) is the primary aspect of text
typography—prose fiction, non-fiction, editorial
In traditional typography, text is composed to
create a readable, coherent, and visually
satisfying whole that works invisibly, without the
awareness of the reader.
“ Even distribution of typeset material, with a
minimum of distractions and anomalies, is
aimed at producing clarity and transparency.”
Choice of font(s) is the primary aspect of text
typography—prose fiction, non-fiction, editorial

103. SI N N UM B E R F I V E
Using Too Much
Emphasis

104. Hear me now, and understand me later!

105. “
A little care to typography
goes a long way in making
your site more professional
and elegant.
Jeff Croft, Elegant Web Typography

106. “
A little care to typography
goes a long way in making
your site more professional,
elegant, and readable.
Jeff Croft + Tony

107. The End
Tony Naccarato
@tonynaccarato