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
Type Rendering
Search
Bram Stein
November 14, 2014
Design
7
690
Type Rendering
Deep dive into type rendering in web browsers.
Bram Stein
November 14, 2014
Tweet
Share
More Decks by Bram Stein
See All by Bram Stein
Are variable fonts the future of web typography?
bramstein
1
1.3k
Line breaking, justification, and variable fonts
bramstein
2
2.6k
The Science of Typography - DIBI
bramstein
5
450
Web Fonts Performance
bramstein
12
1.2k
The Science of Typography
bramstein
12
2.1k
Web Fonts Performance
bramstein
110
30k
The Consequences of Web Fonts
bramstein
32
3.7k
The State of Web Type
bramstein
19
5.9k
Web Typography
bramstein
7
980
Other Decks in Design
See All in Design
Emil Storyboards (2024)
abbsant
0
150
JBUG東京#22登壇資料_日頃クライアントワークを行っているディレクターが自社コーポレートサイトリニューアルを担当して学んだこと
webnaut
0
370
DMMデザイナーのプロダクトへの携わり方と組織再編
takumasaito
1
350
デザインの専門性を活かしたナレッジマネジメント活動の実践と研究
chiemitaki
0
170
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
12
5.4k
Baby Bear Genius
yvonnehsuanho
PRO
0
620
JBUG京都#1登壇資料_「考える」をマネジメントする_ビーワークス高濱
webnaut
1
440
アクセシビリティのはじめかた デザイナー編
tokimari
3
1.1k
Rebuilding Stamen’s iconic map styles with Stadia Maps
almccon
0
180
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
1
260
ノンデザイナーでもできる。直感的で使いやすいUIの設計方法
ncdc
8
7.2k
みんなでブラッシュアップするDesign Sprint_BASE BANKチームの場合
base
PRO
3
510
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
29
2.8k
Web development in the modern age
philhawksworth
204
10k
Happy Clients
brianwarren
96
6.6k
Producing Creativity
orderedlist
PRO
340
39k
Practical Orchestrator
shlominoach
185
10k
Agile that works and the tools we love
rasmusluckow
327
20k
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
123
18k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
Building Applications with DynamoDB
mza
89
6k
The Invisible Customer
myddelton
119
13k
Transcript
Type Rendering Outlines Hinting ANTIALIASING sub-pixel antialiasing Rasterizers CoreText web
fonts GDI DirectWrite Sampling BLACK & WHITE grayscale color filtering LCD pixels TrueType SVG WOFF Bezier opentype ClearType Design Responsive Smoothing Typography twitter.com/@bram_stein
TTF, OTF, SVG (WOFF, EOT)
TTF, OTF, SVG (WOFF, EOT)
TTF, OTF, SVG (WOFF, EOT)
OpenType
Outlines BASELINE X-HEIGHT CAP HEIGHT
None
None
None
Hinting
None
None
None
None
Antialiasing
None
None
None
None
None
Subpixel Antialiasing
Brian Wotherspoon - flickr.com/photos/brian_digital/
None
None
Black and White Grayscale Subpixel
Browsers
Browsers Platform
OSX iOS Chrome Sub-pixel / Grayscale Grayscale Firefox Sub-pixel /
Grayscale n/a Opera <= 12 Sub-pixel / Grayscale n/a Safari Sub-pixel / Grayscale Grayscale
Linux Android Firefox OS ChromeOS Chrome * Grayscale n/a Grayscale
Firefox * Grayscale Grayscale n/a Opera <= 12 * Grayscale n/a n/a Safari n/a n/a n/a n/a Android n/a Grayscale n/a n/a
Windows XP TTF Windows XP CFF Windows XP TTF ClearType
Windows XP CFF ClearType IE6 Grayscale - Subpixel - IE7 Grayscale - Subpixel - IE8 Grayscale ?? Subpixel ?? Chrome Grayscale Grayscale Subpixel / Grayscale Grayscale Firefox Subpixel Grayscale Subpixel Grayscale Opera <= 12 Grayscale Grayscale Subpixel Grayscale
Windows Vista Windows 7 Windows 8 Windows Phone IE7 Subpixel
(GDI) n/a n/a n/a IE8 Subpixel (GDI) Subpixel (GDI) n/a ?? IE9 Subpixel (DW) Subpixel (DW) n/a Grayscale (DW) IE10 n/a Subpixel (DW) Grayscale (DW) Grayscale (DW) Chrome Subpixel / Grayscale (GDI) Subpixel / Grayscale (GDI) Subpixel / Grayscale (GDI) n/a Firefox Subpixel (DW) Subpixel (DW) Subpixel (DW) n/a Opera <= 12 Subpixel (GDI) Subpixel (GDI) Subpixel (GDI) n/a
Responsive Typography
None
None
None
None
None
html { font-family: “Proxima Nova”, Verdana, sans-serif; font-weight: 300; }
<html class=”tr-gdi tr-aa-none”> <html class=”tr-gdi tr-aa-subpixel”>
html.tr-aa-none { font-family: Verdana; } ! html.tr-gdi { font-weight: 400;
}
typerendering.com
Outlines Hinting ANTIALIASING sub-pixel antialiasing Rasterizers CoreText web fonts GDI
DirectWrite Sampling BLACK WHITE grayscale color filtering LCD pixels TrueType SVG WOFF Bezier opentype ClearType Design Responsive Smoothing Typography Resolution DPI Mobile Typekit Request fin Thank you twitter.com/@bram_stein