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

Type Rendering

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

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
780
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
2
1.7k
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
5
330
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
12
870
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
13
1.7k
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
111
29k
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
32
3.2k
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
20
5.4k
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
7
830

Other Decks in Design

See All in Design
B4bacb21c765688684f9a1aab97935e8?s=48 saraft
1
100
2016ba6b977a2e6691811fa66d5f4336?s=48 cyberagentdevelopers
PRO
0
390
Ad94879495e21b7362d0d2c845f44bc0?s=48 soham
2
150
6a42d4bb1df118144c6b8aa1b9f7e7c0?s=48 nyuuui_design
0
1.2k
2016ba6b977a2e6691811fa66d5f4336?s=48 cyberagentdevelopers
PRO
0
910
Eb3f099a0ad1b2f8ff9180432ab10d72?s=48 mollysart
0
270
23dd78a6a0b27e29deb81748bf69b715?s=48 vonmuren
0
110
5d9c07f0c2044b1407a84d88362bc84d?s=48 estie
1
970
8de1d5b5b5cd876c10c35f40af77e154?s=48 pepabo_recruit
2
1.2k
372b0d6ab90110521a5d3aa09f736abc?s=48 seathinner
0
340
Cf3645811bcc4a1996c8915b3de9f950?s=48 masakioka
2
220
5481f706b4bfeb0569b1f759b528f6e2?s=48 sahinairvin
1
440

Featured

See All Featured
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
409
58k
79acae287842acf29084005533a7fb3b?s=48 hursman
108
9.4k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
125
21k
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
255
17k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
56
5.5k
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
341
16k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
147
6.7k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
3
650
245cee81a9c424266e5e401d844ea881?s=48 lara
591
61k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
33
3.6k
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
238
23k

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