New Web Typography
40
The New Web Typography #webfonts @aigachicago
description
Web Fonts -- Why they're Revolutionizing the Web and What You Need to Know to Use Them to Your Advantage
Transcript of New Web Typography
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
