The Typography is an almost six-centuries-old practice, and we’ve came a long way since Gutenberg’s moveable types to the digital documents as we know it. But somewhere in between, the craftsmanship and best practices of printers and engravers were long forgotten by many web developers—who end up relying on the browser, frameworks, and trial-and-error values to properly display a website’s content. In this talk, we’ll journey through the basic concepts of Typography; how we can use them to improve a content’s identity, architecture, and readability; and how to do it through HTML and CSS.

1. Dominating the
Web Typography
Eduardo Shiota Yasuda — @shiota Conferência CSS Brasil

2. Hello!
twitter.com/shiota
github.com/eshiota
slideshare.net/eshiota
contato@eshiota.com

4. I Typography

5. Typography is everywhere.

13. We gotta remember the
roots of what we do.

14. 15.000 BC – 12.500 BC
Altamira & Lascaux

15. 3.000 BC – 1.500 BC
Pictographs

16. 1.500 BC
Phoenician alphabet

17. 750 BC
Greek alphabet

18. 146 BC
Roman alphabet, “Capitalis quadrata”

19. 0
Better materials, “Capitalis rustica”

20. 4th – 5th centuries
Uncials and semi-uncials

21. 8th century
Carolingian minuscules

22. 12th century
Apex of goth art and Middle Ages

23. 15th – 16th centuries
Renaissance, Gutenberg press, “Cursiva humanista”, type foundries

24. 19th century
Industrial Revolution, linotype, Art Nouveau, display types

25. 20th century
Modern Design, Avant-garde, Bauhaus, sans-serif types, digital typography

26. 21th century
Web typography and CSS

27. The basics

28. Basics
Classification

29. Most of the classification
systems agree with these
type categories:

30. Serif types

31. Museo
The quick brown fox jumps
over the lazy dog.
Meta Serif
The quick brown fox jumps
over the lazy dog.
Times New Roman
The quick brown fox jumps
over the lazy dog.

32. Sans serif types

33. Futura
The quick brown fox jumps
over the lazy dog.
Museo Sans
The quick brown fox jumps
over the lazy dog.
Helvetica
The quick brown fox jumps
over the lazy dog.

34. Gothic types

35. Fette Fraktur
The quick brown fox jumps
over the lazy dog.
Goudy Text
The quick brown fox jumps
over the lazy dog.
Wilhelm Klingspor Gotisch
The quick brown fox jumps
over the lazy dog.

36. Cursive types

37. Lucida Calligraphy
The quick brown fox jumps
over the lazy dog.
Mistral
The quick brown fox jumps over
the lazy dog.
Apple Chancery
The quick brown fox jumps
over the lazy dog.

38. Display types

39. Comic Sans
The quick brown fox jumps
over the lazy dog.
Sketch Rockwell
The quick brown fox
jumps over the lazy dog.
GodOfWar
The quick brown fox jumps
over the lazy dog.

40. Dingbats

41. Bodoni Ornaments
The quick brown fox jumps
over the lazy dog.
Travel Icons
The quick brown fox jumps
over the lazy dog.
Wingdings
The quick brown fox jumps
over the lazy dog.

42. On the CSS, you may
choose generic families
as fallbacks.

43. .my-serif-text {
font-family: "Meta Serif", Times, serif;
}
.my-sans-serif-text {
font-family: "Proxima Nova", Arial, sans-serif;
}
.my-monospace-text {
font-family: Monaco, "Courier New", monospace;
}
.my-cursive-text {
font-family: "Zapf Chancery", "Brush Script", cursive;
}
.my-fantasy-text {
font-family: "Sketch Rockwell", Papyrus, fantasy;
}

44. Basics
Anatomy of a type

46. baseline
font size

47. Typography
baseline
descender height
x-height
cap height
ascender height

48. Typography

49. T
y
p
o
g
r
a
p
h
y

50. Basics
Units

51. Physical units

52. To deal with physical units,
you can’t rely on a screen.

53. pt picas millimetres inches
12 1 4.22 1/6

54. A4 (29.7cm × 21.0cm)

55. Pixel (px)

56. To deal with screens, you must
understand what are physical
and reference pixels.

57. A physical pixel is a physical
point on the display.

59. A reference pixel depends
on the device, software and
user settings.

61. A 16px font on a
smartphone screen won’t
have as many millimetres as
on a desktop screen.

63. Change, test, use media
queries, test again.

64. em unit (em)

65. “em” is a relative unit used
since the movable types.

66. It represents a type’s
full body size.

67. 1 em

68. 16px
1 em
margin-right: 1em;
16px

69. It’s always relative to its
context’s font size.

