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

Web Typography: State of the Art

Avatar for Idan Gazit Idan Gazit
March 31, 2014
Design
10
790

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
330
The Art of Presentation
Avatar for Idan Gazit idangazit
4
310
Visualizing Github
Avatar for Idan Gazit idangazit
9
3k
Search: Books to Bytes
Avatar for Idan Gazit idangazit
7
400
Data, Design, Meaning at Reversim Summit 2013
Avatar for Idan Gazit idangazit
7
1k
Advanced Typography for the Web
Avatar for Idan Gazit idangazit
13
660
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 akane akane___ui
0
12k
AI業務アプリケーションの体験デザイン
Avatar for kim kazuhirokimura
0
220
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
460
kintone_aroma
Avatar for kintone kintone
0
620
ドルちゃん
Avatar for ドルちゃん design_dolphins
0
470
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
Avatar for Aki spring_aki
1
200
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
Avatar for Saiko.T _psyc0_
0
340
【MIXI MEETUP！ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ！生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
Avatar for MIXI DESIGN mixi_design
PRO
0
170
Liquid GlassとApp Intents
Avatar for touyou touyou
0
480
Designing User Experience through Interaction Design
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
440
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
0
730
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない？というお話
Avatar for なつ iflection
7
3.1k

Featured

See All Featured
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
697
190k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.2k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
380
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
253
22k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
7.9k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
33
1.8k

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!