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
780
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
320
The Art of Presentation
idangazit
4
310
Visualizing Github
idangazit
9
3k
Search: Books to Bytes
idangazit
7
390
Data, Design, Meaning at Reversim Summit 2013
idangazit
7
980
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
An Early Spring | Storyboard | Scenes 1-18
giofortuna_story
0
330
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
310
問いの変遷
iflection
0
160
クライアントワークにおける UXリサーチの実践
kozotaira
0
690
AI動画生成ガチャ紹介
piyo7
1
120
Flow, Not Stock 知識触媒としてのIA
5kaichi
1
290
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.8k
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.5k
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
4
290
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
670
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
190
Cards | Storyboards
giofortuna_story
0
340
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
Embracing the Ebb and Flow
colly
86
4.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
4 Signs Your Business is Dying
shpigford
184
22k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
125
52k
Speed Design
sergeychernyshev
32
1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
How GitHub (no longer) Works
holman
314
140k
A designer walks into a library…
pauljervisheath
207
24k
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!