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

Type Rendering

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Bram Stein Bram Stein
November 14, 2014
Design
880
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
730
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.3k
Web Typography
Avatar for Bram Stein bramstein
7
1.1k

Other Decks in Design

See All in Design
MUUUUU.ORG 協賛バナーのご案内
Avatar for クオートワークス quoitworks999
0
650
分裂するデザイン、取り残される空間—インクルーシブデザインスタジオが建築をやる理由
Avatar for インクルーシブデザインスタジオCULUMU culumu
0
180
デザインハーネス 〜AIが生成する"デザイン"の妥当性を、誰がどう担保するのか〜 / PdEConf2026 Design Harness
Avatar for こぎそ / Shinichi Kogiso kgsi
14
23k
Webデザイナー中田美穂_ポートフォリオ
Avatar for miho nakada omy
0
220
組織で働く大人が「知らないままにやってみる」を取り戻す方法とその意味〜企業で働く実務家による実践知の言語化を事例とした考察〜
Avatar for ChiemiTaki chiemitaki
1
510
広い関与の可能性に どう向き合うのか？ 私たちは。｜Timee MarketingDesign 2026-06-18
Avatar for bebe bebe
0
1.2k
StartDesignEngineering
Avatar for uchiyama886 uchiyama886
1
160
エンジニアでも捗る デザイナー的思考入門(bitA Edit 新ver)
Avatar for Tsubasa SEKIGUCHI tinykitten
1
660
Jun Wei | Information Design & Presentation Portfolio
Avatar for Wong Jun Wei wjw100788
PRO
0
200
デザインハーネスをつくるハーネス｜誰でも自社らしいデザインをつくれるようにする仕組み
Avatar for Akari Katakai katakai
0
1.4k
Jun Wei Portfolio 2026
Avatar for Wong Jun Wei wjw100788
PRO
1
410
Spectrum Tokyo Meetup #26「できることが増えた時、デザイナーは何に時間を使うべきか」
Avatar for Muture muture
PRO
1
380

Featured

See All Featured
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
1
650
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
480
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
1
300
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
520
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
19k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
2
35k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
2
770
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
18k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
780
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
2
380
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
6
1.3k

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