• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Web Typography Fundamentals
 

Web Typography Fundamentals

on

  • 2,605 views

Presentation from Drupalcon Paris 2009.

Presentation from Drupalcon Paris 2009.

Statistics

Views

Total Views
2,605
Views on SlideShare
2,597
Embed Views
8

Actions

Likes
8
Downloads
105
Comments
0

2 Embeds 8

http://www.slideshare.net 7
http://webcache.googleusercontent.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Web Typography Fundamentals Web Typography Fundamentals Presentation Transcript

    • Web Typography Fundamentals Mark Boulton
    • 1. What is Typography? 2. Typographic Structure 3. Macro Typography 4. Micro Typography
    • W H AT 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
    • typography 1 the art or process of setting and arranging types and printing from them. 2 the style and appearance of printed matter. 2
    • typography 1 the mechanical notation and arrangement of language.
    • ...deciding which is best, Verdana or Arial.
    • TYPOGRAPHIC STRUCTURE
    • ‘Typography has one plain duty before it and that is to convey information in writing.’ Emil Ruder
    • Language is information
    • words → sentences sentences → paragraphs paragraphs → groupings groupings → sections sections → document
    • Documents have a conceptual structure.
    • Author’s Conceptual Structure
    • Author’s Reader’s Conceptual Conceptual Structure Structure
    • Designer Author’s Reader’s Conceptual Conceptual Structure Structure
    • Designer Author’s Reader’s Conceptual Conceptual Structure Structure Brand values Art direction
    • Designer MARK UP! Brand values Art direction
    • CAMP #4 CAMP #3 CAMP #2 CAMP #1 BASE CAMP
    • LAYOUT COLOUR CONTENT HIERARCHY FONT RHYTHM LANGUAGE TYPESETTING GRID
    • LANGUAGE
    • TYPESETTING
    • GRID
    • 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
    • FONT
    • RHYTHM
    • LAYOUT
    • COLOUR
    • CONTENT
    • LAYOUT COLOUR CONTENT HIERARCHY FONT RHYTHM LANGUAGE TYPESETTING GRID
    • LAYOUT ATTRIBUTES COLOUR CONTENT HIERARCHY FORM FONT RHYTHM LANGUAGE FUNCTION TYPESETTING GRID
    • LAYOUT COLOUR CONTENT HIERARCHY FONT RHYTHM LANGUAGE TYPESETTING GRID
    • COLOUR LAYOUT CONTENT HIERARCHY FONT RHYTHM LANGUAGE GRID TYPESETTING
    • COLOUR LAYOUT CONTENT HIERARCHY FONT RHYTHM LANGUAGE TYPESETTING GRID
    • LAYOUT COLOUR RHYTHM HIERARCHY LANGUAGE TYPESETTING GRID
    • M AC RO T Y P O G R A P H Y
    • The big stuff
    • Creating spacial relationships
    • Golden Section
    • b a
    • 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
    • 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
    • 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
    • Vertical Rhythm
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • Richard Rutter http://24ways.org/2006/compose-to-a-vertical- rhythm Wilson Miner http://www.alistapart.com/articles/ settingtypeontheweb
    • M I C RO 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
    • HEADINGS & SUBHEADINGS
    • {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
    • <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%; }
    • 7. Too many typefaces
    • Mix Sans Serif and Serif typefaces
    • Georgia Headings Verdana body
    • Georgia Headings Times Body
    • 6. Typesetting lists
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 5. Incorrect letterspacing
    • Never negatively space lowercase
    • Y O U C A N S PA 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
    • <h#> <blockquote> <ul> <ol> <q> <cite> <address> <dl> <em>
    • 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 5 Maybe. Eventually. One day. CSS3 Maybe. Eventually. One day. @font-face Maybe. 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