Web Typography

Web Typography p bram_stein

Bad Typography

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

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; }

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

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

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

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

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

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

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

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'); }

@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

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'); }

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

 ﬃ ½, ¼ 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;

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

.. ..

Justiﬁcation text-align: justify; Done?

.. ..

CSS Hyphenation p { hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto;
-ms-hyphens: auto; } <body lang="en"> ... </body>

.. ..

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

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

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

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]?

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

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

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

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

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.

Line breaking In olden times when wishing still helped

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.

Line breaking text-justify: newspaper;

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

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

Web Typography p bram_stein [email protected]

Web Typography

Web Typography

More Decks by Bram Stein

Other Decks in Design

Featured

Transcript