Presentation from Drupalcon Paris 2009.

1. Web Typography Fundamentals
Mark Boulton

2. 1. What is Typography?
2. Typographic Structure
3. Macro Typography
4. Micro Typography

3. W H AT I S T Y P O G R A P H Y ?

8. http://www.flickr.com/photos/guitavares/248157529/

10. A world of
Verdana and Arial

11. typography
1 the art or process of setting and arranging types and
printing from them. 2 the style and appearance of printed
matter. 2

12. typography
1 the mechanical notation and arrangement of language.

13. ...deciding which is best,
Verdana or Arial.

14. TYPOGRAPHIC STRUCTURE

15. ‘Typography has one plain duty before it and
that is to convey information in writing.’
Emil Ruder

16. Language is information

17. words → sentences
sentences → paragraphs
paragraphs → groupings
groupings → sections
sections → document

18. Documents have a
conceptual structure.

19. Author’s
Conceptual
Structure

20. Author’s Reader’s
Conceptual Conceptual
Structure Structure

21. Designer
Author’s Reader’s
Conceptual Conceptual
Structure Structure

22. Designer
Author’s Reader’s
Conceptual Conceptual
Structure Structure
Brand values
Art direction

23. Designer
MARK UP!
Brand values
Art direction

25. CAMP #4
CAMP #3
CAMP #2
CAMP #1
BASE CAMP

26. LAYOUT COLOUR CONTENT
HIERARCHY FONT RHYTHM
LANGUAGE TYPESETTING GRID

27. LANGUAGE

28. TYPESETTING

29. GRID

30. Heading 1
Heading 2
HIERARCHY
Heading 3
Designing in the browser is
‘web sites should good because:
not look the same • It’s quick to make changes
• It’s the right thing to do
in every browser’ • Malarkey will be chuffed

31. FONT

32. RHYTHM

33. LAYOUT

34. COLOUR

35. CONTENT

36. LAYOUT COLOUR CONTENT
HIERARCHY FONT RHYTHM
LANGUAGE TYPESETTING GRID

37. LAYOUT ATTRIBUTES
COLOUR CONTENT
HIERARCHY FORM
FONT RHYTHM
LANGUAGE FUNCTION
TYPESETTING GRID

38. LAYOUT COLOUR CONTENT
HIERARCHY FONT RHYTHM
LANGUAGE TYPESETTING GRID

41. COLOUR
LAYOUT CONTENT
HIERARCHY FONT RHYTHM
LANGUAGE GRID
TYPESETTING

42. COLOUR
LAYOUT CONTENT
HIERARCHY FONT
RHYTHM
LANGUAGE TYPESETTING GRID

43. LAYOUT COLOUR
RHYTHM
HIERARCHY
LANGUAGE TYPESETTING GRID

44. M AC RO T Y P O G R A P H Y

45. The big stuff

46. Creating spacial relationships

47. Golden Section

53. b
a

55. a b

56. a b

57. a a a

58. a a a

59. a a a

60. Grids

61. A way of organising stuff

62. Provide a visual language

63. Answer layout questions

69. Sign in • Register • Read today’s paper • Jobs
comment is free... Search
Home This week Contributors Subjects A-Z Editor’s blog Dan Chung Steve Bell About us Audio Webfeeds Other blogs
Blogs Editor’s picks
Space cadets
Dan Kennedy
05:00pm: Is seeing a UFO any
more crazy than believing God
Created the universe in six days> It
is if you are running to be
president of the United States.
Comments
A bankrupt hotchpotch
Ed Vaizey Nov 06 07, 04:40pm
The Queen’s speech: Big on
short-term tricks, and lacking in
long-term vision just about sums
up the government’s new
legislation
Comments State of emergency by Steve Bell
End of mutual respect If Ball wants better schools, he
Derek Wall Nov 06 07, 04:20pm
As the Respect party splits in two must scrap faith selection

