Web Typography - Speaker Deck

Tweet

Tweet

Slide 1

Slide 1 text

Web Typography Richard Rutter Web Typography Evangelist, Fontdeck.com Talk Web Design 2012, University of Greenwich

Slide 2

Slide 2 text

We are all typographers!

Slide 3

Slide 3 text

informationarchitects.jp/en/the-web-is-all-about-typography-period/

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

From Mark Boulton’s “Designing layouts that think for you”

Slide 9

Slide 9 text

From Mark Boulton’s “Designing layouts that think for you”

Slide 10

Slide 10 text

From Mark Boulton’s “Designing layouts that think for you”

Slide 11

Slide 11 text

From Mark Boulton’s “Designing layouts that think for you”

Slide 12

Slide 12 text

From Mark Boulton’s “Designing layouts that think for you”

Slide 13

Slide 13 text

From Mark Boulton’s “Designing layouts that think for you”

Slide 14

Slide 14 text

Defaut line-height and margins

Slide 15

Slide 15 text

Rhythmic line-height and margins

Slide 16

Slide 16 text

"

Slide 17

Slide 17 text

"It's a flippin' pangolin!"

Slide 18

Slide 18 text

“It’s a flippin’ pangolin!”

Slide 19

Slide 19 text

opening double quote “ closing double quote ” opening single quote ‘ closing single quote ’ en dash – em dash — minus − multiplication × ellipsis … “ ” ‘ ’ – — − × …

Slide 20

Slide 20 text

wordpress.org/extend/plugins/wp-typography/

Slide 21

Slide 21 text

ﬃ

Slide 22

Slide 22 text

Calibri 0123abcdefigHJKlmnopQRStuv Cambria 0123abcdefigHJKlmnopQRStu Candara 0123abcdefigHJKlmnopQRStu Constantia 0123abcdefigHJKlmnopQRStu Corbel 0123abcdefigHJKlmnopQRStuv

Slide 23

Slide 23 text

Calibri 0123abcdefigHJKlmnopQRStuv Cambria 0123abcdefigHJKlmnopQRStu Candara 0123abcdefigHJKlmnopQRStu Constantia 0123abcdefigHJKlmnopQRStu Corbel 0123abcdefigHJKlmnopQRStuv fi

Slide 24

Slide 24 text

fine affluent

Slide 25

Slide 25 text

ﬁne aﬄuent

Slide 26

Slide 26 text

h1 { text-rendering: optimizeLegibility; }

Slide 27

Slide 27 text

marketplace.veer.com/merch/vpr0001260

Slide 28

Slide 28 text

Kerning on (top) and off (bottom)

Slide 29

Slide 29 text

Kerning table for Baskerville 1757

Slide 30

Slide 30 text

¶∂

Slide 31

Slide 31 text

When the only font available is Times New Roman, the typographer must make the most of its virtues. The typography should be richly and superbly ordinary, so that attention is drawn to the quality of the composition, not the individual letterforms.” Elements of Typographic Style by Robert Bringhurst “

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

col.ly/s/842

Slide 34

Slide 34 text

Font Linking

Slide 35

Slide 35 text

@font-face { font-family: "Clarendon"; src: url("clarendon-nar-eb.woff"); }

Slide 36

Slide 36 text

Browser File types supported Internet Explorer 4 Embedded OpenType (EOT) Internet Explorer 9 EOT, WOFF Safari 3.1 TrueType, OpenType, SVG Safari 5 TrueType, OpenType, SVG, WOFF Opera 10 TrueType, OpenType Opera 11.10 TrueType, OpenType, WOFF Firefox 3.1 TrueType, OpenType Firefox 3.6 TrueType, OpenType, WOFF Chrome 4 TrueType, OpenType, SVG Chrome 6 TrueType, OpenType, SVG, WOFF Mobile Safari iOS 3.2 SVG Mobile Safari iOS 4.2 SVG, TTF Mobile Safari iOS 5 SVG, TTF, WOFF Browser support for Webfonts

Slide 37

Slide 37 text

