Typography is the foundation of any website. We are increasingly aware of typography all around us. We avoid or spend less time on sites with hard-to-read text. We have favorite fonts (and will passionately defend them)! No matter your role on a project, having a better understanding of typography will help you to communicate with clarity. There are more ways than ever to implement custom, beautiful typography on your websites (and beyond). But a new plethora of options can make the selection process even more difficult. This session will teach you the foundations of typography, help you navigate this sea of typographic possibilities, and understand why good type should be your primary focus. We'll also explore ways that typography affects your user experience on the web and beyond.

1. The wonderful world
Garret Voorhees
DrupalCon Los Angeles / May 12, 2015
Senior Designer & UX Strategist, Chapter Three
of typography[web]

2. chapter_three

3. Typography:
a primer

4. What is typography?

5. WARNING!
What you are about to see
cannot be unseen.

14. nicolasdamiens.com/project/tokyo-no-ads/

15. nicolasdamiens.com/project/tokyo-no-ads/

16. flickr.com/groups/trajanfilmposter

17. flickr.com/groups/trajanfilmposter

18. flickr.com/groups/trajanfilmposter

19. flickr.com/groups/trajanfilmposter

20. flickr.com/groups/trajanfilmposter

21. flickr.com/groups/trajanfilmposter

22. flickr.com/groups/trajanfilmposter

29. nedbatchelder.com/blog/201303/letterpress_workshop_at_massart.html

30. nedbatchelder.com/blog/201303/letterpress_workshop_at_massart.html

31. nedbatchelder.com/blog/201303/letterpress_workshop_at_massart.html

33. instagram.com/seblester

34. instagram.com/seblester

35. Old Style
Hamburgefonstiv 12345
Hamburgefonstiv 12345
Hamburgefonstiv 12345
Hamburgefonstiv 12345
Transitional
Modern
Egyptian/Slab
Sabon
Baskerville
Bodoni
Glypha
SERIF

36. Hamburgefonstiv 12345
Hamburgefonstiv 12345
Hamburgefonstiv 12345
Hamburgefonstiv 12345
Grotesque
Neo Grotesque
Geometric Sans
Humanist Sans
Franklin Gothic
Helvetica Neue
Futura
Frutiger
SANS SERIF

37. g g g g
g g
Old Style Transitional Modern Egyptian/Slab
Geometric Sans Humanist Sans
g g
Grotesque Neo Grotesque

38. Anatomy

39. acounter
bowl
stem
arm
serif
another
counter
terminal

40. xBlingbaseline
cap height
meanline
ascender
descender
x-height
serif

41. Helvetica
Light
Light Oblique
Roman
Oblique
Bold
Bold Oblique
Black
Black Oblique
Font
Family
Typeface

42. 12 pt
Point Size

43. these pretzels
are making me
thirsty!

44. 14 pt
Leading/Linespacing
think
different

45. 12 pt
turkey
pesto
wrap
12 pt
12 pt
15 pt
15 pt
12/15
“Twelve
on fifteen”

46. RECOMMENDED READING
The Laws of Simplicity
John Maeda
Stop Stealing Sheep &
find out how type works
Erik Spiekermann
Thinking With Type
Ellen Lupton
Grid Systems in
Graphic Design
Josef Müller-Brockman
The Elements of
Typographic Style
Robert Bringhurst
On Web Typography
Jason Santa Maria

47. Helvetica or
Arial?

48. a a
Helvetica Arial

49. r r
Helvetica Arial

50. t t
Helvetica Arial

51. s s
Helvetica Arial

52. R R
Helvetica Arial

53. G G
Helvetica Arial

54. Q Q
Helvetica Arial

55. Y Y
Helvetica Arial

56. wizard
wizard

57. school
school

58. potato
potato

59. monkey
monkey

60. BUFFALO
BUFFALO

61. Selecting a
typeface

62. Do I need a
large family?
Will it be used
for print?
How will it display
cross-platform?
Does it convey
the right tone?
What sort of content
will it be used for?
What style of numerals
are included?
https://flic.kr/p/5cFp9s
Do I need to support
non-Latin characters?

63. Hamburgefonstiv
Hamburgefonstiv
Hamburgefonstiv

64. The quick brown
fox jumps over
the lazy dog.
www.clagnut.com/blog/2380

