Opening The Flood Gates
 Font Embedding & Typography

         Mark Boulton
       #wds09 Sydney 2009
Yellow Head!
‘With typographic design,
   regardless of typeface,
you can’t not communicate’
1. What is Typography?
2. Typographic Structure
3. Type on the web
4. A better typographic web
What is Typography?
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 print...
typography
1 the mechanical notation and arrangement of language.
Typographic 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
  ...
Elements of User Experience
        Jesse James Garrett
surface                                                                   visual design
skeleton                          ...
typography


  surface                visual design
skeleton                 information design
structure                i...
typography


  surface                visual design
skeleton                 information design
structure                i...
typography


  surface                visual design
skeleton                 information design
structure                i...
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...
FONT
RHYTHM
LAYOUT
COLOUR
CONTENT
LAYOUT      COLOUR       CONTENT


HIERARCHY      FONT       RHYTHM


LANGUAGE    TYPESETTING    GRID
LAYOUT     ATTRIBUTES
              COLOUR       CONTENT


HIERARCHY     FORM
               FONT        RHYTHM


LANGUAGE...
LAYOUT      COLOUR       CONTENT


HIERARCHY      FONT       RHYTHM


LANGUAGE    TYPESETTING    GRID
LAYOUT      COLOUR       CONTENT


HIERARCHY      FONT       RHYTHM


LANGUAGE    TYPESETTING    GRID
Typography on the web
Limitations have nurtured good
    typographic structure
Voiceless web fonts
The right tool for the job
Bad type?
#indefenseofcomicsans
#boultonsgonebloodymental
@markboulton stop
 justifying nonsense. It
may do all those things
you say but has no place
 in a designer’s toolkit.
@markboulton Do you still
 love Comic Sans? Call
  yourself a designer?
        IDIOT
Pointy sharp serifs
Pointy
  Pointy
Alien heads
 found in
  Georgia
