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
Web Typography: State of the Art
Search
Idan Gazit
March 31, 2014
Design
10
770
Web Typography: State of the Art
Presented at WriteTheDocs Europe, 31st Mar 2014.
Presented at Djangocon EU, 14th May 2014
Idan Gazit
March 31, 2014
Tweet
Share
More Decks by Idan Gazit
See All by Idan Gazit
Sketching in Five Minutes
idangazit
5
310
The Art of Presentation
idangazit
4
300
Visualizing Github
idangazit
9
3k
Search: Books to Bytes
idangazit
7
390
Data, Design, Meaning at Reversim Summit 2013
idangazit
7
960
Advanced Typography for the Web
idangazit
13
640
Data Visualization with D3 and Web Standards
idangazit
23
58k
Lonely Planet Guide to F/OSS Communities
idangazit
7
86k
Better Products Through Typography
idangazit
30
59k
Other Decks in Design
See All in Design
Starry | Storyboards | Scene 1-21
giofortuna_story
0
250
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
1.8k
藤本佳子・ポートフォリオ・2025/5/29
yoshi_designer
1
5.4k
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
1
980
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
890
UXデザインはなぜ定着しないのか?
designstudiopartners
0
560
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
230
Bulletproof Design System with TypeScript
takanorip
6
2.9k
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
11k
The Golden Whitney
ohtristanart
PRO
0
400
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.5k
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
u_ri_ta
2
190
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.6k
Docker and Python
trallard
44
3.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Code Reviewing Like a Champion
maltzj
523
40k
Typedesign – Prime Four
hannesfritz
41
2.6k
A designer walks into a library…
pauljervisheath
205
24k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
The World Runs on Bad Software
bkeepers
PRO
68
11k
KATA
mclloyd
29
14k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.4k
The Power of CSS Pseudo Elements
geoffreycrofte
76
5.8k
Transcript
typography and the web the state of the art #writethedocs
eu 2014
Idan Gazit Hello there! I’m @idangazit Please, Sit back. Relax.
Enjoy yourself! ! All of the slides will be online.
core designer for visualizing data at a lovely web framework
the popular platform-as-a-service
commons.wikimedia.org/wiki/File:Lateral_head_angiogram.jpg
None
Daniel Kahneman The general principle is that anything you can
do to reduce cognitive strain will help you [be persuasive], so you should first maximize legibility.
typography SET A typefaces SET
Presenting Textual Information The Art & Science of
vs typeface kerning macro micro measure (aka “width”) leading (aka
“spacing”) flow of type on page elupton.com/2009/10/science-of-typography/
2 2 3
2 2 3
2 2 3
2 2 3
http://retinart.net/graphic-design/secret-law-of-page-harmony/
None
LIKE, NEW INFORMATION HAS COME TO LIGHT, MAN
control
none nil nada zero zip zilch nothing naught no no
control
@idangazit HI THERE, I’M flic.kr/p/6iLEF
@idangazit HI THERE, I’M flic.kr/p/89Utsr
typography and the web the state of the art #writethedocs
eu 2014
print web March of Progress IN WEB TYPOGRAPHY THE
Sometimes hard to use. Pays dividends.
Sizing Type
? ABSOLUTE ? RELATIVE
16px ABSOLUTE 1em or 100% RELATIVE
None
16px ABSOLUTE 1em or 100% RELATIVE =
The quick brown fox jumps over a lazy dog. The
quick brown fox jumps over a lazy dog. TIMES GEORGIA M “1 EM”
<html> ∅ defaults to 1em <body> 1.2em <header> 3em <h1>
1.5em 5.4em (1 × 1.2 × 3 × 1.5) or 86.4px (5.4em × 16px/1em) =
That wasn’t too bad RIGHT?
pop quiz! OK, DOCUMENTARIANS
<html> body { font-size: 1em; } <body> <header> <h1> <article>
<h1> header { font-size: 1.5em; } article { font-size: 1em; } ? ? h1 { font-size: 2em; }
<html> body { font-size: 1em; } <body> <header> <h1> <article>
<h1> header { font-size: 1.5em; } article { font-size: 1em; } ? ? h1 { font-size: 2em; }
<html> body { font-size: 1em; } <body> <header> <h1> <article
<h1 header { font-size: 1.5em; } article { font-size: 1em; } 1em × 1.5em × 2em = 3em ? h1 { font-size: 2em; }
<html> body { font-size: 1em; } <body> <header <h1 <article>
<h1> header { font-size: 1.5em; } article { font-size: 1em; } 1em × 1.5em × 2em = 3em 1em × 1em × 2em = 2em h1 { font-size: 2em; }
<html> body { font-size: 1em; } <body> <header> <h1> <article>
<h1> header { font-size: 1.5em; } article { font-size: 1em; } 1em × 1.5em × 2em = 3em 1em × 1em × 2em = 2em h1 { font-size: 2em; }
Root Ems “REMS” (to the rescue!)
EMS 1em 1em <html> 2em 2em <body> 1.5em 1.5em <header>
1.5em 1.5rem <h1> REMS
REMS 9+ github.com/chuckcarpenter/REM-unit-polyfill
Sometimes you want the cascade. Sometimes you don’t.
typography SET A typefaces SET
typography SET A typefaces SET
Foo <span class=“amp”>&</span> Bar .amp { font-family: SomeFancyFont, sans; }
Bar Foo&
font-family: Helvetica, Arial, sans-serif; La la la A’BC םולש abc123
⊗≄∭∑ὐ <p> </p>
DATABASE a of FONTS
@font-face { family-name src unicode-range font-variant font-feature-settings font-stretch font-weight font-style
} ! “FooBar” local(…), url(…) U+41-5A, U+C0-FF ! ! same as font-* rules ! !
@font-face { font-family: Alef; src: url(AlefNormal.woff); font-weight: normal; unicode-range: U+590-5FF;
/* Hebrew! */ } ! /* Use Alef font only for Hebrew */ p { font-face: Alef, Times, serif;} Unicode ranges
@font-face { font-family: MathFont; src: url(MathFont.woff); font-weight: normal; unicode-range: U+1D6B0-1D71B;
/* math */ } ! /* Consistent math symbols */ p { font-face: MathFont, Times, serif;} Unicode ranges
COOL, HUH?
CAREFUL.
@font-face { font-family: FooBar; src: url(FooBarNormal.woff); font-weight: normal; } !
p { font-face: FooBar; font-weight: bold } Faux-Bold alistapart.com/article/say-no-to-faux-bold Faux-Italic
FOUT the dreaded Flash Of Unstyled Text
None
FOUT the dreaded Flash Of Unstyled Text
FOUT the dreaded Flash Of Unstyled Text FONT the somewhat-better
Flash Of No Text
<img src=“myimg.jpg” width=400 height=300>
2s FOUT 2s FONT
3s FONT, 1s FOUT 4s FONT Soon (~v35ish) Now (v33)
>3 seconds
Adobe Blank blogs.adobe.com/typblography/2013/03/introducing-adobe-blank.html font-family: “My Custom Font”, “Adobe Blank”, sans-serif;
IE9 Data-URI fettblog.eu/blog/2012/11/16/preventing-fout-on-ie9/ @font-face { font-family: somefont; src: url(“data:application/x-font-woff;base64,AS8796ADS…”) }
Cache aggressively Don’t make users download the font more than
once
CSS3 Font Loading http://dev.w3.org/csswg/css-font-loading/
flic.kr/p/auuCWk
Type Rendering
RASTERIZERS
OSX WINDOWS GDI WIN DIRECTWRITE CLEARTYPE GRAYSCALE
FONT OUTLINES POSTSCRIPT, TRUETYPE
POSTSCRIPT TRUETYPE IE 6-8 IE 6-8 on Windows XP IE
9+ FIREFOX CHROME OPERA nope. nope. DirectWrite DirectWrite GDI Grayscale GDI Grayscale GDI Grayscale GDI ClearType DirectWrite DirectWrite GDI ClearType GDI ClearType HTTP://WWW.SMASHINGMAGAZINE.COM/2012/04/24/A-CLOSER-LOOK-AT-FONT-RENDERING/
TEST YOUR INTENDED TYPEFACES. TEST THEM EVERYWHERE TO BE SAFE.
ENOUGH OF THIS DOOM AND GLOOM. TELL ME ABOUT MORE
AWESOME STUFF.
Ligatures Ligat
Ligatures Ligat
The Four Numerals
in 1956 I bought… in 1956 I bought… OLDSTYLE LINING
FIGURES
PROPORTIONAL TABULAR $131.96 $589.22 $131.96 $589.22 FIGURES
.ligatures { font-feature-settings: “liga”; } ! .lining-numerals { font-feature-settings: “lnum”;
} ! .tabular-numerals { font-feature-settings: “tnum”; } Feature tag-value
font-feature-settings 10+ docs.webplatform.org/wiki/css/properties/font-feature-settings
whew. NOW YOU KNOW KUNG FU
IS OUR FUTURE BETTER?
CANIUSE.COM CAN I USE … ?
GO MAKE STUFF. BETTER.
@IDANGAZIT Don’t be shy. Thank you!