65. Pack my box
with five dozen
liquor jugs.
www.clagnut.com/blog/2380

66. Jackdaws love
my big sphinx
of quartz.
www.clagnut.com/blog/2380

67. Grumpy wizards
make toxic brew
for the evil queen
and jack. www.clagnut.com/blog/2380

68. Skillets served sizzlin’ hot.
Three-egg omelettes are served with
hash browns and choice of bread.
NEW!
pancakes
Sides
Philly Cheesesteak Omelette
Hearty Breakfast Skillet
Santa Fe Skillet
Cinnamon Pancake Breakfast
Banana Pecan Pancake Breakfast
Country-Fried Steak & Eggs
T-Bone Steak & Eggs
OMELETTES & SKILLETSOMELETTES & SKILLETS FAVORITESFAVORITES
Meat Lover’s Omelette
Grilled prime rib, crumbled chorizo sausage, bacon,
fire-roasted bell peppers and onions, and Cheddar cheese
covered with Pepper Jack queso.
Ham & Cheese Omelette
Diced ham, melted Swiss and American cheeses.
Philly Cheesesteak Omelette
Grilled prime rib, fire-roasted bell peppers and onions,
sautéed mushrooms and melted Swiss cheese.
Loaded Veggie Omelette
Fresh spinach, mushrooms, sautéed zucchini and squash,
diced tomatoes and melted Swiss cheese.
Ultimate Omelette®
Crumbled sausage, bacon, fire-roasted bell peppers and
onions, mushrooms, diced tomatoes and shredded
Cheddar cheese.
Over 20g of protein
when you choose egg whites, seasonal fruit and an English muffin as your side choices
Under 15g of fat
Start your day off
right with a large,
refreshing glass of
Minute Maid
®
Orange Juice.
Add toast
or tortillas
to any skillet
pancake Puppies®
Add six delicious bite-sized round
pancakes rolled in cinnamon sugar
and served with warm syrup.
*Eggs servedover-easy, poached, sunny-side-up
or soft-boiledandsteaksthatareservedrare or
medium-raremaybeundercookedandwill onlybe
servedupontheconsumers’ request.
NOTICE: Consuming raworundercookedmeats,
poultry,seafood,shellfish oreggs mayincrease your
riskoffoodborne illness, especiallyifyouhavecertain
medicalconditions.
CAUTION: Skillets are hot. Handle with care.
Fit Fare®
Veggie Skillet
Seasoned red-skinned potatoes, fire-roasted bell peppers and
onions, mushrooms and broccoli topped with two egg whites
scrambled with spinach and grape tomatoes. Served with a side
of salsa.
Ultimate Skillet
Grilled sausage, fresh spinach, fire-roasted bell peppers and
onions, mushrooms, grape tomatoes and seasoned red-skinned
potatoes. Topped with Cheddar cheese and two eggs.*
Hearty Breakfast Skillet
A hearty breakfast sausage with seasoned red-skinned potatoes,
sautéed mushrooms and fire-roasted bell peppers and onions.
Topped with shredded Cheddar cheese and two eggs.*
Under 550 calories
Cinnamon Pancake Breakfast
Cinnamon sauce and cream cheese icing drizzled over two
buttermilk pancakes. Served with two eggs* and hash browns,
plus your choice of two strips of bacon or two sausage links
and a side of warm syrup.
Red-Skinned Potatoes
Hash Browns
Cheddar Cheese
Hash Browns
Everything Hash Browns
(Onions, Cheddar cheese
& country gravy)
Grits (6 am - 2 pm only)
Oatmeal (6 am - 2 pm only)
Yogurt
Seasonal Fruit
(Selection may vary.)
Bacon Strips (4)
Turkey Bacon Strips (4)
Sausage Links (4)
Hearty Breakfast
Sausage (1)
Chicken Sausage
Patties (2)
Grilled Ham Slice
Eggs* (Each)
Slices of Toast (2)
Buttermilk Biscuits (2)
English Muffin
Moons Over My Hammy®
Our classic ham and scrambled egg sandwich with
Swiss and American cheeses on grilled sourdough.
Served with hash browns.
T-Bone Steak* & Eggs*
A tender 13 oz. seasoned T-Bone steak* served with two eggs,*
hash browns and choice of bread.
Country-Fried Steak
& Eggs*
A golden-fried chopped beef steak smothered
in rich country gravy. Served with two eggs,*
hash browns and choice of bread.
Peanut Butter Cup
Pancake Breakfast
Chocolate chips and white chocolate chips inside two
buttermilk pancakes, topped with hot fudge and drizzled with
peanut butter sauce. Served with two eggs* and hash browns,
plus your choice of two strips of bacon or two sausage links and
a side of warm syrup.
Banana Pecan Pancake Breakfast
Glazed pecans cooked inside two hearty wheat pancakes and
topped with fresh banana slices. Served with two scrambled egg
whites, two strips of turkey bacon and a side of warm syrup.
Blueberry Pancake Breakfast
Juicy blueberries cooked inside two buttermilk pancakes.
Served with two eggs* and hash browns, plus your choice
of two strips of bacon or two sausage links and a side
of warm syrup.
Under 15g of fat Over 8g of fiber
Over 20g of protein
Santa Fe Skillet
Crumbled chorizo sausage, fire-roasted bell peppers and onions,
mushrooms and seasoned red-skinned potatoes. Topped with
Cheddar cheese and two eggs.*
Under 550 calories
Hearty Breakfast Skillet
Fit Fare®
Veggie Skillet
Seasoned red-skinned potatoes, fire-roasted bell peppers and
onions, mushrooms and broccoli topped with two egg whites
scrambled with spinach and grape tomatoes. Served with a side
of salsa.
Over 20g of protein
Santa Fe Skillet
Under 550 calories
T-Bone Steak & Eggs
pancake Puppies®
Add six delicious bite-sized round
pancakes rolled in cinnamon sugar
and served with warm syrup.
Moons Over My Hammy®
Our classic ham and scrambled egg sandwich withSwiss and American cheeses on grilled sourdough.Served with hash browns.

