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