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
830
10

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

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
AI時代に求められるUXデザインのアプローチ
Avatar for xtone xtone
0
2k
Mandalyn_DT5001_FinalAssignment.pdf
Avatar for Mandalyn Teo lynteo
0
200
AIスライド生成を進化させるMDファイル
Avatar for 太田賢一 kenichiota0711
0
690
デザイナーとエンジニアで 同じ山に登ろう
Avatar for moco moco1013
0
200
Diverse Design Team Deck
Avatar for Diverse diverse
0
1.2k
デザインするために「多様性」について考える
Avatar for なつ iflection
0
260
「ツール」から「パートナー」へ。AI伴走時代のUXデザインとは？～操作を減らし、成果を最大にするための設計～
Avatar for NCDC ncdc
1
560
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
2
27k
Spacemarket Brand Guide
Avatar for Spacemarket spacemarket
2
420
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
Avatar for ぽん designer_no_pon
1
1.4k
デザインを信じていますか
Avatar for sekig(ojiee) sekiguchiy
1
1.1k
mount_company_profile
Avatar for mount inc. mount_inc
0
5.9k

Featured

See All Featured
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.2k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9k
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
120
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.7k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
150
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.4k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
260
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k

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!