69. central kitchen may 7, 2015
DUCK BREAST & CONFIT
smoked foie gras. pickled ramps.
33
LAMB ROAST
garbanzo. chermoula. snow peas.
35
KING SALMON
artichoke. borage. fiddleheads.
32
PORCHETTA for two
pickles. condiments. relishes.
80
CHICKPEA PANISSE
yogurt. sunflower seed.
cilantro.
8
LIVER MOUSSE
hazelnut. cherry gelée.
11
PORK COUNTRY PÂTÉ
avocado. horseradish.
12
THREE CHEESES*
lavosh. rhubarb jam. walnut.
18
LET THE KITCHEN DECIDE
75/per person
BEVERAGE pairing
45/per person
bread upon request
*consumption of raw or undercooked meat, poultry, fish, shellfish or eggs may increase risk of food-borne illness
a 4.5% SF mandate restaurant charge allows us to provide health benefits for our staff
FENNEL & STRAWBERRY
fresh ricotta. pistachio.
13
WAGYU BEEF TARTARE
grilled sourdough. anchovy. nasturtium.
17
OCTOPUS TERRINE
peas. miso. basil.
18
CHARRED ASPARAGUS
trout roe. spring onion. pullet egg.
18
PORCINI SPAGHETTI
speck. morels. ramp greens.
22
PORK AGNOLOTTI
fava bean. preserved lime.
21
JOIN US FOR SUNDAY BRUNCH
10:30AM – 2:00PM
smoked foie gras. pickled ramps.
33
LAMB ROAST
garbanzo. chermoula. snow peas.
35
KING SALMON
artichoke. borage. fiddleheads.
32
PORCHETTA for two
pickles. condiments. relishes.
80
F
fresh ricotta. pistachio.
13
WAGYU BEEF TARTARE
grilled sourdough. anchovy. nasturtium.
17
OCTOPUS TERRINE
peas. miso. basil.
18
CHARRED ASPARAGUS
trout roe. spring onion. pullet egg.
18
PORCINI SPAGHETTI
speck. morels. ramp greens.
ar
p
PORK COUNTRY PÂTÉ
avocado. horseradish.
12
THREE CHEESES*
lavosh. rhubarb jam. walnut.
18
LET THE KITCHEN DECIDE
75/per person
BEVERAGE pairing
45/per person
OCTOPUS TERRINE
peas. miso. basil.
18
CHARRED ASPARAGUS
trout roe. spring onion. pullet egg.
18
PORCINI SPAGHETTI
speck. morels. ramp greens.
22
PORK AGNOLOTTI
fava bean. preserved lime.
21
JOIN US FOR SUNDAY BRUNCH
10:30AM – 2:00PM

