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
150
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
96
CCA Web Fonts Talk - 2013.09.17
seanami
0
130
More Than Type
seanami
5
260
Typo London 2012 - A Renaissance in Web Typography
seanami
4
840
CCA Web Fonts Talk - 2012.10.01
seanami
1
150
Bridging the Client-side Server-side Divide
seanami
6
840
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
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
210
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
4.1k
ZKK_001.pdf
nicholaspegu
0
1.5k
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
120
Dive Deep into Communication
yomtsu
0
210
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
180
Дизайн современной услуги с Картой процесса-опыта
ashapiro
0
110
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
550
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
210
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
110
発表資料テンプレート / My slide template
thatblue
0
200
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
810
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Thoughts on Productivity
jonyablonski
69
4.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Producing Creativity
orderedlist
PRO
343
39k
Building Your Own Lightsaber
phodgson
104
6.2k
BBQ
matthewcrist
86
9.5k
We Have a Design System, Now What?
morganepeng
51
7.4k
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