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

Web Typography: State of the Art

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Idan Gazit Idan Gazit
March 31, 2014
Design
10
820

Web Typography: State of the Art

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

Avatar for Idan Gazit

Idan Gazit

March 31, 2014
Tweet

More Decks by Idan Gazit

See All by Idan Gazit
Sketching in Five Minutes
Avatar for Idan Gazit idangazit
5
350
The Art of Presentation
Avatar for Idan Gazit idangazit
4
330
Visualizing Github
Avatar for Idan Gazit idangazit
9
3k
Search: Books to Bytes
Avatar for Idan Gazit idangazit
7
420
Data, Design, Meaning at Reversim Summit 2013
Avatar for Idan Gazit idangazit
7
1.1k
Advanced Typography for the Web
Avatar for Idan Gazit idangazit
13
680
Data Visualization with D3 and Web Standards
Avatar for Idan Gazit idangazit
23
58k
Lonely Planet Guide to F/OSS Communities
Avatar for Idan Gazit idangazit
7
86k
Better Products Through Typography
Avatar for Idan Gazit idangazit
30
59k

Other Decks in Design

See All in Design
「自分の仕事はどこまで？」と問い続けたら。デザイナーの「視座」を考える
Avatar for Takeru Mukai mukai_takeru
0
320
見栄えと使いやすさの先にある 特別感 をデザインする / Designing a Sense of Specialness Beyond Aesthetics and Usability
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
280
mount_company_profile
Avatar for mount inc. mount_inc
0
5.9k
富山デザイン勉強会_デザイントレンド2026.pdf
Avatar for keita keita_yoshikawa
3
140
絵や写真から学ぶ、要素がもたらす副作用
Avatar for keigo kspace
0
230
CULTURE DECK／Marketing Director
Avatar for M-HAND,Inc. mhand01
0
1k
TUNAG BOOK 2024
Avatar for 株式会社スタメン stmn
PRO
0
1.5k
情報を翻訳する-伝わる可視化３原則とオープンデータ活用-
Avatar for Hajime Kato hjmkth
1
180
AIスライドデザインを生成する仕組みを社内共有する
Avatar for 太田賢一 kenichiota0711
6
5.1k
kintone Style Book
Avatar for kintone kintone
6
12k
Ralph Penel Portfolio
Avatar for ralphpenel ralphpenel
0
350
Figmaレクチャー会Part2 もっと使いこなす編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
1
290

Featured

See All Featured
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
180
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
450
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
400
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.6k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.3k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
64
52k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
89
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k

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!