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
380
Data, Design, Meaning at Reversim Summit 2013
idangazit
7
950
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
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
11k
Crisp Code inc. ブランドガイドライン
so_kotani
1
170
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.1k
クライアントワークにおける UXリサーチの実践
kozotaira
0
620
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
560
Haley's adventure chase
ivettetwin
0
160
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
370
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
900
線で考える画面構成
natsuume
1
850
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
350
Echoes Boomerang
artcloudyu
PRO
0
190
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
4
230
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
523
40k
Navigating Team Friction
lara
185
15k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Building Adaptive Systems
keathley
41
2.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Optimizing for Happiness
mojombo
378
70k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
RailsConf 2023
tenderlove
30
1.1k
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!