70. Skillets served sizzlin’ hot.
Three-egg omelettes are served with
hash browns and choice of bread.
NEW!
pancakes
Sides
Philly Cheesesteak Omelette
Hearty Breakfast Skillet
Santa Fe Skillet
Cinnamon Pancake Breakfast
Banana Pecan Pancake Breakfast
Country-Fried Steak & Eggs
T-Bone Steak & Eggs
OMELETTES & SKILLETS
OMELETTES & SKILLETS FAVORITESFAVORITES
Meat Lover’s Omelette
Grilled prime rib, crumbled chorizo sausage, bacon,
fire-roasted bell peppers and onions, and Cheddar cheese
covered with Pepper Jack queso.
Ham & Cheese Omelette
Diced ham, melted Swiss and American cheeses.
Philly Cheesesteak Omelette
Grilled prime rib, fire-roasted bell peppers and onions,
sautéed mushrooms and melted Swiss cheese.
Loaded Veggie Omelette
Fresh spinach, mushrooms, sautéed zucchini and squash,
diced tomatoes and melted Swiss cheese.
Ultimate Omelette®
Crumbled sausage, bacon, fire-roasted bell peppers and
onions, mushrooms, diced tomatoes and shredded
Cheddar cheese.
Over 20g of protein
when you choose egg whites, seasonal fruit and an English muffin as your side choicesUnder 15g of fat
Start your day off
right with a large,
refreshing glass of
Minute Maid
®
Orange Juice.
Add toast
or tortillas
to any skillet
pancake Puppies®
Add six delicious bite-sized round
pancakes rolled in cinnamon sugar
and served with warm syrup.
*Eggsservedover-easy, poached,sunny-side-up
orsoft-boiledandsteaksthatareservedrareor
medium-raremaybeundercookedandwillonlybe
servedupontheconsumers’ request.
NOTICE: Consumingraworundercookedmeats,
poultry,seafood,shellfishoreggsmayincreaseyour
riskoffoodborneillness,especiallyifyouhavecertain
medicalconditions.
CAUTION: Skillets are hot. Handle with care.
Fit Fare® Veggie Skillet
Seasoned red-skinned potatoes, fire-roasted bell peppers and
onions, mushrooms and broccoli topped with two egg whites
scrambled with spinach and grape tomatoes. Served with a side
of salsa.
Ultimate Skillet
Grilled sausage, fresh spinach, fire-roasted bell peppers and
onions, mushrooms, grape tomatoes and seasoned red-skinned
potatoes. Topped with Cheddar cheese and two eggs.*
Hearty Breakfast Skillet
A hearty breakfast sausage with seasoned red-skinned potatoes,
sautéed mushrooms and fire-roasted bell peppers and onions.
Topped with shredded Cheddar cheese and two eggs.*
Under 550 calories
Cinnamon Pancake Breakfast
Cinnamon sauce and cream cheese icing drizzled over two
buttermilk pancakes. Served with two eggs* and hash browns,
plus your choice of two strips of bacon or two sausage links
and a side of warm syrup.
Red-Skinned Potatoes
Hash Browns
Cheddar Cheese
Hash Browns
Everything Hash Browns
(Onions, Cheddar cheese
& country gravy)
Grits (6 am - 2 pm only)
Oatmeal (6 am - 2 pm only)
Yogurt
Seasonal Fruit
(Selection may vary.)
Bacon Strips (4)
Turkey Bacon Strips (4)
Sausage Links (4)
Hearty Breakfast
Sausage (1)
Chicken Sausage
Patties (2)
Grilled Ham Slice
Eggs* (Each)
Slices of Toast (2)
Buttermilk Biscuits (2)
English Muffin
Moons Over My Hammy®
Our classic ham and scrambled egg sandwich with
Swiss and American cheeses on grilled sourdough.
Served with hash browns.
T-Bone Steak* & Eggs*
A tender 13 oz. seasoned T-Bone steak* served with two eggs,*
hash browns and choice of bread.
Country-Fried Steak
& Eggs*
A golden-fried chopped beef steak smothered
in rich country gravy. Served with two eggs,*
hash browns and choice of bread.
Peanut Butter Cup
Pancake Breakfast
Chocolate chips and white chocolate chips inside two
buttermilk pancakes, topped with hot fudge and drizzled with
peanut butter sauce. Served with two eggs* and hash browns,
plus your choice of two strips of bacon or two sausage links and
a side of warm syrup.
Banana Pecan Pancake Breakfast
Glazed pecans cooked inside two hearty wheat pancakes and
topped with fresh banana slices. Served with two scrambled egg
whites, two strips of turkey bacon and a side of warm syrup.
Blueberry Pancake Breakfast
Juicy blueberries cooked inside two buttermilk pancakes.
Served with two eggs* and hash browns, plus your choice
of two strips of bacon or two sausage links and a side
of warm syrup.
Under 15g of fat Over 8g of fiberOver 20g of protein
Santa Fe Skillet
Crumbled chorizo sausage, fire-roasted bell peppers and onions,
mushrooms and seasoned red-skinned potatoes. Topped with
Cheddar cheese and two eggs.*
Under 550 calories
central kitchen
may 7, 2015
DUCK BREAST & CONFIT
smoked foie gras. pickled ramps.
33
LAMB ROAST
garbanzo. chermoula. snow peas.
35
KING SALMON
artichoke. borage. fiddleheads.
32
PORCHETTA for two
pickles. condiments. relishes.
80
CHICKPEA PANISSE
yogurt. sunflower seed.
cilantro.
8
LIVER MOUSSE
hazelnut. cherry gelée.
11
PORK COUNTRY PÂTÉ
avocado. horseradish.
12
THREE CHEESES*
lavosh. rhubarb jam. walnut.
18
LET THE KITCHEN DECIDE
75/per person
BEVERAGE pairing
45/per person
bread upon request
*consumption of raw or undercooked meat, poultry, fish, shellfish or eggs may increase risk of food-borne illnessa 4.5% SF mandate restaurant charge allows us to provide health benefits for our staff
FENNEL & STRAWBERRY
fresh ricotta. pistachio.
13
WAGYU BEEF TARTARE
grilled sourdough. anchovy. nasturtium.
17
OCTOPUS TERRINE
peas. miso. basil.
18
CHARRED ASPARAGUS
trout roe. spring onion. pullet egg.
18
PORCINI SPAGHETTI
speck. morels. ramp greens.
22
PORK AGNOLOTTI
fava bean. preserved lime.
21
JOIN US FOR SUNDAY BRUNCH
10:30AM – 2:00PM

