Web Typography Fundamentals

download Web Typography Fundamentals

of 142

  • date post

    25-May-2015
  • Category

    Design

  • view

    1.612
  • download

    4

Embed Size (px)

description

Presentation from Drupalcon Paris 2009.

Transcript of Web Typography Fundamentals

  • 1. Web Typography Fundamentals Mark Boulton

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 ? 4. http://www.ickr.com/photos/guitavares/248157529/ 5. A world of Verdana and Arial 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. typography 1 the mechanical notation and arrangement of language. 8. ...deciding which is best, Verdana or Arial. 9. TYPOGRAPHIC STRUCTURE 10. Typography has one plain duty before it and that is to convey information in writing. Emil Ruder 11. Language is information 12. words sentences sentences paragraphs paragraphs groupingsgroupings sectionssections document 13. Documents have a conceptual structure. 14. Authors ConceptualStructure 15. Authors Readers Conceptual ConceptualStructureStructure 16. DesignerAuthorsReaders ConceptualConceptualStructure Structure 17. DesignerAuthorsReaders ConceptualConceptualStructure Structure Brand values Art direction 18. DesignerMARK UP!Brand values Art direction 19. CAMP #4CAMP #3CAMP #2 CAMP #1 BASE CAMP 20. LAYOUTCOLOUR CONTENT HIERARCHYFONT RHYTHM LANGUAGETYPESETTINGGRID 21. LANGUAGE 22. TYPESETTING 23. GRID 24. Heading 1Heading 2HIERARCHYHeading 3Designing in the browser is web sites shouldgood because:not look the same Its quick to make changes Its the right thing to do in every browser Malarkey will be chuffed 25. FONT 26. RHYTHM 27. LAYOUT 28. COLOUR 29. CONTENT 30. LAYOUTCOLOUR CONTENT HIERARCHYFONT RHYTHM LANGUAGETYPESETTINGGRID 31. LAYOUT ATTRIBUTES COLOUR CONTENT HIERARCHY FORMFONTRHYTHM LANGUAGEFUNCTIONTYPESETTINGGRID 32. LAYOUTCOLOUR CONTENT HIERARCHYFONT RHYTHM LANGUAGETYPESETTINGGRID 33. COLOURLAYOUT CONTENT HIERARCHYFONT RHYTHM LANGUAGE GRID TYPESETTING 34. COLOUR LAYOUTCONTENT HIERARCHYFONTRHYTHM LANGUAGETYPESETTING GRID 35. LAYOUT COLOUR RHYTHM HIERARCHY LANGUAGETYPESETTING GRID 36. M AC RO T Y P O G R A P H Y 37. The big stuff 38. Creating spacial relationships 39. Golden Section 40. ba 41. a b 42. a b 43. a a a 44. a a a 45. a a a 46. Grids 47. A way of organising stuff 48. Provide a visual language 49. Answer layout questions 50. Sign in Register Read todays paper Jobs comment is free...SearchHome This week Contributors Subjects A-Z Editors blog Dan Chung Steve Bell About us Audio Webfeeds Other blogsBlogsEditors 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 Queens speech: Big on short-term tricks, and lacking in long-term vision just about sums up the governments new legislation CommentsState of emergency by Steve BellEnd of mutual respect If Ball wants better schools, he Derek Wall Nov 06 07, 04:20pm As the Respect party splits in twomust scrap faith selection 51. Sign in Register Read todays paper Jobs comment is free...SearchHome This week Contributors Subjects A-Z Editors blog Dan Chung Steve Bell About us Audio Webfeeds Other blogsBlogsEditors 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 Queens speech: Big on short-term tricks, and lacking in long-term vision just about sums up the governments new legislation CommentsState of emergency by Steve BellEnd of mutual respect If Ball wants better schools, he Derek Wall Nov 06 07, 04:20pm As the Respect party splits in twomust scrap faith selection 52. Vertical Rhythm 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 its 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 ships 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 Minervas 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.Hes been trying to perform this ritual every four hours the objective being to see if theres 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. 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 its 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 ships 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 WindsDaniel goes back and sits by one of the windows these are undershot so that he can look straight down and see Minervas 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.Hes been trying to perform this ritual every four hours the objective being to see if theres 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. 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 its 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 ships 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 WindsDaniel goes back and sits by one of the windows these are undershot so that he can look straight down and see Minervas 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.Hes been trying to perform this ritual every four hours the objective being to see if theres 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. 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 its not just imagining that light in the eastern sky. Unfortunately theshort deck that, towards eastern sky is off to port this morning. Yesterday it was starboard.the ships bow, is built Minerva has been sailing up and down the New England coast for theabove 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 Minervas 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. Hes been trying to perform this ritual every four hours the objective being to see if theres 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. 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 its not just imagining that light in the eastern sky. Unfortunately theshort deck that, towards eastern sky is off to port this morning. Yesterday it was starboard.the ships bow, is built Minerva has been sailing up and down the New England c