70. .wrapper {
font-size: 16px;
}
.parent {
font-size: 1.5em;
}
.child {
font-size: .5em;
}

71. Root em unit (rem)

72. “rem” is like “em” but always
relative to the root (html).

73. html {
font-size: 16px;
}
.wrapper {
font-size: 12px;
}
.parent {
font-size: 1.5rem;
}
.child {
font-size: 0.5rem;
}

74. For most of browsers and
cases, the default root
font size is 16px.

75. html {
font-size: 16px;
}
.wrapper {
font-size: 12px;
}
.parent {
font-size: 1.5rem;
}
.child {
font-size: 0.5rem;
}

76. html {
font-size: 100%;
}
.wrapper {
font-size: 12px;
}
.parent {
font-size: 1.5rem;
}
.child {
font-size: 0.5rem;
}

77. Rhythm

78. The way you space your
characters and text dictates
how a person will read it.

79. Rhythm
Line height

80. Line height is the distance
between each line of types.

81. The quick fox jumps
over the dog 0 pixels
Meta Serif 102px/102px

82. The quick fox jumps
over the dog
Meta Serif 102px/144px
42 pixels

83. A low line height makes the
text too difficult to read.

84. Helvetica 32px/32px
“The Guide says that the best drink in existence is the Pan
Galactic Gargle Blaster. It says that the effect of a Pan Galactic
Gargle Blaster is like having your brains smashed out by a slice
of lemon wrapped round a large gold brick.”

85. A large line height makes the
paragraph loose cohesion.

86. Helvetica 32px/96px
“The Guide says that the best drink in existence is the Pan
Galactic Gargle Blaster. It says that the effect of a Pan Galactic
Gargle Blaster is like having your brains smashed out by a slice
of lemon wrapped round a large gold brick.”

87. Find a comfortable proportion
through trial-and-error.

88. Helvetica 32px/48px
“The Guide says that the best drink in existence is the Pan
Galactic Gargle Blaster. It says that the effect of a Pan Galactic
Gargle Blaster is like having your brains smashed out by a slice
of lemon wrapped round a large gold brick.”

89. Each typeface might require a
different line height setting.

90. Bembo 32px/48px
“The Guide says that the best drink in existence is the Pan Galactic
Gargle Blaster. It says that the effect of a Pan Galactic Gargle Blaster is
like having your brains smashed out by a slice of lemon wrapped
round a large gold brick.”

91. Caslon 32px/48px
“The Guide says that the best drink in existence is the Pan
Galactic Gargle Blaster. It says that the effect of a Pan
Galactic Gargle Blaster is like having your brains smashed
out by a slice of lemon wrapped round a large gold brick.”

92. Rhythm
Baseline

93. Use a consistent vertical
proportion by following
a baseline.

94. 9 reasons why cats will conquer the world. The number 5
will surprise you!
“More importantly, a towel has immense psychological value.
For some reason, if a strag (strag: nonhitchhiker) discovers that a hitchhiker has his towel with him, he will
automatically assume that he is also in possession of a toothbrush, washcloth, soap, tin of biscuits, flask, compass,
map, ball of string, gnat spray, wet-weather gear, space suit etc., etc.
Furthermore, the strag will then happily lend the hitchhiker any of these or a dozen other items that the hitchhiker
might have accidentally "lost.". What the strag will think is that any man that can hitch the length and breadth of the
Galaxy, rough it, slum it, struggle against terrible odds, win through and still know where his towel is, is clearly a
man to be reckoned with.”

95. 9 reasons why cats will conquer the world. The number 5
will surprise you!
“More importantly, a towel has immense psychological value.
For some reason, if a strag (strag: nonhitchhiker) discovers that a hitchhiker has his towel with him, he will
automatically assume that he is also in possession of a toothbrush, washcloth, soap, tin of biscuits, flask, compass,
map, ball of string, gnat spray, wet-weather gear, space suit etc., etc.
Furthermore, the strag will then happily lend the hitchhiker any of these or a dozen other items that the hitchhiker
might have accidentally "lost.". What the strag will think is that any man that can hitch the length and breadth of the
Galaxy, rough it, slum it, struggle against terrible odds, win through and still know where his towel is, is clearly a
man to be reckoned with.”

96. Choose a line height for a
baseline, and make all
vertical values derive from it.

97. /* baseline = 24px */
body {
font-size: 16px;
line-height: 24px; /* baseline */
}
.article-title {
font-size: 32px;
line-height: 48px; /* 2 × baseline */
}
.article-excerpt {
font-size: 18px;
line-height: 24px; /* baseline */
}
img {
max-height: 312px; /* 13 × baseline */
}
p {
margin-bottom: 12px; /* 0.5 × baseline */
}

