Web Typography - Speaker Deck

Slide 1

Slide 1 text

Web Typography p bram_stein

Slide 2

Slide 2 text

Bad Typography

Slide 3

Slide 3 text

Bad Typography

Slide 4

Slide 4 text

Bad Typography

Slide 5

Slide 5 text

Bad Typography http://fontpolice.tumblr.com/

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

header h3 { font-weight: normal; font-style: italic; font-size: 20px; } p { margin: 0; } p + p { text-indent: 1.5em; } article { margin: 110px auto; width: 510px; } section { color: #444; font-size: 20px; } section + section { margin-bottom: 1.5em; } header { margin-bottom: 1.5em; }

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

o p s w v x 3 0 ! Quadraat Web Fonts

Slide 11

Slide 11 text

@font-face { font-family: 'MyFont'; src: url(myfont.woff) format('woff'); } @font-face p { font-family: 'MyFont', sans-serif; }

Slide 12

Slide 12 text

6 15 19 4.0 12.0 2.2 4.2–4.3 7 16 20 5.0 12.1 2.3 5.0–5.1 8 17 21 5.1 12.5 3.0 6.0 9 18 22 6.0 4.0 10 23 4.1 WOFF

Slide 13

Slide 13 text

6 15 19 4.0 12.0 2.2 4.2–4.3 7 16 20 5.0 12.1 2.3 5.0–5.1 8 17 21 5.1 12.5 3.0 6.0 9 18 22 6.0 4.0 10 23 4.1 TrueType/OpenType

Slide 14

Slide 14 text

Embedded OpenType 6 15 19 4.0 12.0 2.2 4.2–4.3 7 16 20 5.0 12.1 2.3 5.0–5.1 8 17 21 5.1 12.5 3.0 6.0 9 18 22 6.0 4.0 10 23 4.1

Slide 15

Slide 15 text

SVG 6 15 19 4.0 12.0 2.2 4.2–4.3 7 16 20 5.0 12.1 2.3 5.0–5.1 8 17 21 5.1 12.5 3.0 6.0 9 18 22 6.0 4.0 10 23 4.1

Slide 16

Slide 16 text

6 15 19 4.0 12.0 2.2 4.2–4.3 7 16 20 5.0 12.1 2.3 5.0–5.1 8 17 21 5.1 12.5 3.0 6.0 9 18 22 6.0 4.0 10 23 4.1 WOFF + TTF/OTF + EOT + SVG

Slide 17

Slide 17 text

Bulletproof @font-face syntax @font-face { font-family: 'MyFont'; src: url('myfont.eot?#iefix') format('embedded-opentype'), url('myfont.woff') format('woff'), url('myfont.otf') format('opentype'), url('myfont.ttf') format('truetype'), url('myfont.svg#font') format('svg'); }

Slide 18

Slide 18 text

@font-face { font-family: 'MyFont'; src: url('myfont.eot?#iefix') format('embedded-opentype'), url('myfont.woff') format('woff'), url('myfont.otf') format('opentype'), url('myfont.ttf') format('truetype'), url('myfont.svg#font') format('svg'); } Bulletproof @font-face syntax

Slide 19

Slide 19 text

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

fi ffi  ﬃ 1234567890 /, / ½, ¼ Good morning G  Font Features (Case) Case

Slide 25

Slide 25 text

 ﬃ ½, ¼ G  Font Features Case font-feature-settings: "case" 1; font-feature-settings: "smcp" 1; font-feature-settings: "frac" 1; font-feature-settings: "onum" 1; font-feature-settings: "liga" 1;

Slide 26

Slide 26 text

Font features 6 15 19 4.0 12.0 2.2 4.2–4.3 7 16 20 5.0 12.1 2.3 5.0–5.1 8 17 21 5.1 12.5 3.0 6.0 9 18 22 6.0 4.0 10 23 4.1

Slide 27

Slide 27 text

.. ..

Slide 28

Slide 28 text

Justiﬁcation text-align: justify; Done?

Slide 29

Slide 29 text

.. ..

Slide 30

Slide 30 text

.. ..

Slide 31

Slide 31 text

.. ..

Slide 32

Slide 32 text

CSS Hyphenation p { hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; } ...

Slide 33

Slide 33 text

.. ..

Slide 34

Slide 34 text

CSS Hyphenation 6 15 19 4.0 12.0 2.2 4.2–4.3 7 16 20 5.0 12.1 2.3 5.0–5.1 8 17 21 5.1 12.5 3.0 6.0 9 18 22 6.0 4.0 10 23 4.1

Slide 35

Slide 35 text

CSS Hyphenation jQuery(function ($) { $('p').hyphenate('en-us'); }); Hyphenator.js http://code.google.com/p/hyphenator/ Hypher (Node.js, jQuery & Ender) https://github.com/bramstein/hypher

Slide 36

Slide 36 text

text-align: dir [char]? . . . . . . . . text-align: center; text-align: center ".";

Slide 37

Slide 37 text

6 15 19 4.0 12.0 2.2 4.2–4.3 7 16 20 5.0 12.1 2.3 5.0–5.1 8 17 21 5.1 12.5 3.0 6.0 9 18 22 6.0 4.0 10 23 4.1 text-align: dir [char]?

Slide 38

Slide 38 text

jQuery(function ($) { $('table td').textAlign('.'); }); jQuery Text Align plugin https://github.com/bramstein/text-align text-align: dir [char]?

Slide 39

Slide 39 text

Line breaking In olden times when wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. In olden times when wishing still helped

Slide 40

Slide 40 text

In olden times when wishing still helped one, there lived a king whose Line breaking In olden times when wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. daughters

Slide 41

Slide 41 text

In olden times when wishing still helped one, there lived a king whose daughters were all beautiful; and the Line breaking In olden times when wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. youngest

Slide 42

Slide 42 text

In olden times when wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Line breaking In olden times when wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face.

Slide 43

Slide 43 text

Line breaking In olden times when wishing still helped

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Line breaking text-justify: newspaper;

Slide 46

Slide 46 text

Line breaking Typeset: TeX line breaking algorithm in JavaScript https://github.com/bramstein/typeset

Slide 47

Slide 47 text

Use web fonts. Use font features. Use hyphenation. Do not create bad typography. It is really not necessary.

Slide 48

Slide 48 text

Web Typography p bram_stein [email protected]