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

Web Typography: State of the Art

0d877f80c535471ede57c7a4c0f487de?s=47 Idan Gazit
March 31, 2014
Design
10
540

Web Typography: State of the Art

Presented at WriteTheDocs Europe, 31st Mar 2014.
Presented at Djangocon EU, 14th May 2014

0d877f80c535471ede57c7a4c0f487de?s=128

Idan Gazit

March 31, 2014
Tweet

More Decks by Idan Gazit

See All by Idan Gazit
0d877f80c535471ede57c7a4c0f487de?s=48 idangazit
5
260
0d877f80c535471ede57c7a4c0f487de?s=48 idangazit
4
270
0d877f80c535471ede57c7a4c0f487de?s=48 idangazit
9
2.3k
0d877f80c535471ede57c7a4c0f487de?s=48 idangazit
7
340
0d877f80c535471ede57c7a4c0f487de?s=48 idangazit
7
500
0d877f80c535471ede57c7a4c0f487de?s=48 idangazit
13
590
0d877f80c535471ede57c7a4c0f487de?s=48 idangazit
23
57k
0d877f80c535471ede57c7a4c0f487de?s=48 idangazit
7
85k
0d877f80c535471ede57c7a4c0f487de?s=48 idangazit
30
58k

Other Decks in Design

See All in Design
6e51a472cea0c9d058d830eca153cb0f?s=48 ncdc
1
420
8ba8bdc8f653a517ed8c300fbec98f15?s=48 drthdan16
0
700
46d1b2c70b5415d9ba8d4456e8760b83?s=48 danielvdr
0
110
Bdd9e989b8078ae14ea9abd4d4d81a83?s=48 blakedg95
1
170
0f4339e081f24aac1a2b186dfd91ff3f?s=48 mirandab
0
270
C017f3b100cbaa3127ac95d9544c70d9?s=48 maxsbow
0
160
4bdbe4411c15f54a01945416f77b6c62?s=48 costanza_d
0
200
5f6c384e6fa98248221e93b31697aeb9?s=48 kaiart
1
1.5k
D38056617929476906141e6a157e0045?s=48 letsgokoyo
1
280
738333c70c6a98e7a101723c53254c06?s=48 marucoguma
1
530
6d869971088bd312ed38c47eb2eddae7?s=48 aweraewraewraewr
PRO
1
190
04d38bf39f0dd32f92b1e4624b055eec?s=48 lac4
0
170

Featured

See All Featured
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
167
19k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
287
47k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
223
15k
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
277
17k
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
342
16k
Ecdea9b9714877b86cee08458f085481?s=48 trallard
23
1.1k
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
73
7.6k
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
347
27k
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
156
12k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
10
1k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
149
12k
78b475797a14c84799063c7cd073962f?s=48 holman
292
130k

