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 the Web
Search
Sean McBride
May 08, 2013
Design
1
140
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
92
CCA Web Fonts Talk - 2013.09.17
seanami
0
110
More Than Type
seanami
5
240
Typo London 2012 - A Renaissance in Web Typography
seanami
4
750
CCA Web Fonts Talk - 2012.10.01
seanami
1
140
Bridging the Client-side Server-side Divide
seanami
6
790
Get the Look
seanami
33
11k
Get the Look: Use @font-face and CSS3 Like the Stars
seanami
13
2.5k
Other Decks in Design
See All in Design
Designing UIs without a UI designer
strongeron
0
130
データ活用に強い、伴走型デザインパートナー「DeC」紹介資料
hopin
0
200
社内管理画面のデザインもプロダクトデザイン
takanorip
4
740
3D空間を扱うUI表現とユーザビリティ
akinen
0
460
顧客体験を作るデザイナーが 意思決定速度を上げるために使うAI
cremacrema
2
560
共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation
fumiyaakasaka
2
230
メドレーという会社と デザインチームのひみつ/About Medley design team
medley
0
420
もち的デザイナーのキャリアデザイン新提言:副業起業家のすゝめ
mochitaro
0
1.4k
Ride or Die Animatics
warwatkar
0
140
デザインテクノロジストが先導する プロダクト開発の世界
degudegu2510
1
370
231206_Book-launch-event_kato
hjmkth
2
1.2k
Jeremy's First Day
myates3
1
130
Featured
See All Featured
Facilitating Awesome Meetings
lara
43
5.6k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.2k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Six Lessons from altMBA
skipperchong
22
3k
How to train your dragon (web standard)
notwaldorf
75
5.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Why Our Code Smells
bkeepers
PRO
331
56k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
What's new in Ruby 2.0
geeforr
337
31k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
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