Upload
markboultondesign
View
1.624
Download
4
Tags:
Embed Size (px)
DESCRIPTION
Presentation from Drupalcon Paris 2009.
Citation preview
Web Typography FundamentalsMark Boulton
1. What is Typography?
2. Typographic Structure
3. Macro Typography
4. Micro Typography
W H A T I S T Y P O G R A P H Y ?
http://www.flickr.com/photos/guitavares/248157529/
A world of Verdana and Arial
typography1 the art or process of setting and arranging types and printing from them. 2 the style and appearance of printed matter. 2
typography1 the mechanical notation and arrangement of language.
...deciding which is best, Verdana or Arial.
T Y P O G R A P H I C S T R U C T U R E
‘Typography has one plain duty before it and that is to convey information in writing.’
Emil Ruder
Language is information
words → sentencessentences → paragraphsparagraphs → groupings
groupings → sectionssections → document
Documents have a conceptual structure.
Author’sConceptual
Structure
Author’sConceptual
Structure
Reader’sConceptual
Structure
Designer
Author’sConceptual
Structure
Reader’sConceptual
Structure
Designer
Author’sConceptual
Structure
Reader’sConceptual
Structure
Brand valuesArt direction
Designer
Brand valuesArt direction
M A R K U P !
BASE CAMP
CAMP #1
CAMP #2
CAMP #3
CAMP #4
LAYOUT COLOUR CONTENT
HIERARCHY FONT RHYTHM
LANGUAGE TYPESETTING GRID
LANGUAGE
TYPESETTING
GRID
HIERARCHY
Heading 1Heading 2
Heading 3
‘web sites should not look the same in every browser’
Designing in the browser is good because:
• It’s quick to make changes
• It’s the right thing to do
• Malarkey will be chuffed
FONT
RHYTHM
LAYOUT
COLOUR
CONTENT
LAYOUT COLOUR CONTENT
HIERARCHY FONT RHYTHM
LANGUAGE TYPESETTING GRID
LAYOUT COLOUR CONTENT
HIERARCHY FONT RHYTHM
LANGUAGE TYPESETTING GRIDFUNCTION
FORM
ATTRIBUTES
LAYOUT COLOUR CONTENT
HIERARCHY FONT RHYTHM
LANGUAGE TYPESETTING GRID
LAYOUTCOLOUR
CONTENT
HIERARCHY RHYTHM
LANGUAGETYPESETTING
GRID
FONT
LAYOUT COLOURCONTENT
HIERARCHYRHYTHM
LANGUAGE TYPESETTING GRID
FONT
LAYOUT COLOUR
HIERARCHYRHYTHM
LANGUAGE TYPESETTING GRID
M A C R O T Y P O G R A P H Y
The big stuff
Creating spacial relationships
Golden Section
a
b
a b
a b
a a a
a a a
a a a
Grids
A way of organising stuff
Provide a visual language
Answer layout questions
Editor’s picksBlogs
Home This week Contributors Subjects A-Z Editor’s blog Dan Chung Steve Bell About us Audio Webfeeds Other blogs
Sign in • Register • Read today’s paper • Jobs
Searchcomment is free...
Space cadets
Dan Kennedy05:00pm: Is seeing a UFO anymore crazy than believing GodCreated the universe in six days> Itis if you are running to bepresident of the United States.Comments
Ed Vaizey Nov 06 07, 04:40pmThe Queen’s speech: Big onshort-term tricks, and lacking inlong-term vision just about sumsup the government’s new legislationComments
A bankrupt hotchpotch
End of mutual respect
Derek Wall Nov 06 07, 04:20pmAs the Respect party splits in two
State of emergency by Steve Bell
If Ball wants better schools, hemust scrap faith selection
Editor’s picksBlogs
Sign in • Register • Read today’s paper • Jobs
Searchcomment is free...
Space cadets
Dan Kennedy05:00pm: Is seeing a UFO anymore crazy than believing GodCreated the universe in six days> Itis if you are running to bepresident of the United States.Comments
Ed Vaizey Nov 06 07, 04:40pmThe Queen’s speech: Big onshort-term tricks, and lacking inlong-term vision just about sumsup the government’s new legislationComments
A bankrupt hotchpotch
End of mutual respect
Derek Wall Nov 06 07, 04:20pmAs the Respect party splits in two
State of emergency by Steve Bell
If Ball wants better schools, hemust scrap faith selection
Home This week Contributors Subjects A-Z Editor’s blog Dan Chung Steve Bell About us Audio Webfeeds Other blogs
Vertical Rhythm
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.
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.
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.
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.
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.
Richard Rutterhttp://24ways.org/2006/compose-to-a-vertical-rhythm
Wilson Minerhttp://www.alistapart.com/articles/settingtypeontheweb
M I C R O T Y P O G R A P H Y
The little stuff
10. Text numerals in tables
Barry Island 0533 0600 0600
Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Bridgend 0552 0620 0648
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.
Barry Island 0533 0600 0600
Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Bridgend 0552 0620 0648
9. Framing
Barry Island 0533 0600 0600
Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Bridgend 0552 0620 0648
Barry Island 0533 0600 0600
Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Bridgend 0552 0620 0648
Barry Island 0533 0600 0600
Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Bridgend 0552 0620 0648
Barry Island 0533 0600 0600
Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Bridgend 0552 0620 0648
Barry Island 0533 0600 0600
Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Bridgend 0552 0620 0648
Barry Island 0533 0600 0600
Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Bridgend 0552 0620 0648
Barry Island 0533 0600 0600
Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Bridgend 0552 0620 0648
Framing navigation
Schedule
Community
Practical
Partners
Schedule
Community
Practical
Partners
Schedule
Community
Practical
Partners
Schedule
Community
Practical
Partners
8. Ampersands in titles
H E A D I N G S & S U B H E A D I N G S
{ 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
<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%; }
7. Too many typefaces
Mix Sans Serif and Serif typefaces
Georgia HeadingsVerdana body
Georgia HeadingsTimes Body
6. Typesetting lists
• Barry Island• Rhoose• Llantwit Major• Bridgend
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra feugiat nulla. Mauris eget purus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nullam ac turpis. Curabitur ut nisl eget nulla molestie suscipit. Phasellus nibh purus, posuere in, suscipit ac, pharetra ac, ligula.
• Barry Island• Rhoose• Llantwit Major• Bridgend
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra feugiat nulla. Mauris eget purus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nullam ac turpis. Curabitur ut nisl eget nulla molestie suscipit. Phasellus nibh purus, posuere in, suscipit ac, pharetra ac, ligula.
• Barry Island• Rhoose• Llantwit Major• Bridgend
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra feugiat nulla. Mauris eget purus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nullam ac turpis. Curabitur ut nisl eget nulla molestie suscipit. Phasellus nibh purus, posuere in, suscipit ac, pharetra ac, ligula.
• Barry Island• Rhoose• Llantwit Major• Bridgend
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra feugiat nulla. Mauris eget purus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nullam ac turpis. Curabitur ut nisl eget nulla molestie suscipit. Phasellus nibh purus, posuere in, suscipit ac, pharetra ac, ligula.
• Barry Island• Rhoose• Llantwit Major• Bridgend
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra feugiat nulla. Mauris eget purus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nullam ac turpis. Curabitur ut nisl eget nulla molestie suscipit. Phasellus nibh purus, posuere in, suscipit ac, pharetra ac, ligula.
5. Incorrect letterspacing
Never negatively space lowercase
Y O U C A N S P A C E C A P S
4. The wrong quotation marks
' "
6'10"
"It's a bloody aardvark!"
“It’s a bloody aardvark!”
“ ”
3. Hyphens instead of dashes
Hyphens are not dashes
Britain’s workers improve their lives - by doing nothing
Britain’s workers improve their lives -- by doing nothing
Britain’s workers improve their lives—by doing nothing
Britain’s workers improve their lives – by doing nothing
- 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
2. Incorrect markup
<q> <cite> <address> <dl> <em>
<h#> <blockquote> <ul> <ol>
1. Sticking to what you know
body { font-family: Verdana, Arial, sans-serif; }
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/)
/* 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/)
"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/)
"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/)
Watch out for:
HTML 5Maybe. Eventually. One day.
CSS3Maybe. Eventually. One day.
@font-faceMaybe. Eventually. One day. It’s already happening: Fontdeck, Typekit.
‘...It is not surface, it is not an extra, it is the thing itself’
Stephen Fry
Thank you
markboulton.co.uk markboultondesign.com twitter.com/markboulton