Opening the Flood Gates: Font Embedding and Typography
- 1. Opening The Flood Gates Font Embedding & Typography Mark Boulton #wds09 Sydney 2009
- 4. Yellow Head!
- 5. ‘With typographic design, regardless of typeface, you can’t not communicate’
- 6. 1. What is Typography? 2. Typographic Structure 3. Type on the web 4. A better typographic web
- 14. A world of Verdana and Arial
- 15. typography 1 the art or process of setting and arranging types and printing from them. 2 the style and appearance of printed matter. 2
- 16. typography 1 the mechanical notation and arrangement of language.
- 19. Author’s Reader’s Conceptual Conceptual Structure Structure
- 20. Designer Author’s Reader’s Conceptual Conceptual Structure Structure
- 21. Designer Author’s Reader’s Conceptual Conceptual Structure Structure Brand values Art direction
- 22. Elements of User Experience Jesse James Garrett
- 23. surface visual design skeleton information design structure interaction design scope requirements strategy user needs / site objectives For a much better diagram go to: http://www.jjg.net/elements/pdf/elements.pdf
- 24. typography surface visual design skeleton information design structure interaction design scope requirements strategy user needs / site objectives
- 25. typography surface visual design skeleton information design structure interaction design scope requirements strategy user needs / site objectives
- 26. typography surface visual design skeleton information design structure interaction design scope requirements strategy user needs / site objectives
- 28. CAMP #4 CAMP #3 CAMP #2 CAMP #1 BASE CAMP
- 29. LAYOUT COLOUR CONTENT HIERARCHY FONT RHYTHM LANGUAGE TYPESETTING GRID
- 30. LANGUAGE
- 31. TYPESETTING
- 32. GRID
- 33. 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
- 34. FONT
- 35. RHYTHM
- 36. LAYOUT
- 37. COLOUR
- 38. CONTENT
- 39. LAYOUT COLOUR CONTENT HIERARCHY FONT RHYTHM LANGUAGE TYPESETTING GRID
- 40. LAYOUT ATTRIBUTES COLOUR CONTENT HIERARCHY FORM FONT RHYTHM LANGUAGE FUNCTION TYPESETTING GRID
- 41. LAYOUT COLOUR CONTENT HIERARCHY FONT RHYTHM LANGUAGE TYPESETTING GRID
- 44. LAYOUT COLOUR CONTENT HIERARCHY FONT RHYTHM LANGUAGE TYPESETTING GRID
- 45. Typography on the web
- 46. Limitations have nurtured good typographic structure
- 49. The right tool for the job
- 50. Bad type?
- 54. @markboulton stop justifying nonsense. It may do all those things you say but has no place in a designer’s toolkit.
- 55. @markboulton Do you still love Comic Sans? Call yourself a designer? IDIOT
- 59. Pointy Pointy
- 60. Alien heads found in Georgia
- 61. @font-face
- 62. The current state of play
- 63. Browsers
- 64. Firefox 3.5 Safari 3.1 Opera 10 Internet Explorer 4 ! * * .eot format
- 65. .ttf - TrueType .otf - OpenType .eot - Embedded Open Type
- 66. @font-face { font-family: 'Foundry Sans'; /* for IE */ src: url('/fonts/FoundrySans/FoundrySans.eot'); /* * for non-IE: first see if the font exists locally on the browser's computer. If so, use that copy of the font. Otherwise, load it from the server */ src: local('Foundry Sans'), url('/fonts/FoundrySans/FoundrySans.ttf') format ('truetype'); } http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
- 67. Technical challenges: - Rendering - Reverse Engineering and...
- 68. Flash of untypeset content
- 69. Type Foundries
- 70. Designers
- 71. Solutions
- 75. Four things for a better typographic web
- 77. #1 Fonts
- 78. #2 Foundries
- 79. Licensing
- 80. Price
- 82. #3 Investment
- 83. What makes a great web font?
- 84. Verdana has more hinting information than any other font
- 86. Legibility
- 87. #4 Designers
- 92. Drupal.org will serve 28,000 pages instead of 20,000
- 93. Drupal.org will serve 28,000 pages instead of 20,000 Drupal will be downloaded roughly 200 times
- 94. Drupal.org will serve 28,000 pages instead of 20,000 Drupal will be downloaded roughly 200 times 7 new Drupal sites will launch
- 95. Drupal.org will serve 28,000 pages instead of 20,000 Drupal will be downloaded roughly 200 times 7 new Drupal sites will launch 6 of them will be ugly
- 99. 82 choices
- 101. 10 x http://www.flickr.com/photos/aberra/358888041
- 103. Build a hierarchy Suggest alternatives
- 105. sections → document groupings → sections paragraphs → groupings sentences → paragraphs words → sentences
- 106. Masthead / Branding Orientation (navigation) Headings Body copy Tables Lists Glyphs
- 107. Choose a headline typeface: Georgia or Helvetica
- 108. Headings - Georgia Body copy - Lucia Grande 0.68em/15 Lists - padding 1.4em Tables - padding top / bottom Orientation - .8em, italic, grey
- 109. Headings - Helvetica Body copy - Cambria 0.68em/15 Lists - padding 1.6em Tables - padding top / bottom Orientation - 1em, Helvetica, italic, grey
- 110. So, where now?
- 112. LAYOUT COLOUR CONTENT HIERARCHY FONT RHYTHM LANGUAGE TYPESETTING GRID
- 113. You can’t not communicate
- 115. Thank you @markboulton markboulton.co.uk markboultondesign.com mark@markboulton.co.uk