1. Progressive Enhancement &
Intentional Degradation 2
Font Embedding & New Design Possibilities
by Elliot Jay Stocks
elliotjaystocks.com | twitter.com/elliotjaystocks

2. 1 Enhancement & degradation
2 A personal typographic journey
3 Enhancing web typography
4 We have issues
5 New possibilities with CSS3
6 Start using it NOW
7 Controversial parting thought

3. 1
Enhancement & Degradation

4. Enhancement: reward

5. Enhancement: reward
Visual treats for the more capable browser

6. Degradation: punishment

7. Degradation: punishment
The removal of a treat

8. Degradation: punishment
The removal of a treat
The designer giveth and the designer taketh away!

9. Intention

10. Intention
An awareness of browser capabilities and the
appreciation that sites don’t need to look in
the same in each one.

11. Intention
An awareness of browser capabilities and the
appreciation that sites don’t need to look in
the same in each one.
Safari IE6
Stuff and Nonsense stuffandnonsense.co.uk

12. Should
websites look
the same in
all browsers?

13. shouldwebsiteslookthesameinallbrowsers.com

14. 2
A personal typographic journey

15. The early days...
... Dreamweaver...
... confusion!

16. The early days...
... Dreamweaver...
... confusion!
The choice of fonts appeared
to be system-wide

17. Note: CS3 panel shown
Dreamweaver adobe.com/products/dreamweaver

18. The early days...
... Dreamweaver...
... confusion!
The choice of fonts appeared
to be system-wide
It wasn’t clear about web-safe fonts

19. The early days...
... Dreamweaver...
... confusion!
The choice of fonts appeared
to be system-wide
It wasn’t clear about web-safe fonts
To an extent, Dreamweaver
is still guilty

20. The allure of Flash

21. The allure of Flash
You can use any font you liked

22. The allure of Flash
You can use any font you like
Layout freedom, a la print design
(vs. HTML inconsistency)

23. The allure of Flash
You can use any font you like
Layout freedom, a la print design
(vs. HTML inconsistency)
Hence type can be presented
as intended

24. Back to basics: HTML

25. Back to basics: HTML
Accessible:
screenreader-friendly and allows for resizing

26. Back to basics: HTML
Accessible:
screenreader-friendly and allows for resizing
Updatable:
the source text dictates the final render

27. Back to basics: HTML
Accessible:
screenreader-friendly and allows for resizing
Updatable:
the source text dictates the final render
Simple:
HTML and CSS — that’s it!

28. Image replacement

29. Image replacement
PROS
It looks good
It gives control over other elements besides type

30. Image replacement
PROS
It looks good
It gives control over other elements besides type
CONS
Difficult to update
Inaccessible in some situations
Potentially it differs from the source code

31. sIFR

32. sIFR at work on Jason Santa Maria’s site jasonsantamaria.com

33. sIFR
The best of both worlds: the accessibility and
‘selectability’ of HTML but with (some of)* the
benefits of Flash-based rendering.
* = Layout is still determined by HTML

34. sIFR
The best of both worlds: the accessibility and
‘selectability’ of HTML but with (some of)* the
benefits of Flash-based rendering.
Gracefully degrades for users without Flash / JS.
* = Layout is still determined by HTML

35. sIFR
The best of both worlds: the accessibility and
‘selectability’ of HTML but with (some of)* the
benefits of Flash-based rendering.
Gracefully degrades for users without Flash / JS.
It’s brilliant, but essentially it’s a hack; not a
solution.
* = Layout is still determined by HTML

36. “
While sIFR gives us better typography today, it is clearly
not the solution for the next 20 years.
It is but a nice stopgap for people who value the
importance of typography and don’t want to wait 1, 5,
or 10 years for browser makers, OS vendors, and type
foundries to figure out a better solution.
The moment that happens however, sIFR will lift right
”
out and give way to whatever other method is available.
~ Mike Davidson
Mike Davidson, mikeindustries.com/blog/sifr

