Web Fonts: Why Bother?

Web Fonts: Why Bother?Greg Veen, 29 March 2011, Web 2.0 Expo, San Francisco

Hello, I’m GregVeenWeb designer, developerNow: Co-founder,Before: Twitter, Google,Monster.com...

@gregveen

@gregveen#w2e #webfonts

AgendaA web typography renaissanceHow did we get here?The value of web fontsChallenges, advancesQ&A

600 years of typography

thousandsoffonts

1993:nofonts

2008:18fonts

today: new browsers

AgendaA web typography renaissanceHow did we get here?The value of web fontsChallenges, advancesQ&A

formats

OTF SVG WOFF EOT formats

OTF/TTF SVG WOFF EOT IE9 IE9 IE5 FF3.5 FF3.5 FF3.6Chrome 4 Chrome 0.3 Chrome 5Safari 3.1 Safari 3.1Opera 10 Opera 9 iOS 4.2 iOS 1 2.2 browsers

@font-face { font-family: Awesome Font; src: url(awesome-font.ttf);}

@font-face { font-family: Awesome Font; src: url(awesome-font.ttf);}h1 { font-family: Awesome Font, Georgia, serif;}

OTF/TTF SVG WOFF EOT IE9 IE9 IE5 FF3.5 FF3.5 FF3.6Chrome 4 Chrome 0.3 Chrome 5Safari 3.1 Safari 3.1Opera 10 Opera 9 iOS 1 2.2 browsers

@font-face { font-family: Awesome Font; src: url(awesome-font.eot); /* IE 5-8 */ src: local(☺), /* sneaky trick for IE */ url(awesome-font.woff) format(woff), /* FF 3.6+, Chrome 5+, IE9 */ url(awesome-font.ttf) format(truetype), /* Opera, Safari, iOS4.2+ */ url(awesome-font.svg#font) format(svg); /* iOS <4.1 */}

@font-face { font-family: Awesome Font; src: url(awesome-font.eot); /* IE 5-8 */ src: local(☺), /* sneaky trick for IE */ url(awesome-font.woff) format(woff), /* FF 3.6+, Chrome 5+, IE9 */ url(awesome-font.ttf) format(truetype), /* Opera, Safari, iOS4.2+ */ url(awesome-font.svg#font) format(svg); /* iOS <4.1 */}@media screen and (max-device-width: 480px) { @font-face { font-family: "Awesome Font"; src: url("awesome-font.woff") format("woff"), url("GraublauWeb.otf") format("opentype"), url("GraublauWeb.svg#grablau") format("svg");}}

@font-face { font-family: Awesome Font; src: url(awesome-font.eot); /* IE9 Compat Modes */ src: url(awesome-font.eot?iefix) format(eot), /* IE6-IE8 */ url(awesome-font.woff) format(woff), /* Modern Browsers */ url(awesome-font.ttf) format(truetype), /* Safari, Android, iOS */ url(awesome-font.svg#svgFontName) format(svg); /* Legacy iOS */}

rendering

Rendering factors1) type design philosophy2) font ﬁle and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences

TrueType and

Rendering factors1) type design philosophy2) font ﬁle and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences

Core Text

Core TextDirectWrite

GDI + Core Text ClearType

Core TextGDI + Standard

Core + no GDI Text

Flash ofunstyled text

“Radical Web Typography”

h1.fancy_title .char3,h1.fancy_title .char4 { position: relative; top: -10px;}

Thank you!

Questions?Comments?

@gregveen

http://lanyrd.com	9
http://geeksenavion.posterous.com	4
http://paper.li	2
http://www.onlydoo.com	1
http://www.mongodb.org	1
http://twitter.com	1
http://drizzlin.com	1

Web Fonts: Why Bother?

by Greg Veen

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 19

Statistics

Web Fonts: Why Bother? Presentation Transcript