Type Rendering

A6ab7669f1496fb8df8197f55ec6f390?s=47 Bram Stein
November 14, 2014
Design
7
370

Type Rendering

Deep dive into type rendering in web browsers.

A6ab7669f1496fb8df8197f55ec6f390?s=128

Bram Stein

November 14, 2014
Tweet

More Decks by Bram Stein

See All by Bram Stein
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
1
710
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
2
1.6k
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
5
320
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
12
860
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
13
1.7k
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
111
28k
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
32
3.1k
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
20
5.4k
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
7
810

Other Decks in Design

See All in Design
51a580302e2e8400827419adef05c659?s=48 waaakameeee
0
910
536c406c2a293397e5139a8694fa212d?s=48 kenhsu
0
1.5k
E8357bc2fb46be7f584d4ec88eb23b0e?s=48 tallychyck
2
130
E75506cfbe3108e09d15acc7eaa7e3a2?s=48 reeyama
0
150
5d2e1fa8c731ec227fda8adee714cc9d?s=48 ka3zu1ma10
0
230
32f36540131c92a5ae9bd1f86dd3340c?s=48 mechamomo
1
140
Cf3645811bcc4a1996c8915b3de9f950?s=48 masakioka
3
280
E939d641f9c5618c6d1386cfca9da37d?s=48 1shiharat
2
210
Ed8d0bfdd4badbac64cefb21a5c7ae88?s=48 allenzhangart
0
180
D85ed61a4a79851eab706d3fa1a73cc9?s=48 ryosukeoshida
0
220
611d5744afc7a95add674225bc6b19b7?s=48 kamera25
2
240
2bd8a98ec6d131cc4b1a9a7b6ad6cfc7?s=48 kino
1
120

Featured

See All Featured
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
92
13k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
145
6.5k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
283
18k
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
252
19k
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
92
2.9k
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
773
190k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
393
60k
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
236
9.8k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
408
57k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
400
20k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
100
11k
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1020
370k

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