37. “
While sIFR gives us better typography today, it is clearly
not the solution for the next 20 years.
It is but a nice stopgap for people who value the
importance of typography and don’t want to wait 1, 5,
or 10 years for browser makers, OS vendors, and type
foundries to figure out a better solution.
The moment that happens however, sIFR will lift right
”
out and give way to whatever other method is available.
~ Mike Davidson
Mike Davidson, mikeindustries.com/blog/sifr

38. “
While sIFR gives us better typography today, it is clearly
not the solution for the next 20 years.
It is but a nice stopgap for people who value the
importance of typography and don’t want to wait 1, 5,
or 10 years for browser makers, OS vendors, and type
foundries to figure out a better solution.
The moment that happens however, sIFR will lift right
”
out and give way to whatever other method is available.
~ Mike Davidson
Mike Davidson, mikeindustries.com/blog/sifr

39. Font embedding

40. Font embedding
Browser-supported font embedding is, I believe,
the future of web typography.

41. 3
The future of web typography

42. @font-face

43. @font-face
Originated in the CSS2 spec, despite its general
association with CSS3.

44. @font-face
Originated in the CSS2 spec, despite its general
association with CSS3.
Extremely simple to implement.

45. @font-face
Originated in the CSS2 spec, despite its general
association with CSS3.
Extremely simple to implement.
Current support:
Safari 3.1
Firefox 3.1
Opera 10

46. @font-face
Originated in the CSS2 spec, despite its general
association with CSS3.
Extremely simple to implement.
Current support:
Safari 3.1
Firefox 3.1
Opera 10
Has some piracy issues. (More on that in a sec!)

47. Jos Buivenga’s fonts josbuivenga.demon.nl

48. Microsoft’s EOT
(Embedded Open Type)

49. Microsoft’s EOT
(Embedded Open Type)
Supported since IE4

50. IE4!!!

51. Microsoft’s EOT
(Embedded Open Type)
Supported since IE4 (but not in IE8 yet).
Font encoding protects against piracy.

52. Microsoft’s EOT
(Embedded Open Type)
Supported since IE4 (but not in IE8 yet).
Font encoding protects against piracy.
EOT has been submitted to the W3C for approval
as a new standard. Discussions are still underway.

53. Microsoft’s EOT
(Embedded Open Type)
Supported since IE4 (but not in IE8 yet).
Font encoding protects against piracy.
EOT has been submitted to the W3C for approval
as a new standard. Discussions are still underway.
WEFT: Web Embedding Fonts Tool for making
.eot files.

54. <style type=quot;text/cssquot; media=quot;screenquot;>
@font-face{
font-family:'Fontin-Regular';
src: url('Fontin-Regular.otf') format('opentype');
}
</style>
<!--[if IE]>
<style type=quot;text/cssquot; media=quot;screenquot;>
@font-face{
font-family:'Fontin-Regular';
src: url('Fontin-Regular.eot');
}
</style>
<![endif]-->
jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work

55. <style type=quot;text/cssquot; media=quot;screenquot;>
@font-face{
font-family:'Fontin-Regular';
src: url('Fontin-Regular.otf') format('opentype');
}
</style>
<!--[if IE]>
<style type=quot;text/cssquot; media=quot;screenquot;>
@font-face{
font-family:'Fontin-Regular';
src: url('Fontin-Regular.eot');
}
</style>
<![endif]-->
jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work

56. <style type=quot;text/cssquot; media=quot;screenquot;>
@font-face{
font-family:'Fontin-Regular';
src: url('Fontin-Regular.otf') format('opentype');
}
</style>
<!--[if IE]>
<style type=quot;text/cssquot; media=quot;screenquot;>
@font-face{
font-family:'Fontin-Regular';
src: url('Fontin-Regular.eot');
}
</style>
<![endif]-->
jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work

57. <style type=quot;text/cssquot; media=quot;screenquot;>
@font-face{
font-family:'Fontin-Regular';
src: url('Fontin-Regular.eot');
src: url('Fontin-Regular.otf') format('opentype');
}
</style>
Comment from ‘Nicholas’, webdirections.org/blog/the-return-of-font-embedding-to-the-web

