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

3.
I Typography

4.
Typography is everywhere.

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

6.
15.000 BC – 12.500 BC
Altamira & Lascaux

7.
3.000 BC – 1.500 BC
Pictographs

8.
1.500 BC
Phoenician alphabet

9.
750 BC
Greek alphabet

10.
146 BC
Roman alphabet, “Capitalis quadrata”

11.
0
Better materials, “Capitalis rustica”

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

13.
8th century
Carolingian minuscules

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

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

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

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

18.
21th century
Web typography and CSS

19.
The basics

20.
Basics
Classification

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

22.
Serif types

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

24.
Sans serif types

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

26.
Gothic types

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

28.
Cursive types

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

30.
Display types

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

32.
Dingbats

33.
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.

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

35.
.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;
}

36.
Basics
Anatomy of a type

37.
baseline
font size

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

39.
Typography

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

41.
Basics
Units

42.
Physical units

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

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

45.
A4 (29.7cm × 21.0cm)

46.
Pixel (px)

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

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

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

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

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

52.
em unit (em)

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

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

55.
1 em

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

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

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

59.
Root em unit (rem)

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

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

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

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

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

65.
Rhythm

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

67.
Rhythm
Line height

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

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

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

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

72.
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.”

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

74.
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.”

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

76.
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.”

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

78.
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.”

79.
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.”

80.
Rhythm
Baseline

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

82.
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.”

83.
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.”

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

85.
/* 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 */
}

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

87.
// _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;
}

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

89.
Rhythm
Letter spacing/tracking

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

91.
Typography

92.
Typography
letter-spacing: 10px;

93.
Typography
letter-spacing: -10px;

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

95.
Epic Movie Title

96.
Epic Movie Title

97.
Rhythm
Kerning

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

99.
Task

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

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

102.
Rhythm
Text indentation

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

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

105.
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;
}

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

107.
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;
}

108.
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;
}

109.
Text styling

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

111.
Styling
Titles & subtitles

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

113.
Styling
Quotes

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

115.
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;
}

116.
Styling
Elevated caps

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

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

119.
Styling
OpenType

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

121.
.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+

122.
Composition

123.
Composition
Grids and column sizes

124.
The text should have
an ideal line length.

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

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

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

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

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

130.
Rendering

131.
Rendering
Anti-aliasing and hinting

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

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

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

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

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

137.
Test. On. Every. Browser.

138.
Choosing

139.
Choosing
Sources

140.
Choose a reliable source
for your font.

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

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

143.
Fonts are expensive
for a reason.

144.
Choosing
Personalities

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

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

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

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

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

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

151.
Start simple, with a
readable body typeface.

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

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

154.
Choosing
Performance

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

156.
Measure the impact of
each added typeface.

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

158.
Avoid loading custom typefaces
on mobile devices.

159.
I Typography

160.
We’ve only scratched
the surface.

161.
We are the craftspeople
of the web.

162.
We should keep our
roots in place.

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

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