Web Typography Fundamentals

1,712
-1

Published on

Presentation from Drupalcon Paris 2009.

Published in: Design, Technology, Business

Web Typography Fundamentals

  1. 1. Web Typography Fundamentals Mark Boulton
  2. 2. 1. What is Typography? 2. Typographic Structure 3. Macro Typography 4. Micro Typography
  3. 3. W H AT I S T Y P O G R A P H Y ?
  4. 4. http://www.flickr.com/photos/guitavares/248157529/
  5. 5. A world of Verdana and Arial
  6. 6. typography 1 the art or process of setting and arranging types and printing from them. 2 the style and appearance of printed matter. 2
  7. 7. typography 1 the mechanical notation and arrangement of language.
  8. 8. ...deciding which is best, Verdana or Arial.
  9. 9. TYPOGRAPHIC STRUCTURE
  10. 10. ‘Typography has one plain duty before it and that is to convey information in writing.’ Emil Ruder
  11. 11. Language is information
  12. 12. words → sentences sentences → paragraphs paragraphs → groupings groupings → sections sections → document
  13. 13. Documents have a conceptual structure.
  14. 14. Author’s Conceptual Structure
  15. 15. Author’s Reader’s Conceptual Conceptual Structure Structure
  16. 16. Designer Author’s Reader’s Conceptual Conceptual Structure Structure
  17. 17. Designer Author’s Reader’s Conceptual Conceptual Structure Structure Brand values Art direction
  18. 18. Designer MARK UP! Brand values Art direction
  19. 19. CAMP #4 CAMP #3 CAMP #2 CAMP #1 BASE CAMP
  20. 20. LAYOUT COLOUR CONTENT HIERARCHY FONT RHYTHM LANGUAGE TYPESETTING GRID
  21. 21. LANGUAGE
  22. 22. TYPESETTING
  23. 23. GRID
  24. 24. 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
  25. 25. FONT
  26. 26. RHYTHM
  27. 27. LAYOUT
  28. 28. COLOUR
  29. 29. CONTENT
  30. 30. LAYOUT COLOUR CONTENT HIERARCHY FONT RHYTHM LANGUAGE TYPESETTING GRID
  31. 31. LAYOUT ATTRIBUTES COLOUR CONTENT HIERARCHY FORM FONT RHYTHM LANGUAGE FUNCTION TYPESETTING GRID
  32. 32. LAYOUT COLOUR CONTENT HIERARCHY FONT RHYTHM LANGUAGE TYPESETTING GRID
  33. 33. COLOUR LAYOUT CONTENT HIERARCHY FONT RHYTHM LANGUAGE GRID TYPESETTING
  34. 34. COLOUR LAYOUT CONTENT HIERARCHY FONT RHYTHM LANGUAGE TYPESETTING GRID
  35. 35. LAYOUT COLOUR RHYTHM HIERARCHY LANGUAGE TYPESETTING GRID
  36. 36. M AC RO T Y P O G R A P H Y
  37. 37. The big stuff
  38. 38. Creating spacial relationships
  39. 39. Golden Section
  40. 40. b a
  41. 41. a b
  42. 42. a b
  43. 43. a a a
  44. 44. a a a
  45. 45. a a a
  46. 46. Grids
  47. 47. A way of organising stuff
  48. 48. Provide a visual language
  49. 49. Answer layout questions
  50. 50. 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
  51. 51. 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
  52. 52. Vertical Rhythm
  53. 53. 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.
  54. 54. 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.
  55. 55. 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.
  56. 56. 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.
  57. 57. 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.
  58. 58. Richard Rutter http://24ways.org/2006/compose-to-a-vertical- rhythm Wilson Miner http://www.alistapart.com/articles/ settingtypeontheweb
  59. 59. M I C RO T Y P O G R A P H Y
  60. 60. The little stuff
  61. 61. 10. Text numerals in tables
  62. 62. Barry Island 0533 0600 0600 Rhoose 0540 0610 0612 Llantwit Major 0550 0612 0622 Bridgend 0552 0620 0648
  63. 63. 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.
  64. 64. Barry Island 0533 0600 0600 Rhoose 0540 0610 0612 Llantwit Major 0550 0612 0622 Bridgend 0552 0620 0648
  65. 65. 9. Framing
  66. 66. Barry Island 0533 0600 0600 Rhoose 0540 0610 0612 Llantwit Major 0550 0612 0622 Bridgend 0552 0620 0648
  67. 67. Barry Island 0533 0600 0600 Rhoose 0540 0610 0612 Llantwit Major 0550 0612 0622 Bridgend 0552 0620 0648
  68. 68. Barry Island 0533 0600 0600 Rhoose 0540 0610 0612 Llantwit Major 0550 0612 0622 Bridgend 0552 0620 0648
  69. 69. Barry Island 0533 0600 0600 Rhoose 0540 0610 0612 Llantwit Major 0550 0612 0622 Bridgend 0552 0620 0648
  70. 70. Barry Island 0533 0600 0600 Rhoose 0540 0610 0612 Llantwit Major 0550 0612 0622 Bridgend 0552 0620 0648
  71. 71. Barry Island 0533 0600 0600 Rhoose 0540 0610 0612 Llantwit Major 0550 0612 0622 Bridgend 0552 0620 0648
  72. 72. Barry Island 0533 0600 0600 Rhoose 0540 0610 0612 Llantwit Major 0550 0612 0622 Bridgend 0552 0620 0648
  73. 73. Framing navigation
  74. 74. Schedule Community Practical Partners
  75. 75. Schedule Community Practical Partners
  76. 76. Schedule Community Practical Partners
  77. 77. Schedule Community Practical Partners
  78. 78. 8. Ampersands in titles
  79. 79. HEADINGS & SUBHEADINGS
  80. 80. {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
  81. 81. <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%; }
  82. 82. 7. Too many typefaces
  83. 83. Mix Sans Serif and Serif typefaces
  84. 84. Georgia Headings Verdana body
  85. 85. Georgia Headings Times Body
  86. 86. 6. Typesetting lists
  87. 87. 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.
  88. 88. 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.
  89. 89. 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.
  90. 90. 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.
  91. 91. 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.
  92. 92. 5. Incorrect letterspacing
  93. 93. Never negatively space lowercase
  94. 94. Y O U C A N S PA C E C A P S
  95. 95. 4. The wrong quotation marks
  96. 96. ' "
  97. 97. 6'10"
  98. 98. "It's a bloody aardvark!"
  99. 99. “It’s a bloody aardvark!”
  100. 100. “”
  101. 101. 3. Hyphens instead of dashes
  102. 102. Hyphens are not dashes
  103. 103. Britain’s workers improve their lives - by doing nothing
  104. 104. Britain’s workers improve their lives -- by doing nothing
  105. 105. Britain’s workers improve their lives—by doing nothing
  106. 106. Britain’s workers improve their lives – by doing nothing
  107. 107. - 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
  108. 108. 2. Incorrect markup
  109. 109. <h#> <blockquote> <ul> <ol> <q> <cite> <address> <dl> <em>
  110. 110. 1. Sticking to what you know
  111. 111. body { font-family: Verdana, Arial, sans-serif; }
  112. 112. 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/)
  113. 113. /* 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/)
  114. 114. "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/)
  115. 115. "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/)
  116. 116. 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.
  117. 117. ‘...It is not surface, it is not an extra, it is the thing itself’ Stephen Fry
  118. 118. Thank you markboulton.co.uk markboultondesign.com twitter.com/markboulton

×