Facing up to Fonts. Richard Rutter

Transcription

1 Facing up to Fonts Richard Rutter

2 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

3

4 Times New Roman Times New Roman is a serif typeface commissioned by the British newspaper, The Times, in 1931, designed by Stanley Morison and Victor Lardent at the English branch of Monotype. It was commissioned after Morison had written an article criticizing The Times for being badly printed and typographically behind the times. Arial Arial is a sans-serif typeface designed in 1982 by Robin Nicholas and Patricia Saunders for Monotype Typography. Though nearly identical to Linotype Helvetica in both proportion and weight, the design of Arial is in fact a variation of Monotype Grotesque, and was designed for IBM s laserxerographic printer.

5

6 Georgia Georgia is a transitional serif typeface designed in 1993 by Matthew Carter and hinted by Tom Rickner for the Microsoft Corporation. It is designed for clarity on a computer monitor even at small sizes, partially due to a relatively large x-height. The typeface is named after a tabloid headline titled Alien heads found in Georgia. Verdana Verdana is a humanist sans-serif typeface designed by Matthew Carter for Microsoft Corporation, with hand-hinting done by Tom Rickner. Bearing similarities to humanist sans-serif typefaces such as Frutiger, Verdana was designed to be readable at small sizes on a computer screen.

7 Trebuchet A humanist sans-serif typeface designed by Vincent Connare for the Microsoft Corporation in Impact A realist sans-serif typeface designed by Geoffrey Lee in 1965 and released by the Stephenson Blake foundry. Courier New A monospaced slab serif typeface designed by Howard "Bud" Kettler in Andale Mono A monospace sans-serif typeface designed by Steve Matteson for Apple and IBM.

8 Comic Sans! A casual script typeface designed by Vincent Connare and released in 1994 by the Microsoft Corporation. It is classified as a casual, non-connecting script, and was designed to imitate comic book lettering, for use in informal documents.

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

10 Cambria Designed by Jelle Bosma with Steve Matteson and Robin Nicholas. It is a serif font with very even spacing and proportions. Diagonal and vertical hairlines and serifs are relatively strong, while horizontal serifs are small and intend to emphasize stroke endings rather than stand out themselves. The regular weight has been extended with a large set of maths and science symbols. AN@OBPQRST abcedefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXZY

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

12 Baskerville Old Face Bauhaus 93 Bell Bernard Condensed Book Antiqua Bookman Old Style Britannic Bold Brush Script Calisto Century Gothic Century Schoolbook Colonna Cooper Black Copperplate Gothic B Copperplate Gothic L Curlz Edwardian Script Engravers Footlight Light Garamond Gill Sans Gill Sans Ultra Bold Gloucester Extra Condensed Goudy Old Style Haettenschweiler Harrington Imprint Shadow Lucida Bright Lucida Calligraphy Lucida Fax Lucida Sans Lucida Sans Typewriter Matura Script Capitals Mistral Modern No. 20 Monotype Corsiva Onyx Papyrus Playbill Rockwell Rockwell Extra Bold Tahoma

13 Baskerville Old Face Bauhaus 93 Bell Bernard Condensed Book Antiqua Bookman Old Style Britannic Bold Brush Script Calisto Century Gothic Century Schoolbook Colonna Cooper Black Copperplate Gothic B Copperplate Gothic L Curlz Edwardian Script Engravers Footlight Light Garamond Gill Sans Gill Sans Ultra Bold Gloucester Extra Condensed Goudy Old Style Haettenschweiler Harrington Imprint Shadow Lucida Bright Lucida Calligraphy Lucida Fax Lucida Sans Lucida Sans Typewriter Matura Script Capitals Mistral Modern No. 20 Monotype Corsiva Onyx Papyrus Playbill Rockwell Rockwell Extra Bold Tahoma

14 icanhaz.com/cooperblack

15 icanhaz.com/fontmatrix

16 fi

17 body { } font-family: verdana, arial, helvetica, sans-serif;

18 Verdana The quick brown fox jumps over a lazy dog. The quick brown fox jumps over a lazy dog. Arial