70. Sign in • Register • Read today’s paper • Jobs
comment is free... Search
Home This week Contributors Subjects A-Z Editor’s blog Dan Chung Steve Bell About us Audio Webfeeds Other blogs
Blogs Editor’s picks
Space cadets
Dan Kennedy
05:00pm: Is seeing a UFO any
more crazy than believing God
Created the universe in six days> It
is if you are running to be
president of the United States.
Comments
A bankrupt hotchpotch
Ed Vaizey Nov 06 07, 04:40pm
The Queen’s speech: Big on
short-term tricks, and lacking in
long-term vision just about sums
up the government’s new
legislation
Comments State of emergency by Steve Bell
End of mutual respect If Ball wants better schools, he
Derek Wall Nov 06 07, 04:20pm
As the Respect party splits in two must scrap faith selection

75. Vertical Rhythm

76. Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
† The forecastledeck is the
it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards
eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built
Minerva has been sailing up and down the New England coast for the above the upperdeck.
better part of a fortnight, trying to catch a wind that will decisively take
her out into deep water, or “off soundings,” as they say. They are probably
not more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot so
that he can look straight down and see Minerva’s wake being born in a
foamy collision around the rudder. He opens a small hatch below a
window and drops out a Fahrenheit thermometer on a string. It is the very
latest in temperature measurement from Europe – Enoch presented it to
him as a sort of party favour. He lets it bounce through the surf for a few
minutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objective
being to see if there’s any rumour that the North Atlantic is striped with
currents of warm water. He can present the data to the Royal Society if
God-willing he reaches London.
Text taken from Quicksilver by Neal Stephenson.

77. Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
† The forecastledeck is the
it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards
eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built
Minerva has been sailing up and down the New England coast for the above the upperdeck.
better part of a fortnight, trying to catch a wind that will decisively take
her out into deep water, or “off soundings,” as they say. They are probably
not more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot so
that he can look straight down and see Minerva’s wake being born in a
foamy collision around the rudder. He opens a small hatch below a
window and drops out a Fahrenheit thermometer on a string. It is the very
latest in temperature measurement from Europe – Enoch presented it to
him as a sort of party favour. He lets it bounce through the surf for a few
minutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objective
being to see if there’s any rumour that the North Atlantic is striped with
currents of warm water. He can present the data to the Royal Society if
God-willing he reaches London.
Text taken from Quicksilver by Neal Stephenson.

78. Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
† The forecastledeck is the
it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards
eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built
Minerva has been sailing up and down the New England coast for the above the upperdeck.
better part of a fortnight, trying to catch a wind that will decisively take
her out into deep water, or “off soundings,” as they say. They are probably
not more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot so
that he can look straight down and see Minerva’s wake being born in a
foamy collision around the rudder. He opens a small hatch below a
window and drops out a Fahrenheit thermometer on a string. It is the very
latest in temperature measurement from Europe – Enoch presented it to
him as a sort of party favour. He lets it bounce through the surf for a few
minutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objective
being to see if there’s any rumour that the North Atlantic is striped with
currents of warm water. He can present the data to the Royal Society if
God-willing he reaches London.
Text taken from Quicksilver by Neal Stephenson.

79. Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the
it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards
eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built
Minerva has been sailing up and down the New England coast for the above the upperdeck.
better part of a fortnight, trying to catch a wind that will decisively take
her out into deep water, or “off soundings,” as they say. They are probably
not more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot so
that he can look straight down and see Minerva’s wake being born in a
foamy collision around the rudder. He opens a small hatch below a
window and drops out a Fahrenheit thermometer on a string. It is the very
latest in temperature measurement from Europe – Enoch presented it to
him as a sort of party favour. He lets it bounce through the surf for a few
minutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objective
being to see if there’s any rumour that the North Atlantic is striped with
currents of warm water. He can present the data to the Royal Society if
God-willing he reaches London.
Text taken from Quicksilver by Neal Stephenson.

80. Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the
it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards
eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built
Minerva has been sailing up and down the New England coast for the above the upperdeck.
better part of a fortnight, trying to catch a wind that will decisively take
her out into deep water, or “off soundings,” as they say. They are probably
not more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot so
that he can look straight down and see Minerva’s wake being born in a
foamy collision around the rudder. He opens a small hatch below a
window and drops out a Fahrenheit thermometer on a string. It is the very
latest in temperature measurement from Europe – Enoch presented it to
him as a sort of party favour. He lets it bounce through the surf for a few
minutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objective
being to see if there’s any rumour that the North Atlantic is striped with
currents of warm water. He can present the data to the Royal Society if
God-willing he reaches London.
Text taken from Quicksilver by Neal Stephenson.

