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
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
710
How to get a Tiger to Tulsa
mcduckyart
0
110
「デザイン」を信じるには
iflection
0
280
AIで加速するアクセシビリティのこれから
magi1125
3
560
harutaka Vision Deck
zenkigenforrecruit
0
150
デザイナーとPMの両ロール_3つのポイント
toy1618
1
330
Haley's adventure chase
ivettetwin
0
240
The Golden Whitney
ohtristanart
PRO
0
550
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
2.9k
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
370
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
1
2k
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Become a Pro
speakerdeck
PRO
29
5.4k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
GitHub's CSS Performance
jonrohan
1031
460k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
How to Ace a Technical Interview
jacobian
278
23k
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!