Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Putting The Font In Front End



Speak The Web, Liverpool, Monday 15th February 2010

Speak The Web, Liverpool, Monday 15th February 2010



Total Views
Views on SlideShare
Embed Views



5 Embeds 37

http://www.systemerror.co.uk 21
http://jp74.com 8
http://www.slideshare.net 4
http://www.linkedin.com 3
https://www.linkedin.com 1


Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Putting The Font In Front End Putting The Font In Front End Presentation Transcript

  • Putting the font in front-end Jake Smith, JP74 Speak The Web – Liverpool
  • Hello Hola Hallo Bonjour
  • Who are you?
  • Who am I?
  • Type The basics
  • Why use fonts? • To establish a tone of voice • To reaffirm customer loyalty through branding • To communicate better
  • http://tbpportfolio.blogspot.com/2009/08/abcs-of-branding-posters.html
  • Type designers • Neville Brody • Eric Gill • Bruno Maag • Darren Scott • Erik Spiekermann
  • Foundries • FontFont • [T-26] • House Industries • Emigre • Hoefler & Frere-Jones
  • Foundries are like record labels
  • 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
  • “ 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
  • Typography on the web
  • 1996 • Courier • Times New Roman • Arial
  • 2010 • Courier • Times New Roman • Arial • Verdana • Georgia • Impact • Trebuchet MS • Comic Sans
  • 2010 • Courier • Times New Roman • Arial • Verdana • Georgia • Impact • Trebuchet MS • Comic Sans
  • Witchcraft
  • The web needed better typography tools… …so we got hacking
  • sIFR scalable Inman Flash Replacement http://wiki.novemberborn.net/sifr
  • Why choose sIFR?
  • gdruk.com
  • 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
  • #protip – check the exported SWF
  • Was it a success?
  • gdruk.com
  • pros – sIFR • Brand continuity • Great with our CMS • Degrades gracefully
  • 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
  • Cufón Fonts for the people http://cufon.shoqolate.com
  • Why choose Cufón?
  • certeco.co.uk
  • <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>
  • pros – Cufón • A lot quicker to implement • Styled by just the CSS • Online tools for generating font outlines
  • cons – Cufón • Still getting FUCʼd • No security for reverse engineering font descriptions • Need to check font EULAs
  • @font-face The way it should be http://alistapart.com/articles/cssatten
  • 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
  • @font-face { font-family: League Gothic; src: url(‘LeagueGothic.ttf’); }
  • @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'); }
  • pros – @font-face • Itʼs in the spec • all handled through CSS, no JS • plenty of free fonts to use
  • cons – @font-face • Paid fonts VS free fonts
  • Typekit The easiest way to use real fonts on the web http://typekit.com
  • basics – Typekit • Subscription based service • Currently has 350+ fonts available • Font references held in the CSS file, all standards compliant, accessible and legal
  • Why havenʼt you chose Typekit yet?
  • pros – Typekit • Quality complete fonts • Simple licensing plan • Easy to incorporate into your site
  • cons – Typekit • Canʼt test fonts without live connection • Stop paying subscription, no more fonts • Limited amount of Foundries and fonts
  • Fontdeck Delivering real fonts to your website http://fontdeck.com
  • Erik Spiekermann – FontShop http://www.youtube.com/watch?v=owxO6jXXRBQ
  • Remember With great power comes great responsibility Please show some restraint!
  • Thank you Gracias Danke Merci Jake Smith jake@jp74.com http://jp74.com @jake74 http://systemerror.co.uk