The Changing Face of Web Typography

THE CHANGING FACE OFweb typography #webqtype

JANUARY 2010“Type in HTML is limited to what theuser has installed on his/her computer” “You don’t have a lot of fonts to choose from”

I WAS WRONG

I WAS WRONGa lot has changed since then

IN THE BEGINNING (or very near it)

EARLY HTML TYPE CONTROLS <h1> – <h6> <b> <i> <strong> <em> <pre> <code> <cite>

THE <font> TAG • introduced in HTML 3.2 (January 1997) • deprecated in HTML 4.0 (December 1997)Yes, this has been deprecated for over 13 years. stop using it.

ENTER CSS• font-family stack• font-style/weight• font-size• letter-spacing• text-transform• text-indent

THE PROBLEM

THE PROBLEM Arial Palatino Comic Sans Tahoma Courier Times New Roman Georgia Trebuchet MS Impact VerdanaLucida Sans 

THE WORKAROUNDS

IMAGE REPLACEMENT

IMAGE REPLACEMENTBAD <img> element with no alt attributeBETTER <img> element within <h1> (or similar)BEST CSS background-image replacement

IMAGE REPLACEMENTIN YOUR HTML:<h1 id=“title”>This is the headline</h1>IN YOUR CSS:h1#title { height: 40px; width: 350px; overflow: hidden; text-indent: -9999px; background-image:url(headline.png);}

IMAGE REPLACEMENTPROS CONS• design flexibility • filesize issues• simple • easy to do badly• “it just works” • maintenance

sIFRScalable Inman Flash Replacement

HOW sIFR WORKSYour Generic Headline

HOW sIFR WORKS

HOW sIFR WORKSYour Generic Headline

sIFR CONSPROS • requires JS and Flash• independent of • “FOUT” content • hard to get perfect

CUFÓNno, not the Computer UFO Network

CUFÓNPROS CONS• faster than sIFR • requires JS• easier than sIFR • no text selectability • pronunciation

ENTER @font-faceOur long-awaited savior (sort of)

@font-face HISTORY• First introduced in css2 in 1998• Removed in css2.1 in 2002• Re-introduced in css3

@font-face SUPPORTIE 4 Firefox 3.5 Opera 10 Safari 3.1 Chrome 41997 2009 2009 2008 Jan 2010

HOW @font-face WORKS@font-face { font-family: ‘Yourfont’; src: url(‘fontfile.ttf’) format(‘truetype’);}@font-face { font-family: ‘Yourfont’; font-weight: bold; src: url(‘fontfile-bold.ttf’) format(‘truetype’);}body { font-family: Yourfont, Arial, sans-serif;}

BUT WAIT!

FONT FORMATSDifferent browsers support different font file types: TrueType OpenType WOFF(mobile)Safari Safari IE9 Opera Opera Firefox 3.6 Firefox Firefox Chrome 6 EOT SVG IE iOS<4.2 and of course you want to avoid local fonts...

@font-face REVISITED@font-face { font-family: MyWebFont; src: url(webfont.eot); src: url(webfont.eot?#iefix) format(embedded-opentype), url(webfont.woff) format(woff), url(webfont.ttf) format(truetype), url(webfont.svg#svgFontName) format(svg); } ...or something like that anyway...

LEVERAGING @font-face third-party hosted vs self-serve

THIRD-PARTY TOOLS • take the complexities out • often cost money • providers: Typekit.com Fonts.com Google.com/webfonts Fontdeck.com

SELF-HOSTING• no ongoing costs• no CDN (for better or worse)• require you to provide fonts in correct formats• need to worry about licensing This is fontsquirrel. fontsquirrel is your friend!

DON’T STEAL FONTS

PLACES FOR LEGIT FONTS Kernest.com Google.com/webfonts Fontsquirrel.com League of Moveable Type FontSpring.com Others....

DON’T STEAL FONTS or else kittens will die

TECHNICAL CONCERNS FOUT* Resource downloads Outages Compression Lazy Loading http://bit.ly/cfowt

ON THE HORIZON... font-kerning font-variant-ligatures font-variant-caps font-variant-numeric font-variant-alternates and more!but still nothing for cross-platform rendering!

CONNECT Ben Byrneben@byrnecreative.com facebook.com/drywall AIM: drywallbmb Twitter: @drywallhttp://spkr8.com/t/7394

http://webuquerque.com	45
http://webuquerque.ablognotlimited.com	2
http://www.webuquerque.com	1

The Changing Face of Web Typography

by drywallbmb

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 48

Statistics

The Changing Face of Web Typography Presentation Transcript