![Page 1: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/1.jpg)
Web Typography Sucks
Richard RutterMark Boulton
![Page 2: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/2.jpg)
typography /tʌɪ'pɒgrəfi/ •n. the art or process of setting and arranging types and printing from them. the style and appearance of printed matter. 2
Oxford English Dictionary
![Page 3: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/3.jpg)
typography /tʌɪ'pɒgrəfi/ •n. the mechanical notation and arrangementof language.
Type & Typography by Phil Baines
![Page 4: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/4.jpg)
6'10"50°49'33"
![Page 5: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/5.jpg)
6'10"50°49'33"
![Page 6: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/6.jpg)
6'10"50°49'33"
![Page 7: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/7.jpg)
"It's a bloody aardvark!"
![Page 8: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/8.jpg)
“It’s a bloody aardvark!”
![Page 9: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/9.jpg)
- 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
![Page 10: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/10.jpg)
![Page 11: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/11.jpg)
![Page 12: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/12.jpg)
![Page 13: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/13.jpg)
www.alistapart.com/articles/emen
![Page 14: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/14.jpg)
“ opening double quote “” closing double quote ”‘ opening single quote ‘’ closing single quote ’– en dash –— em dash —− minus −× multiplication ×… ellipsis …
![Page 15: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/15.jpg)
D O W N L O A D
SmartyPants 1.5.1 (20 KB) — Fri 12 Mar 2004
What’s new?
D E S C R I P T I O N
SmartyPants is a free web publishing plug-in for Movable Type, Blosxom,
and BBEdit that easily translates plain ASCII punctuation characters into
“smart” typographic punctuation HTML entities.
SmartyPants can perform the following transformations:
B y J O H N G R U B E R
A R C H I V E S
P R O J E C T S
L I N K E D L I S T
M E M B E R S H I P
C O N T A C T
C O L O P H O N
![Page 16: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/16.jpg)
& & & & &
![Page 17: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/17.jpg)
5.1.3 In heads and titles usethe best available ampersand
Elements of Typographic Style by Robert Bringhurst
![Page 18: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/18.jpg)
&
![Page 19: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/19.jpg)
{ H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A C T
Hand-crafted pixels & text.SimpleBits is a tiny web design studio founded by
designer and author Dan Cederholm. We create simple,
readable interfaces balanced with a standards-based
methodology. Learn more
Planet Microformats
A giant master feed of anything and everything tagged with “microformats”
from Brian Suda. {02.20.07}
Web Directions North
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
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
L A T E S T F E A T U R E D W O R K
MTV.com
XHTML/CSS development
Cork’d
Creative Director
TravelPost.com
Logo + interface design
S P E A K I N G E V E N T S
SXSW Interactive
March 9-13, 2007 ~ Austin, TX
An Event Apart Boston
March 26-27, 2007 ~ Boston
@media 2007 (America)
May 24-25, 2007 ~ San Francisco
@media 2007 (Europe)
June 7-8, 2007 ~ London
R E C E N T N O T E B O O K A R T I C L E S & Q U I C K B I T S
www.simplebits.com
![Page 20: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/20.jpg)
![Page 21: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/21.jpg)
<h1>Hand-crafted pixels<span class="amp">&</span> text.</h1>
span.amp { font-family: "Goudy Old Style", "Palatino", "Book Antiqua", serif; font-style: italic; font-size: 110%; }
![Page 22: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/22.jpg)
≠
![Page 23: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/23.jpg)
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certainit’s not just imagining that light in the eastern sky. Unfortunately theeastern sky is off to port this morning. Yesterday it was starboard.Minerva has been sailing up and down the New England coast for thebetter part of a fortnight, trying to catch a wind that will decisively takeher out into deep water, or “off soundings,” as they say. They are probablynot more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot sothat he can look straight down and see Minerva’s wake being born in afoamy collision around the rudder. He opens a small hatch below awindow and drops out a Fahrenheit thermometer on a string. It is the verylatest in temperature measurement from Europe – Enoch presented it tohim as a sort of party favour. He lets it bounce through the surf for a fewminutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objectivebeing to see if there’s any rumour that the North Atlantic is striped withcurrents of warm water. He can present the data to the Royal Society ifGod-willing he reaches London.
Text taken from Quicksilver by Neal Stephenson.
† The forecastledeck is theshort deck that, towardsthe ship’s bow, is builtabove the upperdeck.
![Page 24: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/24.jpg)
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
![Page 25: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/25.jpg)
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
![Page 26: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/26.jpg)
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
![Page 27: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/27.jpg)
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
![Page 28: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/28.jpg)
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
![Page 29: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/29.jpg)
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
![Page 30: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/30.jpg)
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
![Page 31: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/31.jpg)
body { font-size: 12px; }
p { font-size: 1em; /* 12px */ line-height: 1.5em; /* 18px */ margin: 0 0 1.5em 0; }
line height: 18px ÷ 12px = 1.5em
![Page 32: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/32.jpg)
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
![Page 33: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/33.jpg)
h1 { font-size: 1.5em; /* 18px */ line-height: 1em; /* 18px */ margin: 0 0 1em 0; }
font size: 18px ÷ 12px = 1.5em line height: 18px ÷ 18px = 1em
![Page 34: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/34.jpg)
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
![Page 35: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/35.jpg)
.sidenote { font-size: 0.8333em; /* 10px */ line-height: 1.8em; /* 18px */ }
font size: 10px ÷ 12px = 0.8333emline height: 18px ÷ 10px = 1.8em
![Page 36: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/36.jpg)
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
![Page 37: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/37.jpg)
h2 { font-size: 1.1667em; line-height: 1.286em; margin-top: 1.929em; margin-bottom: 0.643em; }
font size: 14px ÷ 12px = 1.1667emline height: 18px ÷ 14px = 1.286em
top margin: 27px ÷ 14px = 1.929embot margin: 9px ÷ 14px = 0.643em
![Page 38: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/38.jpg)
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
![Page 39: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/39.jpg)
fi
![Page 40: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/40.jpg)
Text taken from The New Typography by Jan Tschichold
Component parts of letterheads
Besides the format, there are also standards for the placing
of the component parts of business letterheads.
The authority for all these standards is sheet 676: we
show examples for the following pages.
Standards exist for:
. 1 The position of the address
. 2 Position for receipt and treatment marks
. 3 Sequence and position for the main information
. 4 Sequence and position of firm’s particulars
. 5 Side margin of at least 20mm
A standardized letterhead, before it is written, often gives the
impression that not enough room has been left for the letter
itself.
DIN
D IN
Component parts of letterheadsBesides the format, there are also standards for the placingof the component parts of business letterheads.
The authority for all these standards is sheet 676: weshow examples for the following pages.Standards exist for:
. 1 The position of the address
. 2 Position for receipt and treatment marks
. 3 Sequence and position for the main information
. 4 Sequence and position of firm’s particulars
. 5 Side margin of at least 20mmA standardized letterhead, before it is written, often gives theimpression that not enough room has been left for the letteritself.
DIN
D IN
![Page 41: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/41.jpg)
Text taken from The New Typography by Jan Tschichold
Component parts of letterheads
Besides the format, there are also standards for the placingof the component parts of business letterheads.
The authority for all these standards is sheet 676: weshow examples for the following pages.
Standards exist for:. 1 The position of the address. 2 Position for receipt and treatment marks. 3 Sequence and position for the main information. 4 Sequence and position of firm’s particulars. 5 Side margin of at least 20mm
A standardized letterhead, before it is written, often gives theimpression that not enough room has been left for the letteritself.
DIN
D IN
![Page 42: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/42.jpg)
Text taken from The New Typography by Jan Tschichold
Component parts of letterheads
Besides the format, there are also standards for the placingof the component parts of business letterheads.
The authority for all these standards is sheet 676: weshow examples for the following pages.
Standards exist for:
. 1 The position of the address
. 2 Position for receipt and treatment marks
. 3 Sequence and position for the main information
. 4 Sequence and position of firm’s particulars
. 5 Side margin of at least 20mm
A standardized letterhead, before it is written, often gives theimpression that not enough room has been left for the letteritself.
DIN
D IN
![Page 43: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/43.jpg)
´
![Page 44: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/44.jpg)
![Page 45: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/45.jpg)
![Page 46: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/46.jpg)
![Page 47: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/47.jpg)
![Page 48: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/48.jpg)
![Page 49: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/49.jpg)
2
3
![Page 50: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/50.jpg)
![Page 51: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/51.jpg)
M1em
![Page 52: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/52.jpg)
2em
3em
![Page 53: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/53.jpg)
3em 3em 3em 3em 3em 3em
2em
2em
2em
2em
2em
2em
![Page 54: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/54.jpg)
7.5em
4.5em
![Page 55: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/55.jpg)
13.5em
9.5em
![Page 56: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/56.jpg)
![Page 57: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/57.jpg)
Indent or center verse quotations
When setting verse, whether on the web or otherwise, the primary concern is not to deprive it of its “chosen form”, including matters of spacing and visual structure
![Page 58: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/58.jpg)
Indent or center verse quotations
When setting verse, whether on the web or otherwise, the primary concern is not to deprive it of its “chosen form”, including matters of spacing and visual structure
![Page 59: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/59.jpg)
Indent or center verse quotations
When setting verse, whether on the web or otherwise, the primary concern is not to deprive it of its “chosen form”, including matters of spacing and visual structure
![Page 60: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/60.jpg)
body { font-family: verdana, arial, helvetica, sans-serif}
![Page 61: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/61.jpg)
VerdanaThe quick brown fox jumps over a lazy dog.
The quick brown fox jumps over a lazy dog.Arial
![Page 62: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/62.jpg)
Frutiger 0123abcdefigHJKlUnivers 0123abcdefigHJKl
Helvetica Neue 0123abcdefigHJKlm
Arial 0123abcdefigHJKlm
![Page 63: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/63.jpg)
body { font-family: “Frutiger”, “Univers”, “Helvetica Neue”, arial, helvetica, sans-serif;}
![Page 64: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/64.jpg)
Align corporate typefacesAlign corporate typefaces
![Page 65: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/65.jpg)
Calibri 0123abcdefigHJKlmnopQRStu
Cambria 0123abcdefigHJKlmnopQRSCandara 0123abcdefigHJKlmnopQRS
Constantia 0123abcdefigHJKlmnopQRS
Corbel 0123abcdefigHJKlmnopQRSt
![Page 66: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/66.jpg)
1
H
2
He
3
Li
4
Be
5
B
6
C
7
N
8
O
9
F
10
Ne
11
Na
12
Mg
13
Al
14
Si
15
P
16
S
17
Cl
18
Ar
19
K
20
Ca
21
Sc
22
Ti
23
V
24
Cr
25
Mn
26
Fe
27
Co
28
Ni
29
Cu
30
Zn
31
Ga
32
Ge
33
As
34
Se
35
Br
36
Kr
37
Rb
38
Sr
39
Y
40
Zr
41
Nb
42
Mo
43
Tc
44
Ru
45
Rh
46
Pd
47
Ag
48
Cd
49
Ln
50
Sn
51
Sb
52
Te
53
I
54
Xe
55
Cs
56
Ba*
72
Hf
73
Ta
74
W
75
Re
76
Os
77
Ir
78
Pt
79
Au
80
Hg
81
Tl
82
Pb
83
Bi
84
Po
85
At
86
Rn
87
Fr
88
Ra**
104
Rf
105
Db
106
Sg
107
Bh
108
Hs
109
Mt
110
Ds
111
Rg
112
Uub
113
Uut
114
Uuq
115
Uup
116
Uuh
117
Uus
118
Uuo
![Page 67: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/67.jpg)
1
H
2
He
3
Li
4
Be
5
B
6
C
7
N
8
O
9
F
10
Ne
11
Na
12
Mg
13
Al
14
Si
15
P
16
S
17
Cl
18
Ar
19
K
20
Ca
21
Sc
22
Ti
23
V
24
Cr
25
Mn
26
Fe
27
Co
28
Ni
29
Cu
30
Zn
31
Ga
32
Ge
33
As
34
Se
35
Br
36
Kr
37
Rb
38
Sr
39
Y
40
Zr
41
Nb
42
Mo
43
Tc
44
Ru
45
Rh
46
Pd
47
Ag
48
Cd
49
Ln
50
Sn
51
Sb
52
Te
53
I
54
Xe
55
Cs
56
Ba*
72
Hf
73
Ta
74
W
75
Re
76
Os
77
Ir
78
Pt
79
Au
80
Hg
81
Tl
82
Pb
83
Bi
84
Po
85
At
86
Rn
87
Fr
88
Ra**
104
Rf
105
Db
106
Sg
107
Bh
108
Hs
109
Mt
110
Ds
111
Rg
112
Uub
113
Uut
114
Uuq
115
Uup
116
Uuh
117
Uus
118
Uuo
79Au
![Page 68: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/68.jpg)
1
H
2
He
3
Li
4
Be
5
B
6
C
7
N
8
O
9
F
10
Ne
11
Na
12
Mg
13
Al
14
Si
15
P
16
S
17
Cl
18
Ar
19
K
20
Ca
21
Sc
22
Ti
23
V
24
Cr
25
Mn
26
Fe
27
Co
28
Ni
29
Cu
30
Zn
31
Ga
32
Ge
33
As
34
Se
35
Br
36
Kr
37
Rb
38
Sr
39
Y
40
Zr
41
Nb
42
Mo
43
Tc
44
Ru
45
Rh
46
Pd
47
Ag
48
Cd
49
Ln
50
Sn
51
Sb
52
Te
53
I
54
Xe
55
Cs
56
Ba*
72
Hf
73
Ta
74
W
75
Re
76
Os
77
Ir
78
Pt
79
Au
80
Hg
81
Tl
82
Pb
83
Bi
84
Po
85
At
86
Rn
87
Fr
88
Ra**
104
Rf
105
Db
106
Sg
107
Bh
108
Hs
109
Mt
110
Ds
111
Rg
112
Uub
113
Uut
114
Uuq
115
Uup
116
Uuh
117
Uus
118
Uuo
47Ag
![Page 69: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/69.jpg)
1
H
2
He
3
Li
4
Be
5
B
6
C
7
N
8
O
9
F
10
Ne
11
Na
12
Mg
13
Al
14
Si
15
P
16
S
17
Cl
18
Ar
19
K
20
Ca
21
Sc
22
Ti
23
V
24
Cr
25
Mn
26
Fe
27
Co
28
Ni
29
Cu
30
Zn
31
Ga
32
Ge
33
As
34
Se
35
Br
36
Kr
37
Rb
38
Sr
39
Y
40
Zr
41
Nb
42
Mo
43
Tc
44
Ru
45
Rh
46
Pd
47
Ag
48
Cd
49
Ln
50
Sn
51
Sb
52
Te
53
I
54
Xe
55
Cs
56
Ba*
72
Hf
73
Ta
74
W
75
Re
76
Os
77
Ir
78
Pt
79
Au
80
Hg
81
Tl
82
Pb
83
Bi
84
Po
85
At
86
Rn
87
Fr
88
Ra**
104
Rf
105
Db
106
Sg
107
Bh
108
Hs
109
Mt
110
Ds
111
Rg
112
Uub
113
Uut
114
Uuq
115
Uup
116
Uuh
117
Uus
118
Uuo
29Cu
![Page 70: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/70.jpg)
1
H
2
He
3
Li
4
Be
5
B
6
C
7
N
8
O
9
F
10
Ne
11
Na
12
Mg
13
Al
14
Si
15
P
16
S
17
Cl
18
Ar
19
K
20
Ca
21
Sc
22
Ti
23
V
24
Cr
25
Mn
26
Fe
27
Co
28
Ni
29
Cu
30
Zn
31
Ga
32
Ge
33
As
34
Se
35
Br
36
Kr
37
Rb
38
Sr
39
Y
40
Zr
41
Nb
42
Mo
43
Tc
44
Ru
45
Rh
46
Pd
47
Ag
48
Cd
49
Ln
50
Sn
51
Sb
52
Te
53
I
54
Xe
55
Cs
56
Ba*
72
Hf
73
Ta
74
W
75
Re
76
Os
77
Ir
78
Pt
79
Au
80
Hg
81
Tl
82
Pb
83
Bi
84
Po
85
At
86
Rn
87
Fr
88
Ra**
104
Rf
105
Db
106
Sg
107
Bh
108
Hs
109
Mt
110
Ds
111
Rg
112
Uub
113
Uut
114
Uuq
115
Uup
116
Uuh
117
Uus
118
Uuo
6C
![Page 71: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/71.jpg)
ÿ
![Page 72: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/72.jpg)
It’s all our fault.
![Page 73: Web Typography Suckswebtypography.net/talks/sxsw2007/webtypography-sxsw2007.pdf · { H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A](https://reader033.vdocument.in/reader033/viewer/2022050101/5f3ff32e366e8b666156ad3f/html5/thumbnails/73.jpg)
Richard Rutter Clearleft.comMark Boulton Markboultondesign.com
http://webtypography.net/sxsw2007/