Slide 1

Slide 1 text

typography and the web the state of the art #writethedocs eu 2014

Slide 2

Slide 2 text

Idan Gazit Hello there! I’m @idangazit Please, Sit back. Relax. Enjoy yourself! ! All of the slides will be online.

Slide 3

Slide 3 text

core designer for visualizing data at a lovely web framework the popular platform-as-a-service

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

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.

Slide 7

Slide 7 text

typography SET A typefaces SET

Slide 8

Slide 8 text

Presenting Textual Information The Art & Science of

Slide 9

Slide 9 text

vs typeface kerning macro micro measure (aka “width”) leading (aka “spacing”) flow of type on page elupton.com/2009/10/science-of-typography/

Slide 10

Slide 10 text

2 2 3

Slide 11

Slide 11 text

2 2 3

Slide 12

Slide 12 text

2 2 3

Slide 13

Slide 13 text

2 2 3

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

LIKE, NEW INFORMATION HAS COME TO LIGHT, MAN

Slide 17

Slide 17 text

control

Slide 18

Slide 18 text

none nil nada zero zip zilch nothing naught no no control

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

typography and the web the state of the art #writethedocs eu 2014

Slide 22

Slide 22 text

print web March of Progress IN WEB TYPOGRAPHY THE

Slide 23

Slide 23 text

Sometimes hard to use. Pays dividends.

Slide 24

Slide 24 text

Sizing Type

Slide 25

Slide 25 text

? ABSOLUTE ? RELATIVE

Slide 26

Slide 26 text

16px ABSOLUTE 1em or 100% RELATIVE

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

16px ABSOLUTE 1em or 100% RELATIVE =

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

∅ defaults to 1em 1.2em 3em

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

Slide 31

Slide 31 text

That wasn’t too bad RIGHT?

Slide 32

Slide 32 text

pop quiz! OK, DOCUMENTARIANS

Slide 33

Slide 33 text

body { font-size: 1em; }

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

Slide 34

Slide 34 text

body { font-size: 1em; }

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

Slide 35

Slide 35 text

body { font-size: 1em; }

Slide 36

Slide 36 text

body { font-size: 1em; }

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

Slide 37

Slide 37 text

body { font-size: 1em; }

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

Slide 38

Slide 38 text

Root Ems “REMS” (to the rescue!)

Slide 39

Slide 39 text

EMS 1em 1em 2em 2em 1.5em 1.5em 1.5em 1.5rem

REMS

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

typography SET A typefaces SET

Slide 43

Slide 43 text

typography SET A typefaces SET

Slide 44

Slide 44 text

Foo & Bar .amp { font-family: SomeFancyFont, sans; } Bar Foo&

Slide 45

Slide 45 text

font-family: Helvetica, Arial, sans-serif; La la la A’BC םולש abc123 ⊗≄∭∑ὐ

Slide 46

Slide 46 text

DATABASE a of FONTS

Slide 47

Slide 47 text

@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 ! !

Slide 48

Slide 48 text

@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

Slide 49

Slide 49 text

@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

Slide 50

Slide 50 text

COOL, HUH?

Slide 51

Slide 51 text

CAREFUL.

Slide 52

Slide 52 text

@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

Slide 53

Slide 53 text

FOUT the dreaded Flash Of Unstyled Text

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

FOUT the dreaded Flash Of Unstyled Text

Slide 56

Slide 56 text

FOUT the dreaded Flash Of Unstyled Text FONT the somewhat-better Flash Of No Text

Slide 57

Slide 57 text

Slide 58

Slide 58 text

2s FOUT 2s FONT

Slide 59

Slide 59 text

3s FONT, 1s FOUT 4s FONT Soon (~v35ish) Now (v33) >3 seconds

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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…”) }

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

flic.kr/p/auuCWk

Slide 65

Slide 65 text

Type Rendering

Slide 66

Slide 66 text

RASTERIZERS

Slide 67

Slide 67 text

OSX WINDOWS GDI WIN DIRECTWRITE CLEARTYPE GRAYSCALE

Slide 68

Slide 68 text

FONT OUTLINES POSTSCRIPT, TRUETYPE

Slide 69

Slide 69 text

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/

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

ENOUGH OF THIS DOOM AND GLOOM. TELL ME ABOUT MORE AWESOME STUFF.

Slide 72

Slide 72 text

Ligatures Ligat

Slide 73

Slide 73 text

Ligatures Ligat

Slide 74

Slide 74 text

The Four Numerals

Slide 75

Slide 75 text

in 1956 I bought… in 1956 I bought… OLDSTYLE LINING FIGURES

Slide 76

Slide 76 text

PROPORTIONAL TABULAR $131.96 $589.22 $131.96 $589.22 FIGURES

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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