98. If you pre-process your CSS,
you ensure a consistent
typography using variables.

99. // _variables.scss
$base-font-size: 16px;
$baseline: 24px;
// On your project:
body {
font-size: $base-font-size;
line-height: ($baseline/$base-font-size); // 1.5
}
.article-title {
font-size: 2*$base-font-size;
line-height: 2*$baseline;
}
.article-excerpt {
font-size: 18px;
line-height: $baseline;
}
img {
max-height: 13*$baseline;
}
p {
margin-bottom: 0.5*$baseline;
}

100. Be aware that each browser
has its own baseline.

101. Rhythm
Letter spacing/tracking

102. Letter spacing is the
whitespace between
each single type.

103. Typography

104. Typography
letter-spacing: 10px;

105. Typography
letter-spacing: -10px;

106. The use of letter-spacing is
recommended for titles only.

107. Epic Movie Title

108. Epic Movie Title

109. Rhythm
Kerning

110. Kerning is a fine-tuning
between specific pairs
of characters.

112. Task

113. The browser default is
automatically
enabling/disabling it.

115. .kerning {
font-kerning: normal;
}
32+ 34+ 7+ 10+

116. Rhythm
Text indentation

117. You can manipulate the
text’s indentation, which
applies to its first line.

118. More importantly, a towel has immense psychological value.
For some reason, if a strag (strag: nonhitchhiker) discovers that a hitchhiker has his
towel with him, he will automatically assume that he is also in possession of a
toothbrush, washcloth, soap, tin of biscuits, flask, compass, map, ball of string, gnat
spray, wet-weather gear, space suit etc., etc.
Furthermore, the strag will then happily lend the hitchhiker any of these or a dozen
other items that the hitchhiker might have accidentally "lost.". What the strag will think
is that any man that can hitch the length and breadth of the Galaxy, rough it, slum it,
struggle against terrible odds, win through and still know where his towel is, is clearly a
man to be reckoned with.

119. More importantly, a towel has immense psychological value.
For some reason, if a strag (strag: nonhitchhiker) discovers that a hitchhiker has
his towel with him, he will automatically assume that he is also in possession of a
toothbrush, washcloth, soap, tin of biscuits, flask, compass, map, ball of string, gnat
spray, wet-weather gear, space suit etc., etc.
Furthermore, the strag will then happily lend the hitchhiker any of these or a dozen
other items that the hitchhiker might have accidentally "lost.". What the strag will think
is that any man that can hitch the length and breadth of the Galaxy, rough it, slum it,
struggle against terrible odds, win through and still know where his towel is, is clearly a
man to be reckoned with.
.post p {
text-indent: 2em;
}

120. For long texts, you can
skip the indentation on
the first paragraph.

121. More importantly, a towel has immense psychological value.
For some reason, if a strag (strag: nonhitchhiker) discovers that a hitchhiker has
his towel with him, he will automatically assume that he is also in possession of a
toothbrush, washcloth, soap, tin of biscuits, flask, compass, map, ball of string, gnat
spray, wet-weather gear, space suit etc., etc.
Furthermore, the strag will then happily lend the hitchhiker any of these or a dozen
other items that the hitchhiker might have accidentally "lost.". What the strag will think
is that any man that can hitch the length and breadth of the Galaxy, rough it, slum it,
struggle against terrible odds, win through and still know where his towel is, is clearly a
man to be reckoned with.
.post p {
text-indent: 2em;
}
.post p:first-of-type {
text-indent: 0;
}

122. More importantly, a towel has immense psychological value.
For some reason, if a strag (strag: nonhitchhiker) discovers that a hitchhiker has
his towel with him, he will automatically assume that he is also in possession of a
toothbrush, washcloth, soap, tin of biscuits, flask, compass, map, ball of string, gnat
spray, wet-weather gear, space suit etc., etc.
Furthermore, the strag will then happily lend the hitchhiker any of these or a dozen
other items that the hitchhiker might have accidentally "lost.". What the strag will think
is that any man that can hitch the length and breadth of the Galaxy, rough it, slum it,
struggle against terrible odds, win through and still know where his towel is, is clearly a
man to be reckoned with.
.post p + p {
text-indent: 2em;
}

123. Text styling

124. You can use CSS rules to
properly style your content,
like a well-authored book.

125. Styling
Titles & subtitles

126. Keep a clear hierarchy by
using different font sizes,
type faces and variants.

128. Styling
Quotes

129. A quote block can be
highlighted with margins
and pseudo-elements.

131. blockquote {
margin: 2em 6em;
font-size: 24px;
line-height: 1.5;
font-style: italic;
position: relative;
}
blockquote:before {
content: "“";
position: absolute;
left: -.75em;
top: 0;
font-size: 2.66em;
line-height: 1;
}
blockquote .author {
font-size: .75em;
line-height: 1.77;
}