58. <style type=quot;text/cssquot; media=quot;screenquot;>
@font-face{
font-family:'Fontin-Regular';
src: url('Fontin-Regular.eot');
src: url('Fontin-Regular.otf') format('opentype');
}
</style>
Comment from ‘Nicholas’, webdirections.org/blog/the-return-of-font-embedding-to-the-web

59. <style type=quot;text/cssquot; media=quot;screenquot;>
@font-face{
font-family:'Fontin-Regular';
src: url('Fontin-Regular.eot');
src: url('Fontin-Regular.otf') format('opentype');
}
</style>
Comment from ‘Nicholas’, webdirections.org/blog/the-return-of-font-embedding-to-the-web

60. 4
We have issues

61. The issues

62. The issues
Protection is needed for font foundries to
counteract font piracy (as with EOT).

63. The issues
Protection is needed for font foundries to
counteract font piracy (as with EOT).
How do we cope with licenses? Mozilla proposes
including license data in HTTP headers.

64. The issues
Protection is needed for font foundries to
counteract font piracy (as with EOT).
How do we cope with licenses? Mozilla proposes
including license data in HTTP headers.
More fonts need to be made available so that the
choice can improve. In its current state, the
limited choice is turning into not much more than
an alternative list of web-safe fonts.

65. What needs to happen?

66. What needs to happen?
Font foundries need to be protected by the
technology, as they are with EOT.

67. What needs to happen?
Font foundries need to be protected by the
technology, as they are with EOT.
Font embedding is the path to typographic
enlightenment on the web... when it eventually
receives multiple browser support.

68. What needs to happen?
Font foundries need to be protected by the
technology, as they are with EOT.
Font embedding is the path to typographic
enlightenment on the web... when it eventually
receives multiple browser support.
Start using font embedding now!

69. 5
New possibilities with CSS3

70. I won’t say too much

71. I won’t say too much
But there are some exciting bits...

72. Some of the new features

73. Some of the new features
Advanced layout

74. Jina Bolton creatingsexystylesheets.com/css3andwhatcouldbe.zip

75. Some of the new features
Advanced layout
Backgrounds

76. div.shoutbox {
background:
url(top.gif) top left no-repeat,
url(middle.gif) left repeat-y,
url(bottom.gif) bottom left no-repeat
}
Multiple background images

77. div.shoutbox {
background:
url(top.gif) top left no-repeat,
url(middle.gif) left repeat-y,
url(bottom.gif) bottom left no-repeat
}
Multiple background images

78. div.shoutbox {
background:
url(top.gif) top left no-repeat,
url(middle.gif) left repeat-y,
url(bottom.gif) bottom left no-repeat
}
Multiple background images

79. div.shoutbox {
background:
url(top.gif) top left no-repeat,
url(middle.gif) left repeat-y,
url(bottom.gif) bottom left no-repeat
}
Multiple background images

80. Some of the new features
Advanced layout
Backgrounds
Borders

81. div.vcard {
border-radius:20px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
}
Borders: radius

82. div.vcard {
border-image:url(border.png) 10 10 10 10 round round;
}
Borders: image

83. Some of the new features
Advanced layout
Backgrounds
Borders
Box shadows

84. div.info {
box-shadow:10px 10px 5px #888;
}
Borders: image

85. Some of the new features
Advanced layout
Backgrounds
Borders
Box shadows
Multi-column layout

86. div.article {
column-count:2;
column-gap:20px
}
Multiple column layouts

87. Some of the new features
Advanced layout
Backgrounds
Borders
Box shadows
Multi-column layout
Selectors

88. tr:nth-child(odd) td {
background:#999
}
Nth child selectors

89. Some of the new features
Advanced layout
Backgrounds
Borders
Box shadows
Multi-column layout
Selectors
Text shadows

90. p{
text-shadow:1px 2px 1px #000
}
Text shadows

91. 6
Start using it NOW

92. Progressive
“
Favoring or advocating progress, change,
improvement, or reform, as opposed to
”
wishing to maintain things as they are.
dictionary.reference.com/browse/progressive