@font-face
The current state of play
Browsers
Firefox 3.5
Safari 3.1
Opera 10
Internet Explorer 4 ! *
* .eot format
.ttf - TrueType
.otf - OpenType
.eot - Embedded Open Type
@font-face {
font-family: 'Foundry Sans';

/* for IE */
src: url('/fonts/FoundrySans/FoundrySans.eot');

/*
* for non-IE: ...
Technical challenges:
- Rendering
- Reverse Engineering
and...
Flash of untypeset content
Type Foundries
Designers
Solutions
Four things for
a better typographic web
#1 Fonts
#2 Foundries
Licensing
Price
#3 Investment
What makes a great web font?
Verdana has more
hinting information than
     any other font
Multi-language support
Legibility
#4 Designers
http://www.flickr.com/photos/jrodenbiker/21808223
Drupal.org will serve 28,000 pages
instead of 20,000
Drupal.org will serve 28,000 pages
instead of 20,000
Drupal will be downloaded roughly
200 times
Drupal.org will serve 28,000 pages
instead of 20,000
Drupal will be downloaded roughly
200 times
7 new Drupal sites will l...
Drupal.org will serve 28,000 pages
instead of 20,000
Drupal will be downloaded roughly
200 times
7 new Drupal sites will l...
Provide smart defaults
82 choices
http://www.flickr.com/photos/aberra/358888041
10 x
       http://www.flickr.com/photos/aberra/358888041
http://www.flickr.com/photos/biwook/390088839
Build a hierarchy
Suggest alternatives
The typographic cascade
sections → document
 groupings → sections
paragraphs → groupings
sentences → paragraphs
  words → sentences
Masthead / Branding
Orientation (navigation)
       Headings
      Body copy
        Tables
         Lists
        Glyphs
Choose a headline typeface:
  Georgia or Helvetica
Headings - Georgia
Body copy - Lucia Grande 0.68em/15
       Lists - padding 1.4em
   Tables - padding top / bottom
  Orie...
Headings - Helvetica
    Body copy - Cambria 0.68em/15
         Lists - padding 1.6em
     Tables - padding top / bottom
O...
So, where now?
LAYOUT      COLOUR       CONTENT


HIERARCHY      FONT       RHYTHM


LANGUAGE    TYPESETTING    GRID
You can’t not communicate
Thank you

    @markboulton
   markboulton.co.uk
 markboultondesign.com
mark@markboulton.co.uk
Opening the Flood Gates: Font Embedding and Typography
Opening the Flood Gates: Font Embedding and Typography
Opening the Flood Gates: Font Embedding and Typography
Opening the Flood Gates: Font Embedding and Typography
Opening the Flood Gates: Font Embedding and Typography
Opening the Flood Gates: Font Embedding and Typography
Opening the Flood Gates: Font Embedding and Typography
Opening the Flood Gates: Font Embedding and Typography
Opening the Flood Gates: Font Embedding and Typography
Opening the Flood Gates: Font Embedding and Typography
Opening the Flood Gates: Font Embedding and Typography
Opening the Flood Gates: Font Embedding and Typography
Opening the Flood Gates: Font Embedding and Typography
Opening the Flood Gates: Font Embedding and Typography
Opening the Flood Gates: Font Embedding and Typography
Opening the Flood Gates: Font Embedding and Typography
Opening the Flood Gates: Font Embedding and Typography
Opening the Flood Gates: Font Embedding and Typography
Opening the Flood Gates: Font Embedding and Typography
Opening the Flood Gates: Font Embedding and Typography
Opening the Flood Gates: Font Embedding and Typography
Opening the Flood Gates: Font Embedding and Typography
Opening the Flood Gates: Font Embedding and Typography
Opening the Flood Gates: Font Embedding and Typography
Opening the Flood Gates: Font Embedding and Typography
Opening the Flood Gates: Font Embedding and Typography
Upcoming SlideShare
Loading in...5
×

Opening the Flood Gates: Font Embedding and Typography

2,307

Published on

Presented first at @media 2009, then tweaked for Web Directions South 2009, and then probably be tweaked again for Build conference.

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,307
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "Opening the Flood Gates: Font Embedding and Typography"

  1. 1. Opening The Flood Gates Font Embedding & Typography Mark Boulton #wds09 Sydney 2009
  2. 2. Yellow Head!
  3. 3. ‘With typographic design, regardless of typeface, you can’t not communicate’
  4. 4. 1. What is Typography? 2. Typographic Structure 3. Type on the web 4. A better typographic web
  5. 5. What is Typography?
  6. 6. http://www.flickr.com/photos/guitavares/248157529/
  7. 7. A world of Verdana and Arial
  8. 8. typography 1 the art or process of setting and arranging types and printing from them. 2 the style and appearance of printed matter. 2
  9. 9. typography 1 the mechanical notation and arrangement of language.
  10. 10. Typographic structure
  11. 11. Author’s Conceptual Structure
  12. 12. Author’s Reader’s Conceptual Conceptual Structure Structure
  13. 13. Designer Author’s Reader’s Conceptual Conceptual Structure Structure
  14. 14. Designer Author’s Reader’s Conceptual Conceptual Structure Structure Brand values Art direction
  15. 15. Elements of User Experience Jesse James Garrett
  16. 16. 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
  17. 17. typography surface visual design skeleton information design structure interaction design scope requirements strategy user needs / site objectives
  18. 18. typography surface visual design skeleton information design structure interaction design scope requirements strategy user needs / site objectives
  19. 19. typography surface visual design skeleton information design structure interaction design scope requirements strategy user needs / site objectives
  20. 20. CAMP #4 CAMP #3 CAMP #2 CAMP #1 BASE CAMP
  21. 21. LAYOUT COLOUR CONTENT HIERARCHY FONT RHYTHM LANGUAGE TYPESETTING GRID
  22. 22. LANGUAGE
  23. 23. TYPESETTING
  24. 24. GRID
  25. 25. 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
  26. 26. FONT
  27. 27. RHYTHM
  28. 28. LAYOUT
  29. 29. COLOUR
  30. 30. CONTENT
  31. 31. LAYOUT COLOUR CONTENT HIERARCHY FONT RHYTHM LANGUAGE TYPESETTING GRID
  32. 32. LAYOUT ATTRIBUTES COLOUR CONTENT HIERARCHY FORM FONT RHYTHM LANGUAGE FUNCTION TYPESETTING GRID
  33. 33. LAYOUT COLOUR CONTENT HIERARCHY FONT RHYTHM LANGUAGE TYPESETTING GRID
  34. 34. LAYOUT COLOUR CONTENT HIERARCHY FONT RHYTHM LANGUAGE TYPESETTING GRID
  35. 35. Typography on the web
  36. 36. Limitations have nurtured good typographic structure
  37. 37. Voiceless web fonts
  38. 38. The right tool for the job
  39. 39. Bad type?
  40. 40. #indefenseofcomicsans
  41. 41. #boultonsgonebloodymental
  42. 42. @markboulton stop justifying nonsense. It may do all those things you say but has no place in a designer’s toolkit.
  43. 43. @markboulton Do you still love Comic Sans? Call yourself a designer? IDIOT
  44. 44. Pointy sharp serifs
  45. 45. Pointy Pointy
  46. 46. Alien heads found in Georgia
  47. 47. @font-face
  48. 48. The current state of play
  49. 49. Browsers
  50. 50. Firefox 3.5 Safari 3.1 Opera 10 Internet Explorer 4 ! * * .eot format
  51. 51. .ttf - TrueType .otf - OpenType .eot - Embedded Open Type
  52. 52. @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/
  53. 53. Technical challenges: - Rendering - Reverse Engineering and...
  54. 54. Flash of untypeset content
  55. 55. Type Foundries
  56. 56. Designers
  57. 57. Solutions
  58. 58. Four things for a better typographic web
  59. 59. #1 Fonts
  60. 60. #2 Foundries
  61. 61. Licensing
  62. 62. Price
  63. 63. #3 Investment
  64. 64. What makes a great web font?
  65. 65. Verdana has more hinting information than any other font
  66. 66. Multi-language support
  67. 67. Legibility
  68. 68. #4 Designers
  69. 69. http://www.flickr.com/photos/jrodenbiker/21808223
  70. 70. Drupal.org will serve 28,000 pages instead of 20,000
  71. 71. Drupal.org will serve 28,000 pages instead of 20,000 Drupal will be downloaded roughly 200 times
  72. 72. Drupal.org will serve 28,000 pages instead of 20,000 Drupal will be downloaded roughly 200 times 7 new Drupal sites will launch
  73. 73. 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
  74. 74. Provide smart defaults
  75. 75. 82 choices
  76. 76. http://www.flickr.com/photos/aberra/358888041
  77. 77. 10 x http://www.flickr.com/photos/aberra/358888041
  78. 78. http://www.flickr.com/photos/biwook/390088839
  79. 79. Build a hierarchy Suggest alternatives
  80. 80. The typographic cascade
  81. 81. sections → document groupings → sections paragraphs → groupings sentences → paragraphs words → sentences
  82. 82. Masthead / Branding Orientation (navigation) Headings Body copy Tables Lists Glyphs
  83. 83. Choose a headline typeface: Georgia or Helvetica
  84. 84. Headings - Georgia Body copy - Lucia Grande 0.68em/15 Lists - padding 1.4em Tables - padding top / bottom Orientation - .8em, italic, grey
  85. 85. Headings - Helvetica Body copy - Cambria 0.68em/15 Lists - padding 1.6em Tables - padding top / bottom Orientation - 1em, Helvetica, italic, grey
  86. 86. So, where now?
  87. 87. LAYOUT COLOUR CONTENT HIERARCHY FONT RHYTHM LANGUAGE TYPESETTING GRID
  88. 88. You can’t not communicate
  89. 89. Thank you @markboulton markboulton.co.uk markboultondesign.com mark@markboulton.co.uk

×