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

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

1
Enhancement & Degradation

Enhancement: reward

Enhancement: reward
Visual treats for the more capable browser

Degradation: punishment

Degradation: punishment
The removal of a treat

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

Intention

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

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

Should
websites look
the same in
all browsers?

shouldwebsiteslookthesameinallbrowsers.com

2
A personal typographic journey

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

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

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

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

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

The allure of Flash

The allure of Flash
You can use any font you liked

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

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

Back to basics: HTML

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

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

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!

Image replacement

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

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

sIFR

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

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

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

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

“
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

“
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

“
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

Font embedding

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

3
The future of web typography

@font-face

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

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

@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

@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!)

Jos Buivenga’s fonts josbuivenga.demon.nl

Microsoft’s EOT
(Embedded Open Type)

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

IE4!!!

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

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.

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.

<style type=\"text/css\" media=\"screen\">
@font-face{
font-family:'Fontin-Regular';
src: url('Fontin-Regular.otf') format('opentype');
}
</style>
<!--[if IE]>
<style type=\"text/css\" media=\"screen\">
@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

<style type=\"text/css\" media=\"screen\">
@font-face{
font-family:'Fontin-Regular';
src: url('Fontin-Regular.otf') format('opentype');
}
</style>
<!--[if IE]>
<style type=\"text/css\" media=\"screen\">
@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

<style type=\"text/css\" media=\"screen\">
@font-face{
font-family:'Fontin-Regular';
src: url('Fontin-Regular.otf') format('opentype');
}
</style>
<!--[if IE]>
<style type=\"text/css\" media=\"screen\">
@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

<style type=\"text/css\" media=\"screen\">
@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

<style type=\"text/css\" media=\"screen\">
@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

<style type=\"text/css\" media=\"screen\">
@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

4
We have issues

The issues

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

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.

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.

What needs to happen?

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

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.

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!

5
New possibilities with CSS3

I won’t say too much

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

Some of the new features

Some of the new features
Advanced layout

Jina Bolton creatingsexystylesheets.com/css3andwhatcouldbe.zip

Some of the new features
Advanced layout
Backgrounds

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

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

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

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

Some of the new features
Advanced layout
Backgrounds
Borders

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

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

Some of the new features
Advanced layout
Backgrounds
Borders
Box shadows

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

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

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

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

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

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

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

6
Start using it NOW

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

Thomas Silkjær theundersigned.net (Safari)

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

Thomas Silkjær theundersigned.net (Firefox)

Sam Brown sam.brown.tc

24 Ways 24ways.org

Tim Van Damme timvandamme.com

Web Directions North north.webdirections.org

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

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

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

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

7
Controversial parting thought

Validation
is irrelevant

Yes, yes, bear with me...

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

Validation errors jigsaw.w3.org/css-validator

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

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

Jon Hicks hicksdesign.co.uk/journal

Jon Hicks hicksdesign.co.uk/journal

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

<b>

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

Validation

does

not

equal

conformity

to

Web

Standards

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

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

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

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