New Web Typography
Upcoming SlideShare
Loading in...5
×
 

New Web Typography

on

  • 1,995 views

Web Fonts -- Why they're Revolutionizing the Web and What You Need to Know to Use Them to Your Advantage

Web Fonts -- Why they're Revolutionizing the Web and What You Need to Know to Use Them to Your Advantage

Statistics

Views

Total Views
1,995
Slideshare-icon Views on SlideShare
1,995
Embed Views
0

Actions

Likes
4
Downloads
26
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    New Web Typography New Web Typography Presentation Transcript

    • 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