The Trouble With Type
Problems and solutions in web typography

by Elliot Jay Stocks
elliotjaystocks.com | twitter.com/ell...
1
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
The early days...
... Dreamweaver...
... confusion!

The choice of fonts appeared
to be system-wide

It wasn’t clear about...
The early days...
... Dreamweaver...
... confusion!

The choice of fonts appeared
to be system-wide

It wasn’t clear about...
The allure of Flash
The allure of Flash

You can use any font you like
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...
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 ...
Back to basics: HTML

Accessible:
screenreader-friendly and allows for resizing.

Updatable:
the source text dictates the ...
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
...
sIFR
sIFR at work on JSM’s site
jasonsantamaria.com
sIFR
sIFR

The best of both worlds: the accessibility and
‘selectability’ of HTML but with (some of)* the benefits
of Flash-base...
sIFR

The best of both worlds: the accessibility and
‘selectability’ of HTML but with (some of)* the benefits
of Flash-base...
sIFR

The best of both worlds: the accessibility and
‘selectability’ of HTML but with (some of)* the benefits
of Flash-base...
“
    While sIFR gives us better typography today, it is clearly
    not the solution for the next 20 years.

    It is bu...
“
    While sIFR gives us better typography today, it is clearly
    not the solution for the next 20 years.

    It is bu...
“
    While sIFR gives us better typography today, it is clearly
    not the solution for the next 20 years.

    It is bu...
Font embedding

Browser-supported font embedding is, I believe, the
future of web typography.
2
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.

Curre...
@font-face

Originated in the CSS2 spec, despite its general
association with CSS3.

Extremely simple to implement.

Curre...
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).
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.

M...
Microsoft’s EOT
(Embedded Open Type)

Supported since IE4 (but not in IE8 yet).

Font encoding protects against piracy.

M...
Microsoft’s EOT
(Embedded Open Type)

Supported since IE4 (but not in IE8 yet).

Font encoding protects against piracy.

M...
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...
The issues

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

How do we cope with licenses...
<style type=quot;text/cssquot; media=quot;screenquot;>

       @font-face{
       font-family:'Fontin-Regular';
       src...
<style type=quot;text/cssquot; media=quot;screenquot;>

       @font-face{
       font-family:'Fontin-Regular';
       src...
<style type=quot;text/cssquot; media=quot;screenquot;>

       @font-face{
       font-family:'Fontin-Regular';
       src...
<style type=quot;text/cssquot; media=quot;screenquot;>

       @font-face{
       font-family:'Fontin-Regular';
       src...
<style type=quot;text/cssquot; media=quot;screenquot;>

       @font-face{
       font-family:'Fontin-Regular';
       src...
<style type=quot;text/cssquot; media=quot;screenquot;>

       @font-face{
       font-family:'Fontin-Regular';
       src...
What needs to happen?
(a sort of conclusion)
What needs to happen?
(a sort of conclusion)

Font foundries need to be protected by the
technology, as they are with EOT.
What needs to happen?
(a sort of conclusion)

Font foundries need to be protected by the
technology, as they are with EOT....
What needs to happen?
(a sort of conclusion)

Font foundries need to be protected by the
technology, as they are with EOT....
Further reading
Jon Allsopp: The return of font embedding to the web?
webdirections.org/blog/the-return-of-font-embedding-...
Thank you!
elliotjaystocks.com | twitter.com/elliotjaystocks




Cover background image from ilovetypography.com/love
Upcoming SlideShare
Loading in...5
×

The Trouble With Type

3,160

Published on

Published in: Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,160
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
69
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

The Trouble With Type

  1. 1. The Trouble With Type Problems and solutions in web typography by Elliot Jay Stocks elliotjaystocks.com | twitter.com/elliotjaystocks
  2. 2. 1 A personal typographic journey
  3. 3. The early days... ... Dreamweaver... ... confusion!
  4. 4. The early days... ... Dreamweaver... ... confusion! The choice of fonts appeared to be system-wide
  5. 5. Note: CS3 panel shown Dreamweaver adobe.com/products/dreamweaver
  6. 6. The early days... ... Dreamweaver... ... confusion! The choice of fonts appeared to be system-wide
  7. 7. The early days... ... Dreamweaver... ... confusion! The choice of fonts appeared to be system-wide It wasn’t clear about web-safe fonts
  8. 8. 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
  9. 9. The allure of Flash
  10. 10. The allure of Flash You can use any font you like
  11. 11. The allure of Flash You can use any font you like Layout freedom, a la print design (vs. HTML inconsistency)
  12. 12. 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
  13. 13. Back to basics: HTML
  14. 14. Back to basics: HTML Accessible: screenreader-friendly and allows for resizing.
  15. 15. Back to basics: HTML Accessible: screenreader-friendly and allows for resizing. Updatable: the source text dictates the final render.
  16. 16. 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!
  17. 17. Image replacement
  18. 18. Image replacement PROS It looks good It gives control over other elements besides type
  19. 19. 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
  20. 20. sIFR
  21. 21. sIFR at work on JSM’s site jasonsantamaria.com
  22. 22. sIFR
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. “ 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
  27. 27. “ 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
  28. 28. “ 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
  29. 29. Font embedding Browser-supported font embedding is, I believe, the future of web typography.
  30. 30. 2 The future of web typography
  31. 31. @font-face
  32. 32. @font-face Originated in the CSS2 spec, despite its general association with CSS3.
  33. 33. @font-face Originated in the CSS2 spec, despite its general association with CSS3. Extremely simple to implement.
  34. 34. @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
  35. 35. @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!)
  36. 36. Jos Buivenga’s fonts josbuivenga.demon.nl
  37. 37. Microsoft’s EOT (Embedded Open Type)
  38. 38. Microsoft’s EOT (Embedded Open Type) Supported since IE4.
  39. 39. IE4!!!
  40. 40. Microsoft’s EOT (Embedded Open Type) Supported since IE4 (but not in IE8 yet).
  41. 41. Microsoft’s EOT (Embedded Open Type) Supported since IE4 (but not in IE8 yet). Font encoding protects against piracy.
  42. 42. Microsoft’s EOT (Embedded Open Type) Supported since IE4 (but not in IE8 yet). Font encoding protects against piracy. Microsoft doing something... right?!?
  43. 43. Microsoft’s EOT (Embedded Open Type) Supported since IE4 (but not in IE8 yet). Font encoding protects against piracy. Microsoft doing something... right?!? EOT has been submitted to the W3C for approval as a new standard. Adobe have also helped development.
  44. 44. Microsoft’s EOT (Embedded Open Type) Supported since IE4 (but not in IE8 yet). Font encoding protects against piracy. Microsoft doing something... right?!? EOT has been submitted to the W3C for approval as a new standard. Adobe have also helped development. WEFT: Web Embedding Fonts Tool for making .eot files.
  45. 45. The issues
  46. 46. The issues Protection is needed for font foundries to counteract font piracy (as with EOT).
  47. 47. 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.
  48. 48. 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.
  49. 49. <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
  50. 50. <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
  51. 51. <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
  52. 52. <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
  53. 53. <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
  54. 54. <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
  55. 55. What needs to happen? (a sort of conclusion)
  56. 56. What needs to happen? (a sort of conclusion) Font foundries need to be protected by the technology, as they are with EOT.
  57. 57. What needs to happen? (a sort of conclusion) 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.
  58. 58. What needs to happen? (a sort of conclusion) 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!
  59. 59. Further reading 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 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
  60. 60. Thank you! elliotjaystocks.com | twitter.com/elliotjaystocks Cover background image from ilovetypography.com/love
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×