132. Styling
Elevated caps

133. Explore CSS selectors to style
specific parts of the text.

134. .post p:first-of-type:first-letter {
font-size: 4.5em;
}

135. Styling
OpenType

136. OpenType fonts provide
features to control and tweak
the styles of your text.

138. .my-class {
font-variant-caps: small-caps;
-moz-font-feature-settings: "smcp";
-ms-font-feature-settings: "smcp";
-webkit-font-feature-settings: "smcp";
font-feature-settings: "smcp";
}
33+ 4+ 10+

141. Composition

142. Composition
Grids and column sizes

143. The text should have
an ideal line length.

145. A line should have between
60 and 70 characters.

147. .post {
width: 744px;
margin: 0 auto;
}

149. The column size should
respond to font size changes.

151. The use of em-based column
width might solve the problem.

154. .post {
width: 31em;
margin: 0 auto;
}

155. Rendering

156. Rendering
Anti-aliasing and hinting

157. Font shapes are vectors
that are rasterised to be
displayed on pixels.

158. Hinting is a manual work
of tweaking sub-pixels to
maintain a font’s identity
and legibility on screen.

161. Anti-aliasing is an algorithm
used to smooth edges.

162. Each OS and browsers have a
different anti-aliasing and
hinting setting.

163. OS + Browser Hinting and AA
Win XP — IE6–8 GDI Grayscale
Win XP — IE6–8 ClearType GCI ClearType
IE9+ DirectWrite
Win XP Chrome GDI ClearType
Win XP Firefox GDI ClearType
Win 7+ Chrome 37+ DirectWrite
Win 7+ Firefox Depends?
OS X CoreText, ignores hinting
* Based on a lot of Google searches, might not be accurate

164. Test. On. Every. Browser.

166. Choosing

167. Choosing
Sources

168. Choose a reliable source
for your font.

170. The font must have a
proper unicode table,
kerning, hinting etc.

171. Also check for language
support, webfont license,
OpenType features.

177. Fonts are expensive
for a reason.

178. Choosing
Personalities

179. Each typeface has a story
and a personality, choose
one that match yours.

180. The quick brown fox
jumps over the lazy dog.
Bembo — based in engravings from 1495, renaissance style,
readable in small font sizes.

181. The quick brown fox
jumps over the lazy dog.
Helvetica — Symbol of the Modern Design, is readable,
international and neutral.

182. The quick brown fox
jumps over the lazy dog.
Museo — The modern, geometric shapes and the rounded, slab
serifs give a strong personality to this type.

183. Serifs have a refined look,
need less line height values,
and help maintaining a
cohesive text.

185. Sans serifs have a modern
look, and increased
legibility on screens.

187. Start simple, with a
readable body typeface.

188. Then format titles and
subtitles using different
weights and styles.

189. Choose a second typeface
for titles if needed. Avoid
going further than that.

191. Choosing
Performance

192. Each font size is extra data
that must be downloaded.

194. Measure the impact of
each added typeface.

196. You’ll have to choose between
speed and non-FOUC.

197. Avoid loading custom typefaces
on mobile devices.

198. I Typography

199. We’ve only scratched
the surface.

200. We are the craftspeople
of the web.

202. We should keep our
roots in place.

205. Further reading:
The Elements of Typographic Style
Robert Bringhurst
EN: http://www.amazon.com/Elements-Typographic-Style-Robert-Bringhurst/dp/0881791326
PT-BR: http://editora.cosacnaify.com.br/ObraSinopse/11584/Elementos-do-estilo-tipogr%C3%A1fico---vers%C3%A3o-30.aspx
Thinking with Type
Ellen Lupton
EN: http://www.amazon.com/Thinking-Type-2nd-revised-expanded/dp/1568989695
PT-BR: http://editora.cosacnaify.com.br/ObraSinopse/1875/Pensar-com-tipos---2%C2%BA-edi%C3%A7%C3%A3o-%28Previs%C3%A3o-de-envio-a-
partir-de-200415%29.aspx
Type on Screen
Ellen Lupton
EN: http://www.amazon.com/Type-Screen-Critical-Designers-Developers/dp/161689170X
On Web Typography
Jason Santa Maria
EN: http://abookapart.com/products/on-web-typography
Type and Typography
Baines & Haslam
EN: http://www.amazon.co.uk/Type-Typography-Portfolio-Phil-Baines/dp/1856694372

206. Thanks!
twitter.com/shiota
github.com/eshiota
slideshare.net/eshiota
contato@eshiota.com