Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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
710
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
エンジニアがAI活用してスライドデザインできる世界が来たよ！
Avatar for 甲斐 甲 kaikou
1
430
Build for the Web, Build on the Web, Build With the Web
Avatar for Harry Roberts csswizardry
0
520
Basket_of_love.pdf
Avatar for Terence Basart terencebasart
0
280
Of Ordination and Rebellion exploration sketches
Avatar for Rachel Poon rezaline
0
210
もっともらしさ生成器と暮らす – AI懐疑派の試行錯誤
Avatar for sekig(ojiee) sekiguchiy
0
150
染み出し好きの、 染み出しコントロール論
Avatar for Takeru Mukai mukai_takeru
0
420
Edmonton River Slidedeck
Avatar for Edmonton River edmontonriver
0
230
なぜ、インサイトを貯めるのか？
Avatar for 田島佳穂 tajima_kaho
3
2.7k
20260309_3月ICTデザイン勉強会_地域創生2.0
Avatar for Kimura Atsunobu a2k
0
170
いいUIとは？初心者向けに事例をもとにUIデザインを分解
Avatar for 原 佑一｜クリエイティブディレクター yuichi_hara7
4
2.5k
decksh object reference
Avatar for Anthony Starks ajstarks
2
1.8k
図面資産×AI 眠れる資産を起こす挑戦
Avatar for 青野正寛 aonomasahiro
0
220

Featured

See All Featured
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
240
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
320
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
570
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
500
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
290
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
New Earth Scene 8
Avatar for Sydney Stone popppiees
3
2.5k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.6k
Fireside Chat
Avatar for paigeccino paigeccino
42
4k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
390
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
67
57k

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