The state of Web Type: Short Introduction
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.52 MB, 50 trang )
WEB TYPE
The State of
Auckland Web Meetup ¶ 20 May 2010 ¶ Matthew Buchanan
A seventh-grader writing a book report on
Microsoft Word had more font choices than
the person designing Esquire magazine’s
website or the Ikea online catalog.
—DEBORAH NETBURN, LOS ANGELES TIMES
latimesblogs.latimes.com/home_blog/2010/05/the-changing-typography-of-the-web.html
Source: www.flickr.com/photos/six_7_8/3854121575/
WHERE WERE WE?
BROWSER FONTS
Verdana
Arial
Helvetica
Lucida
Tahoma
Trebuchet
Calibri
sans
SERIF
SERIF
Times
Georgia
Palatino
Cambria
<h1>My Title</h1>
h1 {
background-image: url(title.png);
text-indent: -999em;
overflow: hidden;
}
the
GOOD
IMAGE REPLACEMENT
the
BAD
Any typeface
Consistent rendering
Typographic control
Widest support
Not dynamic
Inefficient
Text selection
Images-off issue
<h1>My Title</h1>
<script>
if(typeof sIFR == "function")
sIFR.replaceElement("h1", "font.swf");
</script>
the
GOOD
FLASH REPLACEMENT
the
BAD
Reasonably secure
Consistent rendering
Wide support
Licensing
Configuration
Text selection
Text scaling
No Apple love
<h1>My Title</h1>
<script>
Cufon.set("fontFamily", "League Gothic");
Cufon.replace("h1");
</script>
the
GOOD
CANVAS / VML REPLACEMENT
the
BAD
Reasonably secure
Consistent rendering
No plugins
Wide support
Works on iPhone OS
Licensing
Font conversion
Configuration
Screen readers
FOUT
WHAT’S NEW?
@font-face { }
FONT-FACE EMBEDDING
First introduced in CSS2 recommendation
Removed from CSS2.1 specification
Implemented in IE4, September 1997
—Proprietary EOT format
Now in Firefox 3.5, Safari 3.1, Opera 10, Chrome 4
Being a web designer will soon require
a deeper understanding of typography
and how typefaces work.
—JASON SANTA MARIA, A LIST APART 296
www.alistapart.com/articles/on-web-typography/
@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('☺'),
url('GraublauWeb.otf') format('opentype');
}
the
GOOD
FONT-FACE EMBEDDING
the
BAD
Real fonts on the web
Web standards
No plugins
Licensing
Rendering
Security
Page weight
FOUT
FONT-FACE FORMATS
IE4+
Embedded OpenType (EOT)
60%
Firefox 3.5
TrueType, OpenType
5.8%
Firefox 3.6
TrueType, OpenType, WOFF
15.3%
Opera 10
TrueType, OpenType
1.8%
Chrome 4
TrueType, OpenType, SVG
5.5%
Safari 3.1+
TrueType, OpenType, SVG
4%
iPhone OS
SVG
total
92.4%
Source: marketshare.hitslink.com/browser-market-share.aspx?qprid=2
FONT-FACE LICENSING
Typefaces are electronic files, like MP3s
—Difficult to protect against piracy
Problem: browsers linking to raw font files
—Foundries want their hard work protected
Foundries use EULAs to control embedding
—Some specify SWF, Cufón licences, most just PDF
Obfuscation
—All formats vulnerable to being “unwrapped”
BETTER HOW?
FONT-FACE EFFECT
Web designers talking/thinking about type
Type foundries participating
New techniques and formats
—Paul Irish: “Bulletproof @font-face syntax”
—Web Open File Format (WOFF)
Hosted “middlemen” solutions
No single, standard format (yet)
There is the possibility that the middlemen,
by increasing acceptance of web fonts, will
hasten the arrival of a licensing standard—
and that this will, in turn, prompt Microsoft
to support @font-face for any licensed font.
—JEFFREY ZELDMAN, GODFATHER OF WEB DESIGN
www.zeldman.com/x/54
NEW SERVICES
Typotheque
First foundry service, per-font fee
Typekit
Hosted subscription service, via JS+CSS
FontSquirrel
Library of free fonts, kit & file generators
Kernest
Free and paid subscription service
FontFont
Per-font fee, self-hosted or via Typekit
Fonts.com
Hosted service, free trial, via JS+CSS
Fontdeck
Private beta, CSS-only hosted solution
Announced today, open-source library
NEW!
FREE FONTS
Fertigo
EXLJBRIS
Calluna
EXLJBRIS
ChunkFive
LEAGUE OF MOVEABLE TYPE
League Gothic
LEAGUE OF MOVEABLE TYPE
Museo Sans
EXLJBRIS
Titillium
ACCADEMIA DI BELLE ARTI URBINO
Quicksand
ANDREW PAGLINAWAN
Goudy Bookletter
BARRY SCHWARTZ
QUALITY CONTROL
Strunk White s
Strunk & White’s
CHUNKFIVE
FERTIGO
EXAMPLES
Source: www.typotheque.com
EXAMPLES
Source: sxsw.beercamp.com
EXAMPLES
Source: www.typekit.com/gallery
EXAMPLES
Source: www.typekit.com/gallery
IE
FIREFOX 3.6
iPHONE OS
SAFARI,
CHROME,
OPERA
TTF/OTF
WOFF
EOT
SVG
SERVICE
MIDDLEMEN
CDN
SECURITY
LICENSING