19 body { } font-family: verdana, tahoma, sans-serif; Verdana The quick brown fox jumps over a lazy dog. Tahoma The quick brown fox jumps over a lazy dog.

20 body { } font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; Helvetica Neue The quick brown fox jumps over a lazy dog. Arial The quick brown fox jumps over a lazy dog. Helvetica The quick brown fox jumps over a lazy dog.

21 body { font-family: "Clarendon LT Std", "Clarendon Std", "Clarendon", "Bookman Old Style", Georgia, serif; } Clarendon The quick brown fox jumps over a lazy dog. Bookman Old Style The quick brown fox jumps over a lazy dog. Georgia The quick brown fox jumps over a lazy dog.

22 body { font-family: "Egyptienne F LT Std", "Egyptienne F Std", "Egyptienne F", Cambria, Georgia, serif; } Egyptienne The quick brown fox jumps over a lazy dog. Cambria The quick brown fox jumps over a lazy dog. Georgia The quick brown fox jumps over a lazy dog.

23 body { font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; } Lucida Grande The quick brown fox jumps over a lazy dog. Lucida Sans Unicode The quick brown fox jumps over a lazy dog. Verdana The quick brown fox jumps over a lazy dog.

24

25 em, cite, i { font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, Tahoma, sans-serif; } Lucida Sans The quick brown fox jumps over a lazy dog. Lucida Grande The quick brown fox jumps over a lazy dog. Verdana The quick brown fox jumps over a lazy dog.

26

27 UltraLight Light Regular Bold Joseph Müller Brockmann Joseph Müller Brockmann Joseph Müller Brockmann Joseph Müller Brockmann

28 strong { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: bold; }

29 em { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: 300; }

30 Values for font-weight property Weight Style 100 Thin 200 UltraLight/ExtraLight 300 Light 400 Book/Regular/Normal 500 Medium 600 DemiBold/SemiBold 700 Bold 800 ExtraBold 900 Heavy/Black/UltraBlack

31 em { font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: 300; }

32 Condensed SemiCondensed Regular SemiExtended Robert Slimbach Robert Slimbach Robert Slimbach Robert Slimbach

33 ÿ

34 @font-face { font-family: "Fontin Sans"; src: url(" format("opentype"); } h1 { font-family: "Fontin Sans", "Trebuchet MS", sans-serif }

35 @font-face { font-family: "Fontin Sans"; src: url(" format("opentype"); font-style: normal; font-weight: normal; { font-family: "Fontin Sans"; src: url(" format("opentype"); font-style: italic; font-weight: normal; }

36 @font-face { font-family: "Fontin Sans Bold"; src: url(" format("opentype"); font-style: normal; font-weight: bold; } h1, h2, b, strong { font-family: "Fontin Sans Bold", "Trebuchet MS", sans-serif; font-weight:bold; }

37 Browser support for Webfonts Internet Explorer 4 Embedded OpenType (EOT) Safari 3.1 TrueType, OpenType(TT) & OpenType(PS) Opera (dev) TrueType, OpenType(TT) & OpenType(PS) Firefox 3.1 beta TrueType, OpenType(TT) & OpenType(PS)

38 @font-face { font-family: "Fontin Sans"; src: url(" format("opentype"), url(" format("embedded-opentype"); }

39

40 Andika Anivers Delicious Diavlo Fertigo Fontin Fontin Sans Gentium Graublau Web Fell English Fell French Museo Tallys designed by A Olsen & V Gaultney designed by Jos Buivenga designed by Jos Buivenga designed by Jos Buivenga designed by Jos Buivenga designed by Jos Buivenga designed by Jos Buivenga designed by A Olsen & V Gaultney designed by Georg Seifert designed by Igino Marini designed by Igino Marini designed by Jos Buivenga designed by Jos Buivenga

41 EOT

42 Fonts as a Web Service

43 Take Homes: 1 Think about typefaces beyond the core web fonts. 2 Make sure your font stacks make sense and are useful. 3 Font embedding is here and now.

44 Richard Rutter Clearleft.com