@font-face { font-family: "Clarendon Narrow Extrabold"; src: url(clarendon-nar-eb.eot); src: url(clarendon-nar-eb.eot?iefix) format(eot), url(clarendon-nar-eb.woff) format(woff), url(clarendon-nar-eb.ttf) format(truetype), url(clarendon-nar-eb.svg#font) format(svg); font-weight: 800; }

Slide 38

Slide 38 text

´

Slide 39

Slide 39 text

astonmartin.com

Slide 40

Slide 40 text

avios.com

Slide 41

Slide 41 text

www.lannasport.se

Slide 42

Slide 42 text

stuff.tv

Slide 43

Slide 43 text

tradeshift.com/enterprise

Slide 44

Slide 44 text

Ultra light Light Regular Bold Black Ultra black Adelle Adelle Adelle Adelle Adelle Adelle

Slide 45

Slide 45 text

Light Regular SemiBold Bold ExtraBold Heavy Adelle Adelle Adelle Adelle Adelle Adelle

Slide 46

Slide 46 text

h1 { font-family: “Adelle”, Cambria, Georgia, serif; font-weight: bold; }

Slide 47

Slide 47 text

h1 { font-family: “Adelle”, Cambria, Georgia, serif; font-weight: 200; }

Slide 48

Slide 48 text

100 Ultra Light, Extra Light 200 Light, Thin 300 Book 400 Normal, Regular 500 Medium 600 Demi Bold, Semi Bold 700 Bold 800 Black, Extra Bold 900 Ultra Bold, Fat, Heavy Values for font-weight property

Slide 49

Slide 49 text

www.truphone.com

Slide 50

Slide 50 text

citizenmusician.org

Slide 51

Slide 51 text

nikebetterworld.com

Slide 52

Slide 52 text

fontdeck.com/typefaces/nonlatin/greek

Slide 53

Slide 53 text

fontdeck.com/font/lagoon/regular

Slide 54

Slide 54 text

fontdeck.com/font/digohweli/regular

Slide 55

Slide 55 text

ff fl ffl fi ffi ff fl ffl fi ffi fb fj fk ti ty

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

QUICHE ch stf ck OO I E

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

affloat fine fjords a oa n fjords

Slide 60

Slide 60 text

✂ ajestic

Slide 61

Slide 61 text

Quiz game key !ui" #$m% &%'

Slide 62

Slide 62 text

0123456789 

Slide 63

Slide 63 text

Lining Old Style Proportional 409,280 , Proportional 367,112 , Proportional 155,068 , Proportional 171,792 , Tabular , , Tabular , , Tabular , , Tabular , ,

Slide 64

Slide 64 text

1 ½

Slide 65

Slide 65 text

Final space shu le.

Slide 66

Slide 66 text

Final NASA space shu le.

Slide 67

Slide 67 text

Final NASA space shu le.

Slide 68

Slide 68 text

Final space shu le.

Slide 69

Slide 69 text

N

Slide 70

Slide 70 text

font-feature-settings

Slide 71

Slide 71 text

h1 { font-feature-settings: "lnum", "tnum", "dlig " 0, "swsh" 2; }

Slide 72

Slide 72 text

h1 { font-feature-settings: "lnum", "tnum", "dlig " 0, "swsh" 2; -moz-font-feature-settings: "lnum=1, tnum=1, dlig=0, swsh=2"; }

Slide 73

Slide 73 text

h1 { font-feature-settings: "lnum", "tnum", "dlig " 0, "swsh" 2; -moz-font-feature-settings: "lnum=1, tnum=1, dlig=0, swsh=2"; -webkit-font-feature-settings: "lnum", "tnum", "dlig " 0, "swsh" 2; }

Slide 74

Slide 74 text

In the Government formed in response to a perceived threat om the ’s Sputnik program. absorbed the -year-old , along with the and many of ’s early space programs.

Slide 75

Slide 75 text

Magneta Expert Subset

Slide 76

Slide 76 text

In 1958 the US Government formed NASA in response to a perceived threat from the USSR’s Sputnik program. NASA absorbed the 46-year-old NACA, along with the JPL and many of ARPA’s early space programs.

Slide 77

Slide 77 text

p { font-family: "Magneta Book", Georgia, serif; } .numbers, .smallcaps { font-family: "Magneta Book Subset", "Magneta Book", Georgia, serif; }

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

fontdeck.com/typeface/magnetaexpertsubset

Slide 80

Slide 80 text

2012.ampersandconf.com

Slide 81

Slide 81 text

fontdeck.com/typeface/trilogyfatfaceexpertsubset

Slide 82

Slide 82 text

ele- phant-

Slide 83

Slide 83 text

Hyphenation in the Gutenberg Bible

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

p { hyphens: auto; }

Slide 86

Slide 86 text

p { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

ˇ

Slide 89

Slide 89 text

Richard Rutter, Fontdeck.com @clagnut http://speakerdeck.com/u/clagnut/