Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Type Rendering

Avatar for Bram Stein Bram Stein
November 14, 2014
Design
860
7

Type Rendering

Deep dive into type rendering in web browsers.

Avatar for Bram Stein

Bram Stein

November 14, 2014

More Decks by Bram Stein

See All by Bram Stein
Are variable fonts the future of web typography?
Avatar for Bram Stein bramstein
1
1.6k
Line breaking, justification, and variable fonts
Avatar for Bram Stein bramstein
2
3.1k
The Science of Typography - DIBI
Avatar for Bram Stein bramstein
5
720
Web Fonts Performance
Avatar for Bram Stein bramstein
12
1.3k
The Science of Typography
Avatar for Bram Stein bramstein
12
2.5k
Web Fonts Performance
Avatar for Bram Stein bramstein
110
31k
The Consequences of Web Fonts
Avatar for Bram Stein bramstein
32
4.1k
The State of Web Type
Avatar for Bram Stein bramstein
19
6.2k
Web Typography
Avatar for Bram Stein bramstein
7
1.1k

Other Decks in Design

See All in Design
いいUIとは？初心者向けに事例をもとにUIデザインを分解
Avatar for 原 佑一｜クリエイティブディレクター yuichi_hara7
13
6.9k
Where Imagination Ends AI Begins
Avatar for R-524 r5ni4
0
450
開発・制作におけるUI・UXデザインの重要性について～UI・UXデザインってなんだろう～
Avatar for yomogi_sakura yamasaku
0
240
20260422_Midosuji_Tech
Avatar for Takuya Yonezawa takuyay0ne
2
130
Jun Wei Portfolio 2026
Avatar for Wong Jun Wei wjw100788
PRO
1
330
設計の進め方と 品質特性品質特性
Avatar for harachan harakeishi
0
1.4k
2026-04-06 CMU School of Design "Vision-Driven Design"
Avatar for Hiroshi Ishii ishii_mit
0
170
SERVICE PAMPHLET
Avatar for M-HAND,Inc. mhand01
0
3.3k
Saving_the_King_-_Storyboard.pdf
Avatar for Terence Basart terencebasart
0
360
JBUG大阪#9_登壇資料_引き継ぎで困らないためのBacklogWikiの整え方_ミスと属人化を防ぐために、 “次の人が動ける状態”をどう残すか
Avatar for Beeworks Marketing Design webnaut
2
280
MUUUUU.ORG 協賛バナーのご案内
Avatar for クオートワークス quoitworks999
0
250
凡庸を落とすハーネス
Avatar for Hiromi Maeo hiromimaeo
2
950

Featured

See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.4k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
320
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
290
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
580
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
74
42k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
2.2k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.7k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
12k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
530
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
590
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
2
930
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
6.1k

Transcript

  1. 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

  2. TTF, OTF, SVG (WOFF, EOT)

  3. TTF, OTF, SVG (WOFF, EOT)

  4. TTF, OTF, SVG (WOFF, EOT)

  5. OpenType

  6. Outlines BASELINE X-HEIGHT CAP HEIGHT

  7. None
  8. None
  9. None

  10. Hinting

  11. None
  12. None
  13. None
  14. None

  15. Antialiasing

  16. None
  17. None
  18. None
  19. None
  20. None

  21. Subpixel Antialiasing

  22. Brian Wotherspoon - flickr.com/photos/brian_digital/

  23. None
  24. None

  25. Black and White Grayscale Subpixel

  26. Browsers

  27. Browsers Platform

  28. 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

  29. 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

  30. 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

  31. 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

  32. Responsive Typography

  33. None
  34. None
  35. None
  36. None
  37. None

  38. html { font-family: “Proxima Nova”, Verdana, sans-serif; font-weight: 300; }

  39. <html class=”tr-gdi tr-aa-none”> <html class=”tr-gdi tr-aa-subpixel”>

  40. html.tr-aa-none { font-family: Verdana; } ! html.tr-gdi { font-weight: 400;

    }

  41. typerendering.com

  42. 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