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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Bram Stein
November 14, 2014
Design
7
800
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.5k
Line breaking, justification, and variable fonts
bramstein
2
3k
The Science of Typography - DIBI
bramstein
5
670
Web Fonts Performance
bramstein
12
1.3k
The Science of Typography
bramstein
12
2.4k
Web Fonts Performance
bramstein
110
31k
The Consequences of Web Fonts
bramstein
32
4k
The State of Web Type
bramstein
19
6.2k
Web Typography
bramstein
7
1k
Other Decks in Design
See All in Design
DMMデザイナーの “AI活用の現在と未来”
takumasaito
1
440
ユーザー像を「みてね」らしく可視化する 家族アルバムみてねUXリサーチチームの取り組み
mixi_design
PRO
3
730
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
akatsuki174
1
500
「余白」と「欲望」を味方につける ——AI時代のデザインエンジニアリングと「越境」の作法 #KNOTS2026
koyaman
1
1.3k
コムデマネージャーがプロダクトデザインに挑戦した。むずかしくて楽しかった。
payatsusan213
0
200
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
mewmo
PRO
0
160
Correspondence:共に生成していく過程
akiramotomura
0
190
OJTで学んだ 「心を動かす」ファシリテーション
saki822
1
240
2026年、デザイナーはなにに賭ける?
0b1tk
0
480
Drawing for Animation
lynteo
2
190
新規AIプロダクトで、事前に知るべきだった3つの壁 〜医療AIを1年間作って、従来の開発が通用しなかった話〜 / Three Walls in Building AI Products
shikichee
2
3.3k
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
techtekt
PRO
7
1.8k
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
135
9.7k
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
55
[RailsConf 2023] Rails as a piece of cake
palkan
59
6.3k
The AI Search Optimization Roadmap by Aleyda Solis
aleyda
1
5.2k
Building AI with AI
inesmontani
PRO
1
690
Docker and Python
trallard
47
3.7k
Public Speaking Without Barfing On Your Shoes - THAT 2023
reverentgeek
1
310
Large-scale JavaScript Application Architecture
addyosmani
515
110k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.4k
The Curse of the Amulet
leimatthew05
1
8.6k
Raft: Consensus for Rubyists
vanstee
141
7.3k
How STYLIGHT went responsive
nonsquared
100
6k
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