The New Web Typography

#webfonts @aigachicago

Web Design is 95% Typography

Oliver ReichensteinOctober 19, 2006

http://bit.ly/aKq4RK

Web design is aboutthe user experience& brand experience

From desktop to mobile

Great Typographyequals

Great Usability

Brand consistency → familiarity, comfort

Appropriate typeface → clear communication

Good typography → readability & navigation

User Centric → highest level of usability and UX

2011 – year of Web fonts?

Web fonts supported by all major browsers!

Mobile Web coming along quickly

It feels like 1985 again

Web fonts will bring atypographic revolution to Web design

similar to desktop publishing!

So just what areWeb fonts?

The ability to go beyond“Web-safe” fonts

h1 {font-family:Helvetica, Arial, Verdana, Calibri, Sans-serif;font-size: 40px; font-style: bold;}

h1 {font-family:Helvetica, Arial, Verdana, Calibri, Sans-serif;font-size: 40px; font-style: bold;}

Expand your typographic choiceswith downloadable fonts

h1 {font-family: ‘Gill Sans’Helvetica, Arial, Verdana, Calibri, Sans-serif;font-size: 40px; font-style: bold;

url(‘GillSans.woff’);}

h1 {font-family: ‘Gill Sans’Helvetica, Arial, Verdana, Calibri, Sans-serif;font-size: 40px; font-style: bold;

url(‘GillSans.woff’);}

WhyWeb fonts?

Primary benefits of Web fonts

Eliminate headline images

> Text is more flexible> Streamline workflow

Primary benefits of Web fonts

Eliminate headline images

Improve typographic consistency (print>Web)

Primary benefits of Web fonts

Eliminate headline images

Improve typographic consistency (print>Web)

Achieve Web standards compliance

> Accessibility

> SEO indexibility

How did we get here?

Web fonts have come a long way

1998 201020082004

Web font formats

Today there are 4 typical Web font formats:

• TrueType® (.TTF) or OpenType® (.OTF)

• EOT (Embedded OpenType)

• SVG (Scalable Vector Graphics fonts)

• WOFF (Web Open Font Format)

Technology moves quickly

97.5% of desktop browsers support Web fonts

WOFF is only supported by 38% of browsers

Source: W3Schools.com April 2011, Kombinat-typefounders.com May 2011

Are Web fonts easyto implement?

Web fonts can be complicated

TTF WOFF

EOT

SVG

Coding CSS to support all browsers

/* Internet Explorer */@font-face {font-family: Rockwell;src: url("Rockwell‐web.eot");font-style: normal;font-weight: normal;

}

/* Firefox 3.5, Safari 3.1+, Chrome 4+, Opera 10 */@font-face {font-family: Rockwell;src: url("Rockwell‐web.ttf")

format("truetype");font-style: normal;font-weight: normal;

}

/* Firefox 3.6+ Opera 11.5+ */@font-face {font-family: Rockwell;src: url("Rockwell‐web.woff")

format("woff");font-style: normal;font-weight: normal;

}

/* Safari Mobile (Except Android OS), Chrome 3 */@font-face {font-family: Rockwell;src: url("Rockwell‐web.svg#web")

format("svg");font-style: normal;font-weight: normal;

}

Are you kidding me?

Web fonts are at the early stages

Image source: http://upload.wikimedia.org/wikipedia/commons/d/d3/Technology-Adoption-Lifecycle.png

How can we simplifyWeb fonts?

Web fonts hosting services

Web designers simply add a link to their CSS

The service does the heavy-lifting

Automatic updating of fonts/browser support

Subscription service vs. one-time license fee

Challengeswith Web fonts

Differences in font rendering

Fonts look different on Mac®, Windows®, Android™ systems

> If you design on a Mac, proof on a PC

Not all fonts look good on screen

Legacy “desktop” fonts made for print output

Text vs. Headline fonts

New fonts are being designed for the screen

Font file size

On the Web, it’s all about latency!

Ways to optimize fonts

> Subset characters for language support

> Remove OpenType features

> Use file compression

OpenType features in CSS3

Coming soon to all browsers?

Firefox test page: http://catalog.monotypeimaging.com/demo/ot.aspx

A few of myfavorite

Web fontstools

browserlab.adobe.com

typetester.org

webtype.com/tools/swapper/

webfontspreview.com

What Font

http://chengyinliu.com/whatfont.html

“Type well used is invisible as type, just as the perfect talking voiceis the unnoticed vehicle for thetransmission of words, ideas.”

Beatrice WardeThe Crystal Goblet, 1955

Thank You!

Bill Davis

Bill@Fonts.com

Typefaces used: Akko™ designed by Akira Kobayashi, 2011