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

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

7. What is Typography?

12. http://www.flickr.com/photos/guitavares/248157529/

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.

17. Typographic structure

18. Author’s
Conceptual
Structure

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

48. Voiceless web fonts

49. The right tool for the job

50. Bad type?

52. #indefenseofcomicsans

53. #boultonsgonebloodymental

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

58. Pointy sharp serifs

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

85. Multi-language support

86. Legibility

87. #4 Designers

88. http://www.flickr.com/photos/jrodenbiker/21808223

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

97. Provide smart defaults

99. 82 choices

100. http://www.flickr.com/photos/aberra/358888041

101. 10 x
http://www.flickr.com/photos/aberra/358888041

102. http://www.flickr.com/photos/biwook/390088839

103. Build a hierarchy
Suggest alternatives

104. The typographic cascade

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