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

Type Rendering

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

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
Are variable fonts the future of web typography?
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
1
960
Line breaking, justification, and variable fonts
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
2
2k
The Science of Typography - DIBI
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
5
350
Web Fonts Performance
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
12
920
The Science of Typography
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
13
1.9k
Web Fonts Performance
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
111
29k
The Consequences of Web Fonts
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
32
3.3k
The State of Web Type
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
19
5.6k
Web Typography
A6ab7669f1496fb8df8197f55ec6f390?s=48 bramstein
7
870

Other Decks in Design

See All in Design
【デザイナー採用】YUMEMI_会社紹介/yumemi_company_introduction_designer
D9e091468953393d8465ea4f29621368?s=48 yumemi_design
0
590
Curating the #DuBoisChallenge2022
7eca3e06edc3c69004aaf57de51900c2?s=48 ajstarks
0
100
Designing Experiences For Indian Users - T-Hub
Ad94879495e21b7362d0d2c845f44bc0?s=48 soham
0
110
Детский парк Фили
E56b3a9f8228a4274e30ae739ecca06c?s=48 zapoimu
0
720
Visional 新卒デザイナー向け 会社説明資料 / Visional Company Briefing for Designer
B703da7cc05ce9718d63f9b2c6028ff7?s=48 visional_design
3
3.4k
UHA味覚糖_アンデスメロングミ提案スライド
4f1699756ddbf3f2b6f5517c29747518?s=48 zhikto
1
120
Dr.'s Prime - Branding Project - CI/VI
696174cb7bfc4ee5aedda0af8e596656?s=48 drsprime
0
490
事業会社で映像をやることの面白さ・メリット等，中途入社だからこそわかったこと
2016ba6b977a2e6691811fa66d5f4336?s=48 cyberagentdevelopers
PRO
0
440
プロダクト開発に活きるUXリサーチ - 基礎編 -
3bb2326963c24027cdf173579290bd6d?s=48 shippio
3
2.6k
Driveline: Arizona (Storyboards)
966a7d3473313a57827602754b617993?s=48 8sided
PRO
0
230
Омские улицы — 2022
3ed98d0c9704e28a7da4d5d7ea9c320f?s=48 roudakov
0
190
Filmarks デザイナー向け紹介資料
46cd93c934d7881b0b2cca93674d8cbd?s=48 shingo2000
2
960

Featured

See All Featured
From Idea to $5000 a Month in 5 Months
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
373
44k
How GitHub (no longer) Works
78b475797a14c84799063c7cd073962f?s=48 holman
297
140k
GraphQLの誤解/rethinking-graphql
3cb4e761dbdb7aebd1ffd85f752e1e3e?s=48 sonatard
31
6.8k
Git: the NoSQL Database
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
415
59k
Writing Fast Ruby
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
612
57k
It's Worth the Effort
Ba530e786553390f3fb271848485681c?s=48 3n
172
26k
For a Future-Friendly Web
F68cb25ae3e5c2106997454b13b7737d?s=48 brad_frost
166
7.5k
Embracing the Ebb and Flow
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
73
3.4k
The Brand Is Dead. Long Live the Brand.
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
46
2.7k
We Have a Design System, Now What?
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
35
3k
Building a Scalable Design System with Sketch
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
448
30k
Unsuck your backbone
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
659
55k

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