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
870
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
Typographie et intégration web
Avatar for Raphael Goetter goetter
0
170
組織で働く大人が「知らないままにやってみる」を取り戻す方法とその意味〜企業で働く実務家による実践知の言語化を事例とした考察〜
Avatar for ChiemiTaki chiemitaki
1
500
Webデザイナー中田美穂_ポートフォリオ
Avatar for miho nakada omy
0
210
Look Dev Meetup #50
Avatar for Baku Hashimoto baku89
1
530
信頼をデザインし、ブランドで市場を拓く。/ Designship2026
Avatar for Assured Inc. assuredjp
PRO
0
270
Pra não dizer que não falei das flores...
Avatar for Viviane Delvequio videlvequio
0
150
凡庸を落とすハーネス
Avatar for Hiromi Maeo hiromimaeo
2
1k
【CEDEC2026】派手さと見やすさは両立できる！『Shadowverse: Worlds Beyond』エフェクト・3D背景の超進化したビジュアル設計
Avatar for Cygames, Inc. cygames
PRO
2
2.3k
Figmaを使わなくなった私が、最近していること
Avatar for めーら/Miki mela_dayo
0
130
ひとりで作れる時代に、 判断をみんなで持つには。/ Build alone share judgment
Avatar for こぎそ / Shinichi Kogiso kgsi
1
700
富山デザイン勉強会_生成AIを使ったデザイン制作2026最新版.pdf
Avatar for keita keita_yoshikawa
0
200
クリエイティブディレクター 両角 高寛 の自己紹介
Avatar for GYRO両角 morogyro
0
240

Featured

See All Featured
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.5k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3.1k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
590
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
14
40k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
230
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
12k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
860
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.4k

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