Transcript

  1. typography and the web the state of the art #writethedocs

    eu 2014

  2. Idan Gazit Hello there! I’m @idangazit Please, Sit back. Relax.

    Enjoy yourself! ! All of the slides will be online.

  3. core designer for visualizing data at a lovely web framework

    the popular platform-as-a-service

  4. commons.wikimedia.org/wiki/File:Lateral_head_angiogram.jpg

  5. None

  6. Daniel Kahneman The general principle is that anything you can

    do to reduce cognitive strain will help you [be persuasive], so you should first maximize legibility.

  7. typography SET A typefaces SET

  8. Presenting Textual Information The Art & Science of

  9. vs typeface kerning macro micro measure (aka “width”) leading (aka

    “spacing”) flow of type on page elupton.com/2009/10/science-of-typography/

  10. 2 2 3

  11. 2 2 3

  12. 2 2 3

  13. 2 2 3

  14. http://retinart.net/graphic-design/secret-law-of-page-harmony/

  15. None

  16. LIKE, NEW INFORMATION HAS COME TO LIGHT, MAN

  17. control

  18. none nil nada zero zip zilch nothing naught no no

    control

  19. @idangazit HI THERE, I’M flic.kr/p/6iLEF

  20. @idangazit HI THERE, I’M flic.kr/p/89Utsr

  21. typography and the web the state of the art #writethedocs

    eu 2014

  22. print web March of Progress IN WEB TYPOGRAPHY THE

  23. Sometimes hard to use. Pays dividends.

  24. Sizing Type

  25. ? ABSOLUTE ? RELATIVE

  26. 16px ABSOLUTE 1em or 100% RELATIVE

  27. None

  28. 16px ABSOLUTE 1em or 100% RELATIVE =

  29. The quick brown fox jumps over a lazy dog. The

    quick brown fox jumps over a lazy dog. TIMES GEORGIA M “1 EM”

  30. <html> ∅ defaults to 1em <body> 1.2em <header> 3em <h1>

    1.5em 5.4em (1 × 1.2 × 3 × 1.5) or 86.4px (5.4em × 16px/1em) =

  31. That wasn’t too bad RIGHT?

  32. pop quiz! OK, DOCUMENTARIANS

  33. <html> body { font-size: 1em; } <body> <header> <h1> <article>

    <h1> header { font-size: 1.5em; } article { font-size: 1em; } ? ? h1 { font-size: 2em; }

  34. <html> body { font-size: 1em; } <body> <header> <h1> <article>

    <h1> header { font-size: 1.5em; } article { font-size: 1em; } ? ? h1 { font-size: 2em; }

  35. <html> body { font-size: 1em; } <body> <header> <h1> <article

    <h1 header { font-size: 1.5em; } article { font-size: 1em; } 1em × 1.5em × 2em = 3em ? h1 { font-size: 2em; }

  36. <html> body { font-size: 1em; } <body> <header <h1 <article>

    <h1> header { font-size: 1.5em; } article { font-size: 1em; } 1em × 1.5em × 2em = 3em 1em × 1em × 2em = 2em h1 { font-size: 2em; }

  37. <html> body { font-size: 1em; } <body> <header> <h1> <article>

    <h1> header { font-size: 1.5em; } article { font-size: 1em; } 1em × 1.5em × 2em = 3em 1em × 1em × 2em = 2em h1 { font-size: 2em; }

  38. Root Ems “REMS” (to the rescue!)

  39. EMS 1em 1em <html> 2em 2em <body> 1.5em 1.5em <header>

    1.5em 1.5rem <h1> REMS

  40. REMS 9+ github.com/chuckcarpenter/REM-unit-polyfill

  41. Sometimes you want the cascade. Sometimes you don’t.

  42. typography SET A typefaces SET

  43. typography SET A typefaces SET

  44. Foo <span class=“amp”>&amp;</span> Bar .amp { font-family: SomeFancyFont, sans; }

    Bar Foo&

  45. font-family: Helvetica, Arial, sans-serif; La la la A’BC םולש abc123

    ⊗≄∭∑ὐ <p> </p>

  46. DATABASE a of FONTS

  47. @font-face { family-name src unicode-range font-variant font-feature-settings font-stretch font-weight font-style

    } ! “FooBar” local(…), url(…) U+41-5A, U+C0-FF ! ! same as font-* rules ! !

  48. @font-face { font-family: Alef; src: url(AlefNormal.woff); font-weight: normal; unicode-range: U+590-5FF;

    /* Hebrew! */ } ! /* Use Alef font only for Hebrew */ p { font-face: Alef, Times, serif;} Unicode ranges

  49. @font-face { font-family: MathFont; src: url(MathFont.woff); font-weight: normal; unicode-range: U+1D6B0-1D71B;

    /* math */ } ! /* Consistent math symbols */ p { font-face: MathFont, Times, serif;} Unicode ranges

  50. COOL, HUH?

  51. CAREFUL.

  52. @font-face { font-family: FooBar; src: url(FooBarNormal.woff); font-weight: normal; } !

    p { font-face: FooBar; font-weight: bold } Faux-Bold alistapart.com/article/say-no-to-faux-bold Faux-Italic

  53. FOUT the dreaded Flash Of Unstyled Text

  54. None

  55. FOUT the dreaded Flash Of Unstyled Text

  56. FOUT the dreaded Flash Of Unstyled Text FONT the somewhat-better

    Flash Of No Text

  57. <img src=“myimg.jpg” width=400 height=300>

  58. 2s FOUT 2s FONT

  59. 3s FONT, 1s FOUT 4s FONT Soon (~v35ish) Now (v33)

    >3 seconds

  60. Adobe Blank blogs.adobe.com/typblography/2013/03/introducing-adobe-blank.html font-family: “My Custom Font”, “Adobe Blank”, sans-serif;

  61. IE9 Data-URI fettblog.eu/blog/2012/11/16/preventing-fout-on-ie9/ @font-face { font-family: somefont; src: url(“data:application/x-font-woff;base64,AS8796ADS…”) }

  62. Cache aggressively Don’t make users download the font more than

    once

  63. CSS3 Font Loading http://dev.w3.org/csswg/css-font-loading/

  64. flic.kr/p/auuCWk

  65. Type Rendering

  66. RASTERIZERS

  67. OSX WINDOWS GDI WIN DIRECTWRITE CLEARTYPE GRAYSCALE

  68. FONT OUTLINES POSTSCRIPT, TRUETYPE

  69. POSTSCRIPT TRUETYPE IE 6-8 IE 6-8 on Windows XP IE

    9+ FIREFOX CHROME OPERA nope. nope. DirectWrite DirectWrite GDI Grayscale GDI Grayscale GDI Grayscale GDI ClearType DirectWrite DirectWrite GDI ClearType GDI ClearType HTTP://WWW.SMASHINGMAGAZINE.COM/2012/04/24/A-CLOSER-LOOK-AT-FONT-RENDERING/

  70. TEST YOUR INTENDED TYPEFACES. TEST THEM EVERYWHERE TO BE SAFE.

  71. ENOUGH OF THIS DOOM AND GLOOM. TELL ME ABOUT MORE

    AWESOME STUFF.

  72. Ligatures Ligat

  73. Ligatures Ligat

  74. The Four Numerals

  75. in 1956 I bought… in 1956 I bought… OLDSTYLE LINING

    FIGURES

  76. PROPORTIONAL TABULAR $131.96 $589.22 $131.96 $589.22 FIGURES

  77. .ligatures { font-feature-settings: “liga”; } ! .lining-numerals { font-feature-settings: “lnum”;

    } ! .tabular-numerals { font-feature-settings: “tnum”; } Feature tag-value

  78. font-feature-settings 10+ docs.webplatform.org/wiki/css/properties/font-feature-settings

  79. whew. NOW YOU KNOW KUNG FU

  80. IS OUR FUTURE BETTER?

  81. CANIUSE.COM CAN I USE … ?

  82. GO MAKE STUFF. BETTER.

  83. @IDANGAZIT Don’t be shy. Thank you!