81. Richard Rutter
http://24ways.org/2006/compose-to-a-vertical-
rhythm
Wilson Miner
http://www.alistapart.com/articles/
settingtypeontheweb

82. M I C RO T Y P O G R A P H Y

83. The little stuff

84. 10. Text numerals in tables

85. Barry Island 0533 0600 0600
Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Bridgend 0552 0620 0648

86. Text numerals like these—23, 48,
192 and 2096—belong in text
Lining numerals like these—23, 48,
192 and 2096—are better in tables.

87. Barry Island 0533 0600 0600
Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Bridgend 0552 0620 0648

88. 9. Framing

89. Barry Island 0533 0600 0600
Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Bridgend 0552 0620 0648

90. Barry Island 0533 0600 0600
Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Bridgend 0552 0620 0648

91. Barry Island 0533 0600 0600
Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Bridgend 0552 0620 0648

92. Barry Island 0533 0600 0600
Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Bridgend 0552 0620 0648

93. Barry Island 0533 0600 0600
Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Bridgend 0552 0620 0648

94. Barry Island 0533 0600 0600
Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Bridgend 0552 0620 0648

95. Barry Island 0533 0600 0600
Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Bridgend 0552 0620 0648

96. Framing navigation

97. Schedule
Community
Practical
Partners

98. Schedule
Community
Practical
Partners

99. Schedule
Community
Practical
Partners

100. Schedule
Community
Practical
Partners

101. 8. Ampersands in titles

102. HEADINGS & SUBHEADINGS

103. {HOME} NOTEBOOK WORK PUBLICATIONS ICON SHOP ABOUT CONTACT
LATEST FEATURED WORK
Hand-crafted pixels & text. MTV.com
SimpleBits is a tiny web design studio founded by XHTML/CSS development
designer and author Dan Cederholm. We create simple,
readable interfaces balanced with a standards-based Cork’d
Creative Director
methodology. Learn more
TravelPost.com
Logo + interface design
RECENT NOTEBOOK ARTICLES & QUICKBITS
SPEAKING EVENTS
Planet Microformats
A giant master feed of anything and everything tagged with “microformats” SXSW Interactive
from Brian Suda. {02.20.07} March 9-13, 2007 ~ Austin, TX
An Event Apart Boston
March 26-27, 2007 ~ Boston
Web Directions North @media 2007 (America)
May 24-25, 2007 ~ San Francisco
I’ve returned from several days in Vancouver, and the first-ever Web
Directions North. It was a great trip, a great conference, and my second @media 2007 (Europe)
June 7-8, 2007 ~ London
attempt at snowboarding in the last 20 years.
I’ll first say congrats to Maxine, John, Dave and
Derek for putting on what was an oustanding
www.simplebits.com

105. <h1>Hand-crafted pixels
<span class="amp">&amp;</span> text.</h1>
span.amp {
font-family: "Goudy Old Style",
"Palatino", "Book Antiqua", serif;
font-style: italic;
font-size: 110%;
}

106. 7. Too many typefaces

107. Mix Sans Serif
and Serif typefaces

108. Georgia Headings
Verdana body

109. Georgia Headings
Times Body

110. 6. Typesetting lists

111. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Praesent pharetra feugiat
nulla. Mauris eget purus. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit.
• Barry Island
• Rhoose
• Llantwit Major
• Bridgend
Nullam ac turpis. Curabitur ut nisl eget nulla
molestie suscipit. Phasellus nibh purus,
posuere in, suscipit ac, pharetra ac, ligula.

112. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Praesent pharetra feugiat
nulla. Mauris eget purus. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit.
• Barry Island
• Rhoose
• Llantwit Major
• Bridgend
Nullam ac turpis. Curabitur ut nisl eget nulla
molestie suscipit. Phasellus nibh purus,
posuere in, suscipit ac, pharetra ac, ligula.

113. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Praesent pharetra feugiat
nulla. Mauris eget purus. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit.
• Barry Island
• Rhoose
• Llantwit Major
• Bridgend
Nullam ac turpis. Curabitur ut nisl eget nulla
molestie suscipit. Phasellus nibh purus,
posuere in, suscipit ac, pharetra ac, ligula.

114. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Praesent pharetra feugiat
nulla. Mauris eget purus. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit.
• Barry Island
• Rhoose
• Llantwit Major
• Bridgend
Nullam ac turpis. Curabitur ut nisl eget nulla
molestie suscipit. Phasellus nibh purus,
posuere in, suscipit ac, pharetra ac, ligula.

115. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Praesent pharetra feugiat
nulla. Mauris eget purus. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit.
• Barry Island
• Rhoose
• Llantwit Major
• Bridgend
Nullam ac turpis. Curabitur ut nisl eget nulla
molestie suscipit. Phasellus nibh purus,
posuere in, suscipit ac, pharetra ac, ligula.

116. 5. Incorrect letterspacing

117. Never negatively space lowercase

118. Y O U C A N S PA C E C A P S

119. 4. The wrong quotation marks

120. ' "

121. 6'10"

122. "It's a bloody
aardvark!"

123. “It’s a bloody
aardvark!”

124. “”

125. 3. Hyphens instead of dashes

126. Hyphens are not dashes

127. Britain’s workers improve their
lives - by doing nothing

128. Britain’s workers improve their
lives -- by doing nothing

129. Britain’s workers improve their
lives—by doing nothing

130. Britain’s workers improve their
lives – by doing nothing

131. - hyphen Müller-Brockmann
– en dash 3–6 April; 25–30 mm
a phrase marker – thus – with spaces
— em dash a phrase marker—thus—with no spaces
— Doesn’t sound much like a bee to me.
— It’s a bloody aardvark!
− minus 4−1=3

132. 2. Incorrect markup

133. <h#> <blockquote> <ul> <ol>
<q> <cite> <address> <dl> <em>

134. 1. Sticking to what you know

135. body {
font-family: Verdana,
Arial, sans-serif;
}

136. body {
font: 1em/1.4 Cambria, "Lucida Fax",
"Palatino Linotype", "Hoefler Text",
Rockwell, Serifa, Baskerville, "Lucida
Sans", Georgia, "Trebuchet MS", "Bitstream
Vera Serif", serif;
}
Styles from Joe Clark’s weblog (http://fawny.org/blog/)

137. /* Headings */
h1, h1 a.permalink:link, h1
a.permalink:visited
{
font-family:
Zapfino, "Zapfino One", "Zapfino Two",
"Zapfino Three",
"Apple Chancery",
"Segoe Script",
"Lucida Handwriting",
"Lucida Calligraphy",
"Caflisch Script",
"Poetica",
Styles from Joe Clark’s weblog (http://fawny.org/blog/)

138. "Sanvito",
"Ex Ponto",
"Snell Roundhand",
"Nuptial Script",
"Palace Script",
"Park Avenue",
"Poetica",
"Shelley",
"Kaufmann",
"Zapf Chancery",
"Zapf Chancery Medium Italic",
"ITC Zapf Chancery",
"ITC Zapf Chancery Medium Italic",
Styles from Joe Clark’s weblog (http://fawny.org/blog/)

139. "Monotype Corsiva",
Corsiva,
"Zurich Calligraphic",
"Chancery",
Sand,
Textile,
Mead,
Script,
"URW Chancery L",
"URW Chancery L Medium Italic",
cursive;
}
Styles from Joe Clark’s weblog (http://fawny.org/blog/)

140. Watch out for:
HTML 5
Maybe. Eventually. One day.
CSS3
Maybe. Eventually. One day.
@font-face
Maybe. Eventually. One day.
It’s already happening: Fontdeck, Typekit.

141. ‘...It is not surface, it is not an extra, it is the
thing itself’
Stephen Fry

142. Thank you
markboulton.co.uk markboultondesign.com twitter.com/markboulton