93. Thomas Silkjær theundersigned.net (Safari)

94. ul.gallery li:hover {
webkit-transform:rotate:(-2.5deg);
}
theundersigned.net/wp-content/themes/default/style.css

95. Thomas Silkjær theundersigned.net (Firefox)

96. Sam Brown sam.brown.tc

97. 24 Ways 24ways.org

98. Tim Van Damme timvandamme.com

99. Web Directions North north.webdirections.org

100. Website don’t need to look
the same in every browser

101. Website don’t need to look
the same in every browser
At the basic level, your site should look
acceptable in most browsers, especially
the target ones

102. Website don’t need to look
the same in every browser
At the basic level, your site should look
acceptable in most browsers, especially
the target ones
Add enhancements for newer browsers

103. Website don’t need to look
the same in every browser
At the basic level, your site should look
acceptable in most browsers, especially
the target ones
Add enhancements for newer browsers
Don’t fear degradation - plan for it

104. 7
Controversial parting thought

105. Validation
is irrelevant

106. Yes, yes, bear with me...

107. Yes, yes, bear with me...
New techniques won’t validate...

108. Validation errors jigsaw.w3.org/css-validator

109. Yes, yes, bear with me...
New techniques won’t validate...
... and it doesn’t matter!

110. Yes, yes, bear with me...
New techniques won’t validate...
... and it doesn’t matter!
Recognise the value of intentional invalidation

111. Jon Hicks hicksdesign.co.uk/journal

112. Jon Hicks hicksdesign.co.uk/journal

113. #tops b {
display:block;
float:right;
width:333px;
height:15px;
background:url(/images/paulsmith.gif) no-repeat;
}
hicksdesign.co.uk/css/layout-9.css

114. <b>

115. Yes, yes, bear with me...
New techniques won’t validate...
... and it doesn’t matter!
Recognise the value of intentional invalidation
Validation does not equal conformity to Web
Standards: you can build a site with tables and a
complete lack of semantics yet still have it
validate

116. Validation

117. does

118. not

119. equal

120. conformity

121. to

122. Web

123. Standards

124. Further reading, part 1
CSS3.info
css3.info
Design Shack: Introduction to CSS3
designshack.co.uk/tutorials/introduction-to-css3-part-1-what-is-it
Elliot Jay Stocks Progressive Enhancement & Intentional Degradation 1
elliotjaystocks.com/geeknight
Jina Bolton: Creating Sexy Stylesheets
http://creatingsexystylesheets.com
Jina Bolton: CSS3 and what could be
creatingsexystylesheets.com/css3andwhatcouldbe.zip
Jon Allsopp: The return of font embedding to the web?
webdirections.org/blog/the-return-of-font-embedding-to-the-web
Jon Allsopp: Ubiquitous web font embedding just got a step closer
webdirections.org/blog/ubiquitous-web-font-embedding-just-got-a-step-closer
Jon Tan: @font-face in IE: Making Web Fonts Work
jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work
Microsoft: Font embedding in IE4
msdn.microsoft.com/en-us/library/ms533034.aspx
Microsoft: WEFT 3
microsoft.com/typography/web/embedding/weft3/default.htm
Richard Rutter: The future of web font embedding
clagnut.com/blog/2166

125. Further reading, part 2
W3C: CSS3 module: Web Fonts
w3.org/TR/css3-webfonts
W3C: For & against standardizing font embedding
w3.org/Fonts/Misc/eot-report-2008
Web Fonts: Fonts available for @font-face embedding
webfonts.info/wiki/index.php?title=Fonts_available_for_%40font-face_embedding

126. Shameless plug!
Sexy Web Design
by Elliot Jay Stocks
Expert reviewers: Jina Bolton & Dan Rubin
Published by SitePoint in March

127. Thank you!
elliotjaystocks.com | twitter.com/elliotjaystocks
Cover background image by Samantha Cliffe - samanthacliffe.com
Chapter background image from ilovetypography.com/love
Pin-ups image by Mauren Veras - flickr.com/photos/mauren/2298724158
Additional imagery by me