LETTERS - INTRODUCTION TO TYPE

Martin Krzywinski

GSC Bioviz Journal Club 19 October 2010

v1 19 October 2010

Letters - Introduction to Type Martin Krzywinski mkweb.bcgsc.ca v1 19 October 2010 MAKING SENSE OF TYPE

a type face can be characterized by structural properties of the Centaur Garamond Didot letters

it is easier to identify and distinguish by examining certain structures within the letter form (serif, , stroke, etc) r r r r once the form of the letter can be described, its historical evolution can be more concisely described d d d d q q q q

Letters - Introduction to Type Martin Krzywinski mkweb.bcgsc.ca v1 19 October 2010 PARTS OF A LETTER

ASCENDER APERTURE AXIS

BOWL bCOUNTER e o

SERIF AXIS TERMINAL

STROKE q s MODULATIONw DESCENDER OR CONTRAST

Letters - Introduction to Type Martin Krzywinski mkweb.bcgsc.ca v1 19 October 2010 PROPORTIONS OF A

the ranges of vertical extents of letters ASCENDER influences legibility HEIGHT CAP HEIGHT x-height is typically measured as a ratio to MEAN LINE the ascender height X-HEIGHT legible type faces have a large x-height BASELINE

DESCENDER HEIGHT Wdqx

SMALL X-HEIGHT LARGE X-HEIGHT

COCHIN PARISIAN LEAWOOD ANTIQUE CENTRAL

Letters - Introduction to Type Martin Krzywinski mkweb.bcgsc.ca v1 19 October 2010 SERIFS qOFFICINA SERIF qGARAMOND qDIDOT qFUTURA SLAB ADENATE THIN SANS SERIF OR ABRUPT TYPEFACE FAMILY MAY HAVE A “SANS” SUFFIX

EARLY SANS SERIF ARE CALLED GROTESQUE

Letters - Introduction to Type Martin Krzywinski mkweb.bcgsc.ca v1 19 October 2010 TERMINALS

CENTAUR GARAMOND BASKERVILLE DIDOT MEMPHIS

PEN-FORMED MODELED fLACHRYMAL ROUND fABSENT f f TEAR-LIKE f

Letters - Introduction to Type Martin Krzywinski mkweb.bcgsc.ca v1 19 October 2010 APERTURE CENTAUR GARAMOND BASKERVILLE DIDOT eMEMPHIS SMALL eLARGE e ee

Letters - Introduction to Type Martin Krzywinski mkweb.bcgsc.ca v1 19 October 2010 STROKE

CENTAUR GARAMOND BASKERVILLE DIDOT MEMPHIS o o o MODULATED o oHYPER-MODULATED UNMODULATED

CONTRAST

Letters - Introduction to Type Martin Krzywinski mkweb.bcgsc.ca v1 19 October 2010 AXIS oCENTAUR oGARAMOND oBASKERVILLE oDIDOT oMEMPHIS e e ee e p pppp HUMANIST OR OBLIQUE RATIONAL OR VERTICAL IMPLIED VERTICAL Letters - Introduction to Type Martin Krzywinski mkweb.bcgsc.ca v1 19 October 2010 HISTORICAL PERIODS

early typefaces were inspired by the hand-formed script, and modelled after the stroke of a brush or nib TRAJAN BASED ON INSCRIPTION ON TRAJAN’S COLUMN (113 AD) BY CAROL TWOMBLY (1988) originally, the face had only its capital form (majuscule) and later lowercase was introduced (miniscule)

originally the italic was equal ABCSPQR to the roman and stood part from it - later the italic JENSON become subordinate BASED ON FACE BY NICOLAS JENSON (1469) abcSPQR

Letters - Introduction to Type Martin Krzywinski mkweb.bcgsc.ca v1 19 October 2010 CENTURY 15 16 17 18 19 20 21 1400’s 1500’s 1600’s 1700’s 1800’s 1900’s 2000’s HUMANIST/VENETIAN OLD STYLE/GARALDE TRANSITIONAL MODERN