74. Sentinel
Gotham
Proxima Nova

75. FontFace Ninja
www.fontface.ninja

76. FontFace Ninja
www.fontface.ninja

78. WhatTheFont
www.myfonts.com/WhatTheFont

79. www.typecast.com/preview/google
Typecast

80. File formats

81. PostScript
.PS
Developed by Adobe
Released in 1984
TrueType
.TTF
Developed by Apple (and Microsoft later)
Released in 1991 (Mac OS 7)
(cubic bézier) (quadratic bézier)

85. OpenType
.OTF
Developed by Microsoft and Adobe
Released 1997

86. wafflewaf lef

87. k � � � �

88. 1234567890
1234567890
TABULAR/LINING
OLD STYLE
1234567890
1234567890

89. css-tricks.com/snippets/css/using-font-face

90. Web Open Font FormatWOFF
Developed by Mozilla, Opera and Microsoft
1.0 spec released to W3C in 2010
All major browsers!
Scalable Vector GraphicsSVG
Developed by W3C
Released in 2001
Webkit ONLY (Safari & Mobile Safari)
Ŏ
Embedded OpenTypeEOT
Developed by Microsoft
Released in 2007 (and rejected by W3C)
Internet Explorer ONLYŏŏ
TrueTypeTTF
Developed by Apple
Released in 1991 (Mac OS 7)
All major browsers!Ŏ

91. Licensing

