This document discusses typography and web fonts. It provides a brief history of fonts used on the web from 1996 to 2010. It then covers the @font-face rule which allows custom fonts to be used on websites. Both free and paid solutions for using web fonts are presented. Key considerations around web fonts like download size, copyright, and font quality are also outlined. The document concludes with comparisons between different techniques for displaying non-web fonts like sIFR, Cufon, and @font-face.

1. Hello
Hola
Hallo
Bonjour
Jake Smith— JP74— @jake74—
Typography Online— standards>next—

2. Typography
online

3. Why use fonts?
• To establish a tone of voice
• To reaffirm product recognition/loyalty
through branding
• To communicate better

5. 1996
• Courier
• Times New Roman
• Arial

6. 2010
• Courier
• Times New Roman
• Arial
• Verdana
• Georgia
• Impact
• Trebuchet MS
• Comic Sans

7. 2010
• Courier
• Times New Roman
• Arial
• Verdana
• Georgia
• Impact
• Trebuchet MS
• Comic Sans

8. “ For nearly 15 years, web designers had two
frustrating choices when it came to type on the
web: use one of the few “web safe” fonts
preinstalled on major operating systems, or
substitute text with images and Flash/
JavaScript hacks.”
FontShop – http://www.fontshop.com/fontlist/n/web_fontfonts/

13. Nonsense*
*not entirely accurate

14. @font-face

15. @font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot'); /* IE9 Compat Modes */
src: url('myfont-webfont.eot?iefix') format('eot'), /* IE6-IE8 */
url('myfont-webfont.woff') format('woff'), /* Modern Browsers */
url('myfont-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('myfont-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Further Hardening of the Bulletproof Syntax
21st February 2011
http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

16. basics – @font-face
• Been around since 1998…
• Part of CSS2 spec (removed for 2.1)
• Neither browser support the most common font
format TrueType
• IEs proprietary EOT format killed off Netscape’s
TrueDoc

17. pros – @font-face
• It’s in the spec
• all handled through CSS, no JS
• plenty of free fonts to use

18. cons – @font-face
• Hosted solution. At the mercy of others
• Adds to page download size, painful for
Chinese, Japanese and Korean (CJK) fonts
• The majority of free fonts are utter shit
• If they’re not utter shit, they’re overused
*cough* Museo *cough*

19. Free vs Paid
solutions

20. free – @font-face
• Font Squirrel
• Google Fonts API
• plenty of free fonts to use

23. paid – @font-face
• Typekit
• Fontdeck
• FontShop
• …and more

27. remember–
Font foundries are
like record labels

28. Foundries as a label
• They have a roster of designers/artists
• The artists produce a variety of fonts/songs
• You can ‘buy’ individual weights/singles or a
family/album
• You never actually own anything you pay them
for… you license it
• They can take you to court for copyright
infringement

29. “ I know for a fact thereʼs discs of my stuff doing
the rounds in Manchester, and I donʼt give a
shit. It raises my profile.”
Darren Scott
Creative Director
Truth Design Consultancy
Fonts: Aggregate, Hydrate, Mechanic Gothic, Nitrogen

30. Font services are like
streaming music services…
but probably pay the artist better

31. Erik Spiekermann – FontShop

32. Erik Spiekermann – FontShop

33. sIFR
vs
Cufon
vs
@font-face

34. examples…

36. Thank you
Gracias
Danke
Merci
Jake Smith— JP74— @jake74—
Typography Online— standards>next—