The Future of Web Typography. Richard Rutter

Transcription

1 The Future of Web Typography Richard Rutter

2 apple.com

3 ÿ

4 Ultra light Light Regular Bold Black Ultra black Museo Slab Museo Slab Museo Slab Museo Slab Museo Slab Museo Slab

5 Ultra light Light Regular Bold Black Ultra black Museo Slab Museo Slab Museo Slab Museo Slab Museo Slab Museo Slab

6 h1 { font-family: Museo Slab, Georgia, serif; font-weight: bold; }

7 h1 { font-family: Museo Slab, Georgia, serif; font-weight: 200; }

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

9 Extra condensed Condensed Regular Expanded Extra expanded Clarendon Clarendon Clarendon Clarendon Clarendon

10 h1 { font-family: Clarendon, Georgia, serif; font-stretch: condensed; }

11 Values for font-stretch property Ultra Condensed Extra Condensed Condensed Semi Condensed Normal Semi Expanded Expanded Extra Expanded Ultra Expanded

12

13

14

15

16 ffi

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

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

19 affloat fine fjords

20 affloat fine fjords

21 h1 { } text-rendering: optimizelegibility;

22

23 ff fl ffl fi ffi fb fk ff fl ffl fi ffi

24 h1 { font-family: Calluna, Georgia, serif; font-variant-ligatures: common-ligatures; } p { font-family: Calluna, Georgia, serif; font-variant-ligatures: no-common-ligatures; }

25 st ip it ck gi fj ap qu OO

26 h1 { font-family: Calluna, Georgia, serif; font-variant-ligatures: common-ligatures additional-ligatures; }

27

28 !""#$%&&% &'(%)*#&%* Ollivette typewriter

29 h1 { font-family: Ollivette, American Typewriter, monospace; font-variant-alternates: stylistic(1); }

30 Values for font-variant-alternates mapped to OpenType features stylistic(n) salt n contextual calt, clig no-contextual calt, clig historical-forms hist styleset(01 20) ss01 ss02 character-variant(01 99) cv01 cv99 swash(n) swsh n contextual-swash(n) cswh n ornaments(n) ornm n annotation(n) nalt n

31

32 h1 { font-family: Calluna, Georgia, serif; font-variant-numeric: oldstyle-nums; }

33 Proportional Lining Old Style, 409,280, 367,112, 155,068, 171,792 Tabular,,,,,,,,

34 h1 { font-family: Calluna, Georgia, serif; font-variant-numeric: oldstyle-nums tabular-nums; }

35 ½ h1 { font-family: Calluna, Georgia, serif; font-variant-numeric: diagonal-fractions slashed zero; }

36 font-feature-settings

37 h1 { } font-feature-settings:"liga=1, dlig=1, lnum=1, tnum=1";

38 font-kerning

39 Top: Kerned; Bottom: Unkerned

40 h1 { } font-kerning: none;

41 h1 { } text-rendering: optimizelegibility;

42 h1 { } font-kerning: none;

43 Top: Unkerned in Safari; Bottom: Kerned in Firefox

44 font-size-adjust

45 h1 { } font-family:"bickham Script Std", "Snell Roundhand";

46 S n n m n v v ; n m m v n v.

47 h1 { } font-family:"bickham Script Std", "Snell Roundhand";

48 Sequat nullute numsan vitae ed ullutat irilla volorerci; nim aliquatem velenisit veros.

49 h1 { font-family:"bickham Script Std", "Snell Roundhand"; font-size-adjust:0.19; /* aspect ratio of x-height to text height */ }

50

51 s' = ( a / a' ) s s = font-size value a = aspect value specified by font-size-adjust property a' = aspect value of actual font s' = adjusted font-size to use

52 ele- phant-

53 ele- phant- The definition of the hyphenation feature is very much up-in-theair at the moment.

54 Hyphenation in the Gutenberg Bible

55

56 Font Linking

57

58

59 Colly.com

60 2010.dconstruct.org using Arial

61 2010.dconstruct.org using Reader

62 avalokana.in using Georgia

63 avalokana.in using Calluna

64

65 @font-face { font-family: "Clarendon"; src: url("clarendon-narrow-light.woff"); }

66 Browser support for Webfonts Browser File types supported Internet Explorer 4 Embedded OpenType (EOT) Internet Explorer 9 EOT, WOFF Safari 3.1 TrueType, OpenType, SVG Opera 10 TrueType, OpenType Firefox 3.1 TrueType, OpenType Firefox 3.6 TrueType, OpenType, WOFF Chrome beta 4 TrueType, OpenType, SVG Mobile Safari SVG

67 @font-face { font-family: "Clarendon"; src: url("clarendon-narrow-light.woff"); font-weight: 200; font-stretch: condensed; }

68 Fonts as a Web Service

69 Fontdeck.com

70 ˇ

71

72 2010 Year of Web Typography

73 Richard Cofounder, Fontdeck