RENEISSANCE BAROQUE NEOCLASSICAL

ROMANTIC Jenson REALIST GEOMETRIC MODERNIST ROBERT SLIMBACH, 1996 INSPIRED BY LYRICAL MODERNIST NICOLAS JENSON, 1470 Baskerville POSTMODERNIST Centaur JOHN BASKERVILLE, 1757 BRUCE ROGERS, 1914 INSPIRED BY NICOLAS JENSONS LAERTIS, 1475 Didot Bembo FERMIN DIDOT, 1784-1811 STANLEY MORRISON, 1929 INSPIRED BY Akzidenz-Grotesk FRANCESCO GRIFFO, 1495 H BERTHOLD AG, 1898

GaramondCLAUDE GARAMOND, 1480-1561 Futura PAUL RENNER, 1927 Palatino CaslonWILLIAM CASLON, 1722 HERMAN ZAPF, 1948 Helvetica MAX MIEDINGER, EDUARD HOFFMAN, 1957

Letters - Introduction to Type Martin Krzywinski mkweb.bcgsc.ca v1 19 October 2010 CENTURY 15 16 17 18 19 20 21 1400’s 1500’s 1600’s 1700’s 1800’s 1900’s 2000’s

HUMANIST/VENETIAN OLD STYLE/GARALDE TRANSITIONAL MODERN

STROKE modulatedc c c abruptly unmodulated c cmodulated c

TERMINAL pen-formeda apen-formed alachrymal round none or but roundera a aslab

SERIF

crispn nmodelled nadnate thin, abrupt none n n nor slab

AXIS

humanisto ohumanist orational rational implied consistent inconsitento oexaggerated overtical

APERTURE modeste ee bar straighte e ereduced esmall

X-HEIGHT

smalld or modest d modest dvery large dlarge modest Letters - Introduction to Type d d Martin Krzywinski mkweb.bcgsc.ca v1 19 October 2010 CENTAUR BEMBO GARAMOND BASKERVILLE DIDOT FUTURA MATCHING TYPE

EMWaceptsxGILL SANS, ERIC GILL, 1927 keep within the same historical period

refer to the same designer EMWaceptsxPERPETUA, ERIC GILL, 1926 match structure

EMWaceptsxJOANNA, ERIC GILL, 1930

EMWaceptsxMERIDIEN, ADRIAN FRUTIGER, 1955

EMWaceptsxUNIVERS, ADRIAN FRUTIGER, 1957

EMWaceptsxFRUTIGER, ADRIAN FRUTIGER, 1975

Letters - Introduction to Type Martin Krzywinski mkweb.bcgsc.ca v1 19 October 2010 EMWaceptsxSYNTAX, EDUARD MEIER, 1968 EMWaceptsxFUTURA, PAUL RENNER, 1927

GARAMOND EMWaceptsx EMWaceptsxBODINI, GIAMBATTISTA BODONI, 1798

EMWaceptsxSABON, JAN TSCHICHOLD, 1964 EMWaceptsxDIDOT, FERMIN DIDOT, 1784-1811

EMWaceptsxHELVETICA, MAX MIEDINGER/EDUARD HOFFMAN, 1957 EMWaceptsxLEGACY, RONALD ARNHOLM, 1992

EMWaceptsxCLARENDON, ROBER BESLEY, 1845 EMWaceptsxLEGACY SERIF, RONALD ARNHOLM, 1992

EMWaceptsxEGYPIENNE, ADRIAN FRUTIGER, 1956 EMWaceptsxJENSON, ROBERT SLIMBACH, 1996

EMWaceptsxUTOPIA, ROBERT SLIMBACH, 1989 Letters - Introduction to Type Martin Krzywinski mkweb.bcgsc.ca v1 19 October 2010 TYPEFACE WEIGHTS

a professionally designed face will come in many weights

Letters - Introduction to Type Martin Krzywinski mkweb.bcgsc.ca v1 19 October 2010 HELVETICA NEUE - 50+ WEIGHTS

Helvetica Neue contains over 50 weights

