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

Type Rendering

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

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
750
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
2
1.6k
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
5
320
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
12
870
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
820

Other Decks in Design

See All in Design
B47067669f78a7a0eb4fbf1ca3f7276c?s=48 alyciawhite25
0
140
B07c902ad7d00427cd936f41c08a46f8?s=48 jayster5678
0
480
D320a0bec0f768cc36af435cb6bd96fb?s=48 nrasoul
3
440
6d91cf9d7d3eb0954425a0a8aef69bef?s=48 andreh
0
150
E4146a9b322b8d0c5cc26bcc8657c4cd?s=48 ogishio
0
250
4ad09e4dd3ea77fadfb202c0d5616f1d?s=48 tessaabrams
0
980
10c8a39aceda66f69b4ee6b4d39a30f5?s=48 mashida
1
490
07c44e584cccec3a97319a8f5471ec68?s=48 mannuamrit
0
380
00ff292ab7936a0a4e4c8a76ab5b4d52?s=48 lily2251390
0
240
76168a2da5c22ec0db3990392c8c9b91?s=48 isawiitch
0
230
00ff292ab7936a0a4e4c8a76ab5b4d52?s=48 lily2251390
0
450
67b668dc2594d034dee8e25098ce6d37?s=48 juanluisbravo
2
600

Featured

See All Featured
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
117
4.9k
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
8
720
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
260
11k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
86
8.6k
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
195
15k
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
116
7.2k
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
56
6.4k
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
176
14k
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
94
5.5k
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
24
2.6k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
311
21k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
683
180k

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