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 Futura letters
it is easier to identify and distinguish typefaces by examining certain structures within the letter form (serif, terminal, 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 TYPEFACE
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 fonts 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 font’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. Clarendon [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. Optima [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. Rockwell [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. Lucida [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. Letter Gothic [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. Neutraface [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++}})
bitstream vera sans mono int(@{$font{$name}{$size++}}) menlo int(@{$font{$name}{$size++}})
consolas int(@{$font{$name}{$size++}}) monaco int(@{$font{$name}{$size++}})
courier 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++}}) profont int(@{$font{$name}{$size++}})
inconsolata 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