Type Rendering

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

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
650
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
2
1.5k
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
5
320
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
12
860
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
13
1.6k
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
04220a462f57cb4551c9659e94c71354?s=48 kwzr
4
220
Df24915d508e0f89ea1868c1b9819443?s=48 masashiokawa
0
120
8ba8bdc8f653a517ed8c300fbec98f15?s=48 drthdan16
0
150
4fe9c38064244b38e7cc7627135c5008?s=48 basakbuse
0
130
1b957a6255dca8e9cc77db19f2cf1358?s=48 kackington
0
280
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
5
140
Cf3645811bcc4a1996c8915b3de9f950?s=48 masakioka
2
200
6f9c90981748adfbe77022cfb228d386?s=48 michalis_art
0
140
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
10
590
42a6a049ac8f5265f31858a9509217fb?s=48 uhooi
0
180
Aab4a3f4a7479c56027a9c9ca7bcbbaf?s=48 securecat
0
320
B896d135180958999cd053869215f3f0?s=48 ohtristanart
0
200

Featured

See All Featured
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
11
260
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
407
57k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
28
3.2k
B47b288784fda77a94aeb234ca743c24?s=48 keavy
104
14k
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
18
910
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
175
7.2k
A9704266587836f7e784235e5073b93e?s=48 jmmastey
2
240
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
326
35k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
70
3.5k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
281
46k
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
193
15k
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
6
640

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