the changing face of web typography
DESCRIPTION
Type on the web has evolved significantly over time as designers and developers have fought to overcome limitations on web fonts. This presentation provides a brief history of different techniques that have been used over the years to get around these obstacles, including image replacement and sIFR, before getting in-depth with @font-face.Presented to Webuquerque on May 4, 2011.TRANSCRIPT
web typographyTHE CHANGING FACE OF
#webqtype
JANUARY 2010
“Type in HTML is limited to what the user 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
ArialComic SansCourierGeorgiaImpact
Lucida Sans
PalatinoTahomaTimes New RomanTrebuchet MSVerdana
THE WORKAROUNDS
IMAGE REPLACEMENT
IMAGE REPLACEMENT
BAD <img> element with no alt attribute
BETTER <img> element within <h1> (or similar)
BEST CSS background-image replacement
IN 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 REPLACEMENT
IMAGE REPLACEMENT
PROS• design flexibility• simple• “it just works”
CONS• filesize issues• easy to do badly• maintenance
sIFRScalable Inman Flash Replacement
HOW sIFR WORKS
Your Generic Headline
HOW sIFR WORKS
HOW sIFR WORKS
Your Generic Headline
sIFR
PROS• independent of content
CONS• requires JS and Flash• “FOUT”• hard to get perfect
CUFÓNno, not the Computer UFO Network
CUFÓN
PROS• faster than sIFR• easier than sIFR
CONS• requires JS• 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 SUPPORT
IE 41997
Firefox 3.52009
Opera 102009
Safari 3.12008
Chrome 4Jan 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:
and of course you want to avoid local fonts...
TrueType(mobile)Safari
OperaFirefox
OpenType SafariOperaFirefox
WOFFIE9
Firefox 3.6Chrome 6
EOTIE
SVGiOS<4.2
@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-facethird-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.comGoogle.com/webfonts
Fontsquirrel.comLeague of Moveable Type
FontSpring.comOthers....
DON’T STEAL FONTSor else kittens will die
TECHNICAL CONCERNS
http://bit.ly/cfowt
FOUT*Resource downloads
OutagesCompressionLazy Loading
ON THE HORIZON...
font-kerningfont-variant-ligatures
font-variant-capsfont-variant-numeric
font-variant-alternatesand more!
but still nothing for cross-platform rendering!
CONNECT
Ben Byrne
[email protected]/drywall
AIM: drywallbmbTwitter: @drywall
http://spkr8.com/t/7394