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
530

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
2k
0d877f80c535471ede57c7a4c0f487de?s=48 idangazit
7
330
0d877f80c535471ede57c7a4c0f487de?s=48 idangazit
7
440
0d877f80c535471ede57c7a4c0f487de?s=48 idangazit
13
590
0d877f80c535471ede57c7a4c0f487de?s=48 idangazit
23
57k
0d877f80c535471ede57c7a4c0f487de?s=48 idangazit
7
84k
0d877f80c535471ede57c7a4c0f487de?s=48 idangazit
30
57k

Other Decks in Design

See All in Design
5c3442ee4addeb505f9fe95007065fa0?s=48 masaki_narizuka
2
930
128d92bf74fbf395ac55960f19f92176?s=48 anamisanga
0
150
Fbae8784cf5c2e32be00010be429fdbc?s=48 twashington16
0
570
6a6aad781996e27048d8501404625525?s=48 masatohonda
3
1.2k
2481158a72219f42b701cf0fcef12971?s=48 rvillarreal
0
120
40baebcd09b478d3e28b5ba81df2b525?s=48 tiagilles
0
170
43a4d6806e24f507d97a0780bae40665?s=48 timmychu
0
200
Ca63f6ee64787c337d905b069085324c?s=48 juliannaromero
0
380
Ed8d0bfdd4badbac64cefb21a5c7ae88?s=48 allenzhangart
0
640
E443c97680574e0990e3e5b4184254a2?s=48 aquino
0
200
E8d835dc0f30095a7e9c2a6d712c2291?s=48 oakleybillions
0
250
12703c2561e45c51802855707969a9b0?s=48 antondraws
0
240

Featured

See All Featured
245cee81a9c424266e5e401d844ea881?s=48 lara
172
9.5k
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
13
1.5k
245cee81a9c424266e5e401d844ea881?s=48 lara
16
2.6k
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
204
35k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
145
19k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
5
650
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
241
21k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
494
110k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
71
260k
24fc194843a71f10949be18d5a692682?s=48 gr2m
83
11k
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
656
54k
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
274
31k

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!