The Future of Web Typography. Richard Rutter

Transcription

1 The Future of Web Typography Richard Rutter

2 ÿ

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

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

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

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

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

8 Extra condensed Condensed Regular Expanded Extra expanded Clarendon Clarendon Clarendon Clarendon Clarendon

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

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

11

12

13 ffi

14 ff fl ffl fi ffi fb fk fí ff fl ffl fi ffi fí

15

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

17 st ip it ck gi fj ap qu OO

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

19

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

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

22

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

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

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

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

27 font-size-adjust

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

29 S n n m n v v ; n m m v n v.

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

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

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

33

34 font-feature-settings

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

36 fi

37

38 Font Linking

39

40

41 Colly.com

42 2010.dconstruct.org using Helvetica

43 2010.dconstruct.org using Reader

44

45 @font-face { font-family: "Fontin Sans"; src: url(" }

46 Browser support for Webfonts Browser File types supported Internet Explorer 4 Embedded OpenType (EOT) 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

47 ˇ

48

49 Fonts as a Web Service

50 Fontdeck.com

51 2010 Year of Web Typography

52 Richard Rutter Director, Clearleft Cofounder, Fontdeck