Putting the font in Front-End

An old presentation from Speak The Web Liverpool event, talking about using fonts online.

Transcript

1. Putting the font
   in front-end ! Jake Smith, JP74! Speak The Web – Liverpool
2. Hello
   Hola
   Hallo
   Bonjour
   ͜Μʹͪ͸
3. Who are you?
4. Who am I?
6. Type
   The basics
7. Why use fonts? • To establish a tone of voice! • To reaffirm customer loyalty 
 through branding! • To communicate better
9. http://tbpportfolio.blogspot.com/2009/08/abcs-of-branding-posters.html
10. Type designers • Neville Brody! • Eric Gill! • Bruno Maag! • Darren Scott! • Erik Spiekermann
11. Foundries • FontFont! • [T-26]! • House Industries! • Emigre! • Hoefler & Frere-Jones
12. Foundries are like record labels
13. Foundries as a label • They have a roster of artists! • The artists produce a variety of works! • You never actually own anything you pay them for… you license it
14. I know for a fact there’s discs of my fonts 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 “
15. Typography! on the web
16. 1996 • Courier! • Times New Roman! • Arial
17. 2010 • Courier! • Times New Roman! • Arial! • Verdana! • Georgia! • Impact! • Trebuchet MS! • Comic Sans
18. 2010 • Courier! • Times New Roman! • Arial! • Verdana! • Georgia! • Impact! • Trebuchet MS! • Comic Sans
23. Witchcraft
24. The web needed better typography tools… ! …so we got hacking
25. sIFR scalable Inman Flash Replacement! ! http://wiki.novemberborn.net/sifr
26. Why choose sIFR?
27. gdruk.com
28. basics – sIFR • Font published from Flash! • Configurable through CSS and a config.js file! • Replaces any selector matching your criteria! • #protip – Only visible from a live server during dev
31. ! ! #protip – check the exported SWF!
34. Was it a success?
35. gdruk.com
36. pros – sIFR • Brand continuity! • Great with our CMS! • Degrades gracefully
38. cons – sIFR • It is difficult to learn the intricacies! • FUC! The flash of unstyled content! • Multiple instances of Flash on a page! • Awkward to style advanced user events
39. Cufón Fonts for the people! ! http://cufon.shoqolate.com
41. Why choose Cufón?
42. certeco.co.uk
43. <script src="js/cufon-yui.js"
    type="text/javascript"></script> <script src="js/Kontrapunkt_200-Kontrapunkt_700.font.js" type="text/javascript"></script>
    ! <script type="text/javascript"> Cufon.replace('h1'); </script>
44. pros – Cufón • A lot quicker to implement! • Styled by just the CSS! • Online tools for generating font outlines
45. cons – Cufón • Still getting FUC’d! • No security for reverse engineering font descriptions! • Need to check font EULAs
46. @font-face The way it should be! ! http://alistapart.com/articles/cssatten
47. basics – @font-face • Been around since 1998…! • Part of CSS2 spec! • Neither browser support the most common font format TrueType! • IEs proprietary EOT format killed off Netscape’s TrueDoc
51. @font-face { font-family: League Gothic; src: url(‘LeagueGothic.ttf’); }
52. @font-face { font-family: 'LeagueGothicRegular'; src: url('League_Gothic.eot'); src: local('League Gothic Regular'),
    local('LeagueGothic'), url('League_Gothic.woff') format('woff'), url('League_Gothic.otf') format ('opentype'), url('League_Gothic.svg#LeagueGothic') format('svg'); }
54. pros – @font-face • It’s in the spec! • all handled through CSS, no JS! • plenty of free fonts to use
55. cons – @font-face • Paid fonts VS free fonts
56. Typekit The easiest way to use real fonts on the web! ! http://typekit.com
57. basics – Typekit • Subscription based service! • Currently has 350+ fonts available! • Font references held in the CSS file,
 all standards compliant, accessible
 and legal
62. Why haven’t you chose Typekit yet?
63. pros – Typekit • Quality complete fonts! • Simple licensing plan! • Easy to incorporate into your site
64. cons – Typekit • Can’t test fonts without live connection! • Stop paying subscription, no more fonts! • Limited amount of Foundries and fonts
65. Fontdeck Delivering real fonts to your website! ! http://fontdeck.com
67. Erik Spiekermann – FontShop http://www.youtube.com/watch?v=owxO6jXXRBQ
69. Remember
    With great power comes great responsibility ! Please show some restraint!
70. Thank you
    Gracias
    Danke
    Merci
    ͋Γ͕ͱ͏ Jake Smith jake@jp74.com http://jp74.com! @jake74 http://systemerror.co.uk!