92. Subscription Pay as you go
‣ $50–120/year
‣ often include monthly pageview limits
‣ convenience and flexibility
‣ fonts hosted on their servers
‣ $35–55 per style
‣ 250,000 pageviews (and up)
‣ when you know exactly what you need
‣ option to host fonts yourself

93. Hamburgefonstiv
Hamburgefonstiv
Hamburgefonstiv
Hamburgefonstiv
Hamburgefonstiv
Hamburgefonstiv
Hamburgefonstiv
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890
Proxima Nova
Meta
Meta Serif
Adelle
Tisa
Futura
Minion

94. Hamburgefonstiv
Hamburgefonstiv
Hamburgefonstiv
Hamburgefonstiv
Hamburgefonstiv
Hamburgefonstiv
Hamburgefonstiv
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890Sentinel
Whitney
Gotham
Archer
Gotham Narrow
Forza
Vitesse

95. HamburgefonstivOpen Sans
HamburgefonstivSource Sans Pro
HamburgefonstivFira Sans
HamburgefonstivPT Serif
HamburgefonstivLato
HamburgefonstivDroid Serif
HamburgefonstivRoboto
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890
Source on Github!
Source on Github!
Fonts

96. ‣to involve others in your font project
‣to enable your fonts to be expanded
with new weights and improved writing
system/language support
‣to allow your font to be included
in Libre Software operating systems
like Ubuntu
‣to educate students about
quality typeface and font design
‣to expand your test base and
get more useful feedback
‣to give back and contribute
to a growing body of font sources
http://scripts.sil.org/OFL
SIL OPEN FONT LICENSE

97. 100daysoffonts.com

98. 100daysoffonts.com

99. 100daysoffonts.com

100. 100daysoffonts.com

101. The League of
Moveable Type
www.theleagueofmoveabletype.com

103. The -ilities

104. ReadabilityLegibility
Usability Accessibility

105. Legibility

106. (Wolves in the Throne Room)

107. (Borknagar)

108. (Dark Throne)

109. milliliter
milliliter
milliliter
milliliter
milliliter
milliliter
thomasbyttebier.be/blog/the-best-ui-typeface-goes-unnoticed

110. Readability
https://flic.kr/p/djgWR8

111. A visual mind is interested in anything that you see, and a literary mind is interested in anything you think. A literary mind is interested in people. A visual mind is
interested in things, objects, nature. This doesn’t mean that you look and don’t think. Of course, you do that, too. But a literary mind is more prone to thinking than
looking visually. They like to read. They like to analyze things from a psychological point of view. Writers like this write about isolation, and some write about being
together. Each one investigates one action of the mind. And the mind, being as complex as it is, is an endless source of investigation.
A visual mind is interested in anything that you see, and a literary mind is
interested in anything you think. A literary mind is interested in people. A visual
mind is interested in things, objects, nature. This doesn’t mean that you look and
don’t think. Of course, you do that, too. But a literary mind is more prone to
thinking than looking visually. They like to read. They like to analyze things from
a psychological point of view. Writers like this write about isolation, and some
write about being together. Each one investigates one action of the mind. And
the mind, being as complex as it is, is an endless source of investigation.
Can you even read this bro?

112. Text size
Leading/line spacing
Line length
Text contrast
Text alignment
Vocabulary/syntax
KEY FACTORS

113. Usability

114. https://flic.kr/p/5cUMt9

115. Accessibility

116. “The power of the Web is in its universality.
Access by everyone regardless of disability
is an essential aspect.”
Tim Berners-Lee
W3C Director and inventor
of the World Wide Web

117. webaim.org/resources/contrastchecker
Although stylish, this
one is probably more
difficult to read than
the text on the right,
even if you have
good eyesight.
There’s probably
someone in this room
right now with worse
eyesight than you and
they deserve to read
things too!
3.34 : 1 7.6 : 1

118. Accessibility supports social inclusion for
people with disabilities as well as others,
such as older people, people in rural areas,
and people in developing countries.
www.w3.org/standards/webdesign/accessibility

119. Typography
on the web

123. If you take away all of
the text on a website…

132. Typography
in gaming

133. Higher resolution screens mean
higher quality typography.

134. NES 256x240 SNES 512x448 (max) N64 640x480 (max)

135. NES SNES N64256x240 512x448 (max) 640x480 (max)

146. Type is all around you.