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

Type Rendering

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

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
890
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
2
1.9k
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
5
340
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
12
880
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
13
1.8k
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
111
29k
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
32
3.3k
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
19
5.5k
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
7
840

Other Decks in Design

See All in Design
A7c2eb7bf9bb7b9cf095bab633be58fd?s=48 chostett
1
1.2k
1da528720b1e19e37477b90a0c192320?s=48 takasu3m
0
7.8k
Bff39f7d4e25a30fb4d28a9005de7363?s=48 uxaustralia
PRO
0
140
3936605ddd7a28da251afef2593be433?s=48 mariosakata
2
260
933291444e456bfb511a66a2fa9c6929?s=48 j5ik2o
1
440
5696bd82fd62181c65c8bb3c168d49c1?s=48 solmetts
0
120
Bff39f7d4e25a30fb4d28a9005de7363?s=48 uxaustralia
PRO
0
110
6e51a472cea0c9d058d830eca153cb0f?s=48 ncdc
0
120
B703da7cc05ce9718d63f9b2c6028ff7?s=48 visional_design
2
1.5k
B703da7cc05ce9718d63f9b2c6028ff7?s=48 visional_design
2
330
A7c2eb7bf9bb7b9cf095bab633be58fd?s=48 chostett
0
1.4k
633aea3a27016b588cfa67cce4df7f15?s=48 kimurakei
0
4k

Featured

See All Featured
78b475797a14c84799063c7cd073962f?s=48 holman
464
280k
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
45
2.6k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
688
180k
282d599b414022eba5096510f675b6e2?s=48 chrislema
232
16k
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
84
3.8k
828ace851b606e1206900f26459f55ad?s=48 speakerdeck
PRO
2
570
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
208
39k
5f83ef806155b403c3393160ce51f955?s=48 jlugia
218
16k
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
32
1.2k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
6
1k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
78
280k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
196
18k

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