Letters - Introduction to Type Martin Krzywinski mkweb.bcgsc.ca v1 19 October 2010 FIGURES - OSF AND LF

professional contain a variety of additional characters

old style figures

lining figures

ligatures

http://en.wikipedia.org/wiki/Typographic_ligature

http://fontfeed.com/archives/figuring-it-out-osf-lf-and-tf-explained/ Letters - Introduction to Type Martin Krzywinski mkweb.bcgsc.ca v1 19 October 2010 ALTERNATE CHARACTERS AND SWASHES

Letters - Introduction to Type Martin Krzywinski mkweb.bcgsc.ca v1 19 October 2010 SYMBOLS

ampersand is derived from the latin et (and)

MS TREBUCHET http://en.wikipedia.org/wiki/Ampersand

fleurons are ornamental characters to separate and mark ends of inscriptions

HEDERA (IVY LEAF)

octothorp (#) means eight fields, from its use in cartography to represent a village

Letters - Introduction to Type Martin Krzywinski mkweb.bcgsc.ca v1 19 October 2010 OPTICALS

Opticals are versions of a face designed to be used in a specific size range

6-8pt caption

9-13pt regular

14-24pt subhead

25-72pt display

Letters - Introduction to Type Martin Krzywinski mkweb.bcgsc.ca v1 19 October 2010 REASON FOR OPTICALS

a version of a typeface designed to be used at small sizes (caption) has its strokes strengthened to maintain legibility

the manner in which this is done cannot be trivially duplicated by simply adding a constant outline to the letter form (e.g. 0.5pt stroke in Illustrator)

caption versions are unsuitable at large sizes because their strokes are too thick with respect to the height of the letter

similarly, display versions are too weak at small sizes

CAPTION REGULAR SUBHEAD DISPLAY

6PT EMWaceptsx EMWaceptsx EMWaceptsx EMWaceptsx

12PT EMWaceptsx EMWaceptsx EMWaceptsx EMWaceptsx

18PT EMWaceptsx EMWaceptsx EMWaceptsx EMWaceptsx

36PT EMWaceptsx EMWaceptsx EMWaceptsx EMWaceptsx

Letters - Introduction to Type Martin Krzywinski mkweb.bcgsc.ca v1 19 October 2010 UNITS OF TYPE

point - 1/72 inch

pica - 12 points

em (mutton) - linear measure equal to type size (e.g. 12 pt for 12 pt type)

en - em/2

POINT SIZE CAN BE CONFUSING BECAUSE SAME-PT-SIZED LETTERS FROM DIFFERENT TYPEFACES CAN HAVE DIFFERENT PHYSICAL SIZE.

THE POINT SIZE REFERS TO THE EM QUAD, WHICH IS A SQUARE EM X EM WITHIN WHICH THE LETTERFORM LIES. EIMQWabqm

Letters - Introduction to Type Martin Krzywinski mkweb.bcgsc.ca v1 19 October 2010 DASHES

figure dash is used between numbers

604-877-6000

endash is used to indicate a number range, or a relationship

children between 6–10 years of age Vancover–Toronto connection

emdash is used to separate parenthetical thought

I forgot my umbrella and arrived wet — silly me.

Letters - Introduction to Type Martin Krzywinski mkweb.bcgsc.ca v1 19 October 2010 DIGITAL TYPE

bitmap fonts are designed to be used at a specific resolution (terminals, dot-matrix)

e.g. minifonts.com

Letters - Introduction to Type Martin Krzywinski mkweb.bcgsc.ca v1 19 October 2010 DIGITAL TYPE

postscript (1980s) cubic Bezier, Adobe

TrueType (1980s) quadratic Bezier, Apple (licensed by Microsoft)

OpenType (1996) Microsoft/Adobe collaboration, platform independent, cubic or quadratic

Letters - Introduction to Type Martin Krzywinski mkweb.bcgsc.ca v1 19 October 2010 HINTING

the process of fitting a vector ’s outlines to a grid (e.g. screen), typically of a lower resolution

verdana and georgia (Matthew Carter, Microsoft) are excellent screen fonts with superb hinting (hinted by Tom Rickner, Monotype)

http://www.will-harris.com/verdana-georgia.htm

http://en.wikipedia.org/wiki/Font_hinting

VERDANA GEORGIA EIMQWaceptsx EIMQWaceptsx EIMQWaceptsx EIMQWaceptsx EIMQWaceptsx EIMQWaceptsx EIMQWaceptsx EIMQWaceptsx EIMQWaceptsx EIMQWaceptsx EIMQWaceptsx EIMQWaceptsx EIMQWaceptsx EIMQWaceptsx EIMQWaceptsx EIMQWaceptsx EIMQWaceptsx EIMQWaceptsx

Letters - Introduction to Type Martin Krzywinski mkweb.bcgsc.ca v1 19 October 2010 1. Helvetica [1957 - Max Miedinger] 44. Metro [1929 - W. A. Dwiggins] 82. Mrs Eaves [1996 - Zuzana Licko] 2. Garamond [1530 - Claude Garamond] 45. Didot [1799 - Firmin Didot] 83. Corpid [1997 - Lucas de Groot] 3. Frutiger [1977 - Adrian Frutiger] 46. Formata [1984 - Bernd M llenst dt] 84. Miller [1997 - Matthew Carter] TOP 100 4. Bodoni [1790 - Giambattista Bodoni] 47. Caslon [1725 - William Caslon] 85. Souvenir [1914 - Morris Fuller Benton] 5. Futura [1927 - Paul Renner] 48. Cooper Black [1920 - Oswald B. 86. Instant Types [1992 - Just van 6. Times [1931 - Stanley Morison] Cooper] Rossum] 7. Akzidenz Grotesk [1966 - G nter 49. Peignot [1937 - A. M. Cassandre] 87. [1845 - Benjamin Fox] Gerhard Lange] 50. Bell Gothic [1938 - Chauncey H. 88. Triplex [1989 - Zuzana Licko] 8. Officina [1990 - Erik Spiekermann] Griffith] 89. Benguiat [1989 - Ed Benguiat] 9. Gill Sans [1930 - Eric Gill] 51. Antique Olive [1962 - Roger Excoffon]90. Zapf Renaissance [1984 - Hermann 10. Univers [1954 - Adrian Frutiger] 52. Wilhelm Klngspor Gotisch [1926 - Zapf] Rudolf Koch] 11. [1954 - Hermann Zapf] 91. Filosofia [1996 - Zuzana Licko] 53. Info [1996 - Erik Spiekermann] 12. Franklin Gothic [1903 - Morris Fuller 92. Chalet [1996 - House Industries] Benton] 54. Dax [1995 - Hans Reichel] 93. Quay Sans [1990 - David Quay] 13. Bembo [1496 - Francesco Griffo] 55. Proforma [1988 - Petr van Blokland] 94. C zanne [1995 - Michael Want, James 14. Interstate [1993 - Tobias Frere-Jones] 56. Today Sans [1988 - Volker K ster] Grieshaber] 15. Thesis [1994 - Lucas de Groot] 57. Prokyon [2002 - Erhard Kaiser] 95. Reporter [1938 - Carlos Winkow] 16. [1934 - Frank H. Pierpont] 58. Trade Gothic [1948 - Jackson Burke] 96. Legacy [1992 - Ronald Arnholm] 17. Walbaum [1800 - Justus Walbaum] 59. Swift [1987 - Gerald Unger] 97. Agenda [1993 - Greg Thompson] 18. Meta [1991 - Erik Spiekermann] 60. Copperplate Gothic [1901 - Frederic 98. Bello [2004 - Underware] W. Goudy] 19. Trinit [1982 - Bram De Does] 99. Dalliance [2000 - Frank Heine] 61. Blur [1992 - Neville Brody] 20. Din [1926 - Ludwig Goller] 100. Mistral [1953 - Roger Excoffon] 62. Base [1995 - Zuzana Licko] 21. Matrix [1986 - Zuzana Licko] 63. Bell Centennial [1978 - Matthew http://justcreativedesign.com/ 22. OCR [1965 - American Type Carter] Founders] 2009/03/04/the-top-100-best-fonts-of- 64. News Gothic [1908 - Morris Fuller all-time/ 23. Avant Garde [1968 - Herb Lubalin] Benton] 24. [1985 - Chris Holmes / Charles 65. Avenir [1988 - Adrian Frutiger] Bigelow] 66. Bernhard Modern [1937 - Lucian 25. Sabon [1964 - Jan Tschichold] Bernhard] 26. Zapfino [1998 - Hermann Zapf] 67. Amplitude [2003 - Christian 27. [1956 - Roger Schwartz] Roberson] 68. Trixie [1991 - Erik van Blokland] 28. Stone [1987 - Summer Stone] 69. Quadraat [1992 - Fred Smeijers] 29. Arnhem [1998 - Fred Smeijers] 70. [2002 - Christian 30. Minion [1990 - Robert Slimbach] Schwartz] 31. Myriad [1992 - Twombly & Slimbach] 71. Nobel [1929 - Sjoerd de Roos] 32. Rotis [1988 - Olt Aicher] 72. Industria [1990 - Neville Brody] 33. Eurostile [1962 - Aldo Novarese] 73. Bickham Script [1997 - Richard Lipton] 34. Scala [1991 - Martin Majoor] 74. Bank Gothic [1930 - Morris Fuller 35. Syntax [1968 - Hans Eduard Meier] Benton] 36. Joanna [1930 - Eric Gill] 75. Corporate ASE [1989 - Kurt 37. Fleishmann [1997 - Erhard Kaiser] Weidemann] 38. Palatino [1950 - Hermann Zapf] 76. Fago [2000 - Ole Schafer] 39. Baskerville [1754 - John Baskerville] 77. Trajan [1989 - Carol Twombly] 40. Fedra [2002 - Peter Bil'ak] 78. Kabel [1927 - Rudolf Koch] 41. Gotham [2000 - Tobias Frere-Jones] 79. House Gothic 23 [1995 - Tal Leming] 42. Lexicon [1992 - Bram De Does] 80. Kosmik [1993 - Letterror] Letters - Introduction to Type 43. Hands [1991 - Letterror] 81. Caecilia [1990 - Peter Matthias Martin Krzywinski mkweb.bcgsc.ca Noordzij] v1 19 October 2010 PROGRAMMING FONTS

andale mono int(@{$font{$name}{$size++}}) liberation mono int(@{$font{$name}{$size++}})

anonymous int(@{$font{$name}{$size++}}) lucida console int(@{$font{$name}{$size++}})

aurulent sans mono int(@{$font{$name}{$size++}}) lucida typewriter int(@{$font{$name}{$size++}})

sans mono int(@{$font{$name}{$size++}}) int(@{$font{$name}{$size++}})

int(@{$font{$name}{$size++}}) int(@{$font{$name}{$size++}})

std int(@{$font{$name}{$size++}}) monofur int(@{$font{$name}{$size++}})

dejavu sans mono int(@{$font{$name}{$size++}}) pragmata int(@{$font{$name}{$size++}})

droid sans mono int(@{$font{$name}{$size++}}) int(@{$font{$name}{$size++}})

int(@{$font{$name}{$size++}}) proggy int(@{$font{$name}{$size++}})

saxmono int(@{$font{$name}{$size++}})

the sans mono int(@{$font{$name}{$size++}})

Letters - Introduction to Type Martin Krzywinski mkweb.bcgsc.ca v1 19 October 2010 RESOURCES

The Elements of Typographic Style Robert Bringhurst

The only book about type you will need.

The FontBook http://www.fontbook.com/

A handy (if heavy) resource of 32,000+ typefaces. Ridiculously inexpensive - $99USD.

Letters - Introduction to Type Martin Krzywinski mkweb.bcgsc.ca v1 19 October 2010