My slides from the Standards>Next talk at MadLab in Manchester – Wednesday 23 March 2011

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—