Web Typography Fundamentals
- 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 ?
- 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
- 15. ‘Typography has one plain duty before it and
that is to convey information in writing.’
Emil Ruder
- 20. Author’s Reader’s
Conceptual Conceptual
Structure Structure
- 22. Designer
Author’s Reader’s
Conceptual Conceptual
Structure Structure
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
- 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
- 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
- 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
- 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.
- 82. M I C RO T Y P O G R A P H Y
- 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
- 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
- 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
- 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.
- 118. Y O U C A N S PA C E C A P S
- 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
- 133. <h#> <blockquote> <ul> <ol>
<q> <cite> <address> <dl> <em>
- 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