New Web Typography

The New Web Typography #webfonts @aigachicago

Web Design is 95% Typography Oliver Reichenstein October 19, 2006 http://bit.ly/aKq4RK

Web design is aboutthe user experience& brand experience

From desktop to mobile

Great Typography equals Great Usability

Brand consistency → familiarity, comfortAppropriate typeface → clear communicationGood typography → readability & navigationUser 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 are Web fonts?

The ability to go beyond “Web-safe” fontsh1 {font-family: Helvetica, Arial, Verdana, Calibri, Sans-serif; font-size: 40px; font-style: bold;}

Expand your typographic choices with downloadable fontsh1 {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 fontsEliminate headline images > Text is more flexible > Streamline workflow

Primary benefits of Web fontsEliminate headline imagesImprove typographic consistency (print>Web)

Primary benefits of Web fontsEliminate headline imagesImprove typographic consistency (print>Web)Achieve Web standards compliance > Accessibility > SEO indexibility

How did we get here?

Web fonts have come a long way1998 2004 2008 2010

Web font formatsToday 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 quickly97.5% of desktop browsers support Web fontsWOFF is only supported by 38% of browsers Source: W3Schools.com April 2011, Kombinat-typefounders.com May 2011

Are Web fonts easy to implement?

Web fonts can be complicated TTF W EO SV OF T G F

Coding CSS to support all browsers/* Internet Explorer */ /* Firefox 3.6+ Opera 11.5+ */@font-face { @font-face { font-family: Rockwell; font-family: Rockwell; src: url("Rockwell‐web.eot"); src: url("Rockwell‐web.woff") font-style: normal; format("woff"); font-weight: normal; font-style: normal;} font-weight: normal; }/* Firefox 3.5, Safari 3.1+,Chrome 4+, Opera 10 */ /* Safari Mobile (Except Android OS),@font-face { Chrome 3 */ font-family: Rockwell; @font-face { src: url("Rockwell‐web.ttf") font-family: Rockwell;format("truetype"); src: url("Rockwell‐web.svg#web") font-style: normal; format("svg"); font-weight: normal; font-style: normal;} font-weight: normal; }

Are you kidding me?

Web fonts are at the early stagesImage source: http://upload.wikimedia.org/wikipedia/commons/d/d3/Technology-Adoption-Lifecycle.png

How can we simplify Web fonts?

Web fonts hosting servicesWeb designers simply add a link to their CSSThe service does the heavy-liftingAutomatic updating of fonts/browser supportSubscription service vs. one-time license fee

Challengeswith Web fonts

Differences in font renderingFonts look different on Mac®, Windows®, Android™ systems> If you design on a Mac, proof on a PC

Not all fonts look good on screenLegacy “desktop” fonts made for print outputText vs. Headline fontsNew fonts are being designed for the screen

Font file sizeOn 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 my favorite Web fonts tools

browserlab.adobe.com

typetester.org

webtype.com/tools/swapper/

webfontspreview.com

What Fonthttp://chengyinliu.com/whatfont.html

“Type well used is invisible as type, just as the perfect talking voice is the unnoticed vehicle for the transmission of words, ideas.” Beatrice Warde The Crystal Goblet, 1955

Thank You! Bill Davis Bill@Fonts.comTypefaces used: Akko™ designed by Akira Kobayashi, 2011

New Web Typography

by Monotype_Imaging on Jan 17, 2012

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

New Web Typography — Presentation Transcript