Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Realizing the Expressive Potential of Fonts on ...
Search
Sean McBride
May 08, 2013
Design
1
160
Realizing the Expressive Potential of Fonts on the Web
My presentation about web fonts, Typekit, and design given at Adobe MAX in LA on May 8, 2013.
Sean McBride
May 08, 2013
Tweet
Share
More Decks by Sean McBride
See All by Sean McBride
Bringing Good Type to a New Medium
seanami
0
110
CCA Web Fonts Talk - 2013.09.17
seanami
0
140
More Than Type
seanami
5
290
Typo London 2012 - A Renaissance in Web Typography
seanami
4
880
CCA Web Fonts Talk - 2012.10.01
seanami
1
160
Bridging the Client-side Server-side Divide
seanami
6
870
Get the Look
seanami
33
11k
Get the Look: Use @font-face and CSS3 Like the Stars
seanami
13
2.6k
Other Decks in Design
See All in Design
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.1k
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
130
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
290
線で考える画面構成
natsuume
1
900
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
630
Memory Man v3 (WIP)
storybychad
PRO
0
2.2k
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
380
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
600
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
770
AIで加速するアクセシビリティのこれから
magi1125
3
590
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
340
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
5
720
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Done Done
chrislema
184
16k
Become a Pro
speakerdeck
PRO
29
5.4k
Writing Fast Ruby
sferik
628
62k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Bash Introduction
62gerente
613
210k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Producing Creativity
orderedlist
PRO
346
40k
Transcript
realizing the expressive potential of FONTS ON THE WEB
#AdobeMAX #webfonts @smcbride
SEAN McBRIDE Product Developer User Experience Web Developer
?
Let’s look at some GREAT WORK
None
None
None
None
None
None
None
None
None
None
http://lostworldsfairs.com/moon/ http://narrowdesign.com/ http://diehlgroup.com/ http://www.lbvd.com/ http://impressapenguin.com/ http://evening-edition.com/ http://shapeofdesignbook.com/introduction.html http://www.offscreenmag.com/ http://www.nytimes.com/pages/opinion/index.html http://www.newyorker.com/
But it wasn’t ALWAYS this way...
600 years of typography
thousands of fonts
1993: no fonts
2008: 18 fonts
None
None
None
Is there a BETTER way?
@font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); }
@font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); font-weight: 400; font-style:
normal; }
@font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); } h1 {
font-family: 'Awesome Font', 'Georgia', serif; }
Works in modern browsers!
GREAT! End of story?
No
How is type on the web DIFFERENT than type in
print?
Licensing Desktop Web
Formats Ag EOT Ag SVG Ag OTF/TTF Ag WOFF
EOT SVG OTF/TTF WOFF IE 5 – IE 9 IE
9 – Chrome 0.3 Chrome 4 Chrome 5 – Firefox 3.5 Firefox 3.5 Firefox 3.6 – Opera 9 Opera 10 Opera 11.01 – Safari 3.1 Safari 3.1 Safari 5.1 – iOS 1 iOS 4.2 iOS 5 – 3.1 2.2 Chrome
@font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); }
@font-face { font-family: 'Awesome Font'; src: url('awesome-font.eot'); /* IE 5-8
*/ src: local('☺'), /* sneaky trick for IE */ url('awesome-font.woff') format('woff'), /* FF 3.6+, Chrome 5+, IE9 */ url('awesome-font.ttf') format('truetype'), /* Opera, Safari, iOS4.2+ */ url('awesome-font.svg#font') format('svg'); /* iOS <4.1 */ }
@font-face { font-family: 'Awesome Font'; src: url('awesome-font.eot'); /* IE9 Compat
Modes */ src: url('awesome-font.eot?iefix') format('eot'), /* IE6-IE8 */ url('awesome-font.woff') format('woff'), /* Modern Browsers */ url('awesome-font.ttf') format('truetype'), /* Safari, Android, iOS */ url('awesome-font.svg#svgFontName') format('svg'); /* Legacy iOS */ }
@font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf')
format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); }
Rendering
None
None
None
CoreText DirectWrite GDI + ClearType GDI + Standard
Page Size ??? Kb
None
Fallback fonts Aa Aa
None
None
Hosted web font SERVICES help to make it easier
None
None
@font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf')
format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } http://use.typekit.net/abc1def.js http://use.edgefonts.net/droid-sans.js
None
None
None
But, challenges remain.
On the web, we build LIVING THINGS instead of static
artifacts
The web brings new RULES & POSSIBILITIES that we must
respond to
Ideas Forms
Jonathan Hoefler Pivot: AIGA Design Conference 15 October 2011
Idea DESIGN SYSTEM Form
The NY Times DESIGN SYSTEM DESIGN SYSTEM
None
None
None
Original Idea DESIGN SYSTEM Original Form DESIGN SYSTEM New Form
Original Idea DESIGN SYSTEM Magazine Spread DESIGN SYSTEM ?
None
None
None
Web font demo
None
None
[email protected]
@smcbride
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con
dential. Take the SESSION SURVEY on the MAX COMPANION app 76 …for your chance to WIN one of these e-books from Adobe Press Every survey you submit enters your name to win the daily grand prize - an Apple® iPod Nano®.
[email protected]
@smcbride