the state of web typography

1Sunday, April 3, 2011

three YEARS ago

BarCamp Miami 2008

2Sunday, April 3, 2011

css2 TYPOGRAPHYfont-family

font-style

font-weight

font-size

word-spacing

letter-spacing

text-decoration

text-transform

line-height

vertical-align

3Sunday, April 3, 2011

beyond WEB-SAFE typographysIFR

CufónP+C DTR

FLIRSIIR

sIFR 3DTR

typeface.jsswfIR

& more!

4Sunday, April 3, 2011

“Being a web designer will soon require a deeper understanding of

typography and how typefaces work.”

N O V E M B E R 2 0 0 9

5Sunday, April 3, 2011

2010the year of @font-face

\

6Sunday, April 3, 2011

why 2010?Improved browser support

New type format for web only (WOFF)

More fonts allowing web use in EULA

More @font-face resources being available

New implementation techniques

• Typekit, Fontdeck & others

• Roll your own

7Sunday, April 3, 2011

2010: Year of @font-face

8Sunday, April 3, 2011

2010: Year of @font-face

9Sunday, April 3, 2011

2010: Year of @font-face

10Sunday, April 3, 2011

2010: Year of @font-face

11Sunday, April 3, 2011

2010: Year of @font-face

12Sunday, April 3, 2011

Where are we now?:

2011

13Sunday, April 3, 2011

css3 TYPOGRAPHY

font-variant

font-stretch

text-shadow

hypenation

word-wrap

font-size-adjust

text-emphasize

14Sunday, April 3, 2011

css3 TYPOGRAPHYtext-decoration

15Sunday, April 3, 2011

css3 TYPOGRAPHYmulti-column

16Sunday, April 3, 2011

css3 TYPOGRAPHYmulti-column

17Sunday, April 3, 2011

css3 TYPOGRAPHYtext-overflow

18Sunday, April 3, 2011

css3 TYPOGRAPHYtext-overflow

19Sunday, April 3, 2011

20Sunday, April 3, 2011

@font-face SYNTAXBulletproof @font-face

21Sunday, April 3, 2011

@font-face SYNTAXMo’ Bulletproof @font-face

22Sunday, April 3, 2011

@font-face SYNTAX

Works in Safari 5.03, IE 6-9, Firefox 3.6-4,Chrome 8, iOS 3.2-4.2, Android 2.2-2.3, Opera 11

Fontspring @font-face syntax

23Sunday, April 3, 2011

@font-face GENERATOR

24Sunday, April 3, 2011

Question:Why does the syntax have to be

so complicated?

Answer:Different browsers like different

file formats.

25Sunday, April 3, 2011

@font-face FORMATS

OTF - OpenType Font

TTF - TrueType Font

EOT - Embedded OpenType

WOFF - Web Open Font Format

SVG - Scalable Vector Graphic

26Sunday, April 3, 2011

BROWSER compatibilityFirefox 3.5+ (TTF, OTF)

Firefox 3.6+ (TTF, OTF, WOFF)

Safari 3.1+ (TTF, OTF, SVG)

Chrome 5+ (TTF, OTF, WOFF, SVG)

Opera 10+ (TTF, OTF, SVG)

IE 4+ (EOT)

IE 9+ (EOT, WOFF)

MobileWebkit (SVG)

Android (TTF, OTF)

27Sunday, April 3, 2011

WOFF?

why^

28Sunday, April 3, 2011

29Sunday, April 3, 2011

font RENDERING

http://blog.typekit.com/2010/10/05/type-rendering-on-the-web/

@font-face relies on a browser’s native font rendering

30Sunday, April 3, 2011

font RENDERING

http://blog.typekit.com/2010/10/05/type-rendering-on-the-web/

Operating systems

Web browsers

Font smoothing preferences

Font files

Typeface hinting

31Sunday, April 3, 2011

http://www.apple.com/

font RENDERINGEasy fix: hi-res displays

32Sunday, April 3, 2011

font ABUSERemember this?

(I’ve blocked it out)

33Sunday, April 3, 2011

http://www.alistapart.com/articles/on-web-typography/

“Just because you can usethe font that looks

like it’s wearing bellbottoms,doesn't mean you should.”

34Sunday, April 3, 2011

“With great powercomes great responsibility.”

U N C L E B E NSP IDERMAN

35Sunday, April 3, 2011

font LICENSINGNot all fonts are licensed for web usage

Font foundries have no way to keep fonts from being used

Typefaces are electronic files, like MP3s

• Difficult to protect against piracy

• Like pirating a movie

It’s illegal (And not cool)

36Sunday, April 3, 2011

font LICENSINGFree & open source

• fontsquirrel.com

• openfontlibrary.org

• theleagueofmoveabletype.com

• code.google.com/webfonts

37Sunday, April 3, 2011

font LICENSINGPaid font solutions

• Typekit

• Fontdeck

• WebINK (Extensis)

• Typotheque

• Kernest

• and more

• look for something from Hoefler & Frere-Jones (HF&J) soon

38Sunday, April 3, 2011

paid FONT solutions

Licensed fonts

Hosted

Secure

Writes the code

Standards compliant

Rent versus buy

Flash of Unstyled Text (FOUT)

No offline version

$$$

39Sunday, April 3, 2011

Question:What’s the difference between Typekit (or any font delivery

service) and @font-face?

Answer:Not much.

40Sunday, April 3, 2011

the FUTURE?

More fonts will include web use in EULAs

Focus on security (DRM?)

More new quality webfonts

More affordable typefaces

Offline preview in your own designs

41Sunday, April 3, 2011

the FUTURE?More paid (and unpaid) solutions

?42Sunday, April 3, 2011

the FUTURE?Improved rendering

43Sunday, April 3, 2011

resources & LINKShttp://www.alistapart.com/articles/on-web-typography/

http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

http://lostworldsfairs.com/

CSS3 Fonts module - http://www.w3.org/TR/WD-font/

http://net.tutsplus.com/tutorials/html-css-techniques/typography-on-the-web/

@font-face Code Generator - http://www.fontsquirrel.com/fontface/generator

http://blog.typekit.com/2010/10/05/type-rendering-on-the-web/

How to Choose a Typeface - http://bit.ly/choosetype

Elements of Typographic Style Applied to the Web - http://webtypography.net/intro/

Gzip your fonts - http://www.phpied.com/gzip-your-font-face-files/

44Sunday, April 3, 2011

T H A N K Sderekbender.com

@derekbenderslideshare.net/derekbender

featuring

League Gothic, Futura, Georgia, Helvetica Neue & Tungsten

vidaroo.com

45Sunday, April 3, 2011