Designing an Interface to Combine Typefaces Based on Typographic Anatomy and Letter Formations Jill Sanders [email protected]
Total Page:16
File Type:pdf, Size:1020Kb
Iowa State University Capstones, Theses and Creative Components Dissertations Spring 2019 Designing an interface to combine typefaces based on typographic anatomy and letter formations Jill Sanders [email protected] Follow this and additional works at: https://lib.dr.iastate.edu/creativecomponents Part of the Graphic Design Commons Recommended Citation Sanders, Jill, "Designing an interface to combine typefaces based on typographic anatomy and letter formations" (2019). Creative Components. 243. https://lib.dr.iastate.edu/creativecomponents/243 This Creative Component is brought to you for free and open access by the Iowa State University Capstones, Theses and Dissertations at Iowa State University Digital Repository. It has been accepted for inclusion in Creative Components by an authorized administrator of Iowa State University Digital Repository. For more information, please contact [email protected]. GEORGIA / HELVETICA NEUVE / BASKERVILLE / ARIAL BLACK / GIBBS GENEVA / MONOTYPE GROTESQUE / MRS. EAVES / P22 UNDERGROUND DIDOT / ROCKWELL / HELVETICA / UNIT SLAB PRO / TRADE GOTHIC NEXT ADELLE PE / GILL SANS / TURQUOISE / AVENIR / SOURCE SANS PRO CENTURY GOTHIC PRO / CONDOR / MINION PRO / VERDANA / TIMES NEW ROMAN MYRIAD PRO / COURIER NEW / SCALA PRO AMERICAN TYPEWRITER / PROXIMA NOVA / ANTIQUE OLIVE / ARIAL / BODONI / COURIER / FUTURA / PROXIMA SOFT / MERRIWEATHER / IMPACT / PALATINO / STARLING / LUCIDA GRANDE / BIG CASLON / CODE SAVER META PRO / BERLIN SANS / BEBAS NEUE / SOFIA PRO SOFT / ITC BERKLEY OLDSTYLE / WHITMAN / IVYMODE / FIELDWORK GEO / INTERSTATE / ORPHEUS PRO / AGENDA / POYNTER OLDSTYLE TEXT / BRANDON GROTESQUE / COLUMBIA TITLING PROXIMA NOVA / OPEN SANS / CALIBRI / FREIGHTTEXT PRO / EFFRA / ITC AVANT GARDE GOTHIC / LEXIA / BERNINA SANS / CALLUNA SANS / BOOKMAN JF SUPRIA SANS / ADOBE GARAMOND PRO / ARVO / MR. EAVES XL / SKOLAR LATIN / ITC FRANKLIN GOTHIC / FREIGHTSANS PRO / QUESTA SANS / MILLER TEXT / NEUZEIT GROTESQUE TITLING GOTHIC / NEUE HAAS UNICA / GRANVILLE / SOLEIL / FILOSOFIA NIMBUSA SANS / WARNOCK / ALVERATA / CALLUNA / GIBSON / SABON LT PRO / BENTON MODERN DISPLAY / KEPLER Designing an Interface to Combine Typefaces Based on Typographic STD / MUSEO SANS / NOBEL / IBM PLEX Anatomy and Letter Formations SANS / TISA PRO / FARNHAM DISPLAY / Jillianne E. M. Sanders CAECILIA LT PRO / ANONYMOUS PRO / Spring 2019 INCONSOLATA / SPACE MONO / QUATRO / CRONOS PRO / OPTIMA / MONSERRATE / BENGUAIT PRO ITC / ALTERNATE GOTHIC No.1 / BENGUAIT PRO ITC / AKTIV GROTESK / PLANTIN MT PRO / TABLET GOTHIC / AKTIV GROTESK / MENO BANNER CLARENDON URW / POYNTER OLDSTYLE DISPLAY / FORMA DJR / TRILBY / VENDETTA / MR. EAVES SANS / MENCO / PARALUCENT /LE MONDE LIVRE CLASSIC / ACUMIN PRO / FIRA SANS / TENSO / AZO SANS / TRAJAN / LITHOS PRO / JUBILAT / PRAGMATICA / BASIC GOTHIC PRO / STIX GENERAL / KEFA / PT SANS CAPTION / ITC GALLIARD PRO / UNIT SLAB PRO / TREBUCHET MS / Designing an interface to combine typefaces based on typographic anatomy and letter formations by Jillianne Elizabeth Maureen Sanders A thesis submitted to the graduate faculty in partial fulfllment of the requirements for the degree of MASTER OF ARTS Major: Graphic Design Program of Study Committee: Paula J. Curran, Major Professor Andrea L. Quam The student author, whose presentation of the scholarship herein was approved by the program of study committee, is solely responsible for the content of this thesis. The Graduate College will ensure this thesis is globally accessible and will not permit alterations after a degree is conferred. Iowa State University Ames, Iowa 2019 Copyright © Jillianne Elizabeth Maureen Sanders, 2019 All rights reserved. TABLE OF CONTENTS NOMENCLATURE ii Typographic Terminology ii Typographic Classifcations ii Typographic Anatomy iii ABSTRACT v CHAPTER 1. INTRODUCTION 1 CHAPTER 2. INSPIRATION AND INFLUENCES 3 What the Font App and Website 3 511 Comparing Typefaces Exploration 3 Tiff 3 CHAPTER 3. RESEARCH AND SURVEYS 4 Literature Review 4 Survey 5 Survey Results 5 CHAPTER 4. DESIGN 6 Website 6 App 6 Name 7 Logo 7 Color Palette 7 CHAPTER 5. CONCLUSION 7 Future Implementations and Direction 7 APPENDIX 9 Survey Questions APPENDIX B 11 Summery of Survey Responses APPENDIX C 15 Sketches 15 Type Hype Website & App 21 REFERENCES 45 TABLE OF CONTENTS i NOMENCLATURE Defnitions from Typographic Design: Form and Communication and The Complete Manual of Typography: A Guide to Setting Perfect Type TypograpHic Terminology Character Symbol, sign or mark in a language system: the alphabet for example. Font A font is a cookie cutter, the description of a typeface, in computer code, photograph, or metal, used to image the type. Typeface A typeface is the cookie: the alphabet with a certain design. TypograpHy The art and process of typesetting by any system or method. Stress Gradual variation in the thickness of a curved part or stroke, most visible in the letter “O”. X-HeigHt Height of lowercase letters in a font (excludes ascenders and descenders.) THick/THin Contrast The thinnest or thickest parts of the letterform. WeigHt Lightness or heaviness of a typeface (determined by ratio of stroke thickness to character height.) Baseline The line where letters “sit.” Above are ascenders, and below are descenders extend. Typographic Classifcations Old Style Classifcation of 15th-18th century serif designs with thick/thin contrasts, bracketed serifs, diagonal stress on the capital letter “O”, and a handwritten infuence. Transitional Classifcation of serif which combines aspects of both Old Style and Modern typefaces. Modern Classifcation of serif designed at the end of the 18th century whose characteristics include vertical stress on capital letter “O”, hairline serifs and prominent contrast between thick/thin strokes. NOMENCLATURE ii Slab Classifcation of serif characterized by rectangular serifs similar in APEX weight to the main stroke. HAIRLINE EYE Grotesque Classifcation of sans serif type characterized by stroke with varied contrast in width and square-like curves. FILLET A Neo- CROSSBAR e Grotesque Classifcation of sans serif to describe sub-category of grotesque characterized by less contrast in stroke width, curved strokes which terminate as horizontals, higher x-heights, and shorter descenders. Humanist Classifcation of sans serif typeface with characteristics including letterforms with diagonal stress, and two-story “a” and “g” characters. BOWL Geometric Classifcation of sans serif typeface based on circles and rectangles. Characteristics include uniform stroke width and single-story “a” and SERIF “g” characters. COUNTER EAR Typographic Anatomy LINK 1. Apex The point at the uppercase letter “A.” G g DESCENDER 2. Arm A horizontal stroke unattached at one or both ends such as in the SPUR letters “T” or “E.” LOOP 3. Ascender The stroke of a lowercase letter that is above the mean line like the letter “k”. 4. Bowl Rounded stroke as seen in “g,” “o,” and “q.” 5. Counter Negative space completely or partially closed by the letterform as in ASCENDER SHOULDER “G” and “C.” STROKE 6. Crossbar Horizontal stroke that connects two sides of a letter seen in “A” and LEG TAIL “H” or bisecting in “F” and “T.” k R 7. Descender Stroke on a lowercase letter that falls below the baseline such as “g,” “j,” “p,” “q,” and “y.” 8. Ear Found only on Roman two-story “g’s”projecting from the bowl on the upper right side. 9. Eye Found only on the lowercase “e.” It is the enclosed part of the letter. ARM SPINE STEM iii T TERMINAL S 10. Fillet Contoured edge that connects the serif and stem of a bracket serif: APEX commonly seen in “A” and “K.” HAIRLINE EYE 11. Hairline Thinnest stroke of a typeface. A FILLET 12. Leg A lower diagonal stroke seen on letters such as “K,” and “R”. CROSSBAR e 13. Link- The connecting stroke which connects the bowl and loop of the lowercase roman “g.” 14. Loop Same as the bowl but only found on lowercase roman “g.” 15. Serif Short strokes extending from and at an angle on the ends of upper and lower major strokes of each letter. BOWL SERIF 16. Shoulder Curved stroke extending from a stem such as uppercase “R” or lowercase “m.” COUNTER EAR 17. Spine Only found in the letter “S:” the central curve that connects the upper LINK and lower portions of the letter. G g DESCENDER 18. Spur A projection smaller than a serif found on the curved stroke of the SPUR uppercase letter “G.” LOOP 19. Stem A major vertical or diagonal strokes of the letterform such as in “T,” “R,” “Z”, “I” and “A.” 20. Stroke Linear elements within a letterform. 21. Tail Diagonal stroke or loop at the end of a letter such as in “R” or “Q.” ASCENDER SHOULDER 22. Terminal End of a stroke that does not end with a serif. STROKE k LEG R TAIL ARM STEM SPINE iv T TERMINAL S ABSTRACT The purpose of this creative component is to explore the theory that letterforms and typographic anatomy infuence which typefaces work well together, and how to most effciently provide designers with necessary tools to make those decisions. In this paper, I propose a website concept and app resource for both novice and experienced designers. It is diffcult to fnd a comprehensive website, book or blog if an individual is not aware of its existence, as my research will show. My creative component focuses on the collection of this widespread information and combines it into one resource that promotes designer collaboration. This resource tool would help designers keep up to date on current trends, books, and font releases from anywhere they work with a mobile app or website. My proposed website also features a tool that would help designers determine which fonts to combine based on letter formation and type anatomy. I drew upon relevant literature, typographic explorations, and a survey I conducted. My survey of working professionals and academics provided results that suggest a broad scope of taste, historical and regional infuence. The survey also explored the infuence of designer intuition, and the role it plays when choosing an effective typeface. ABSTRACT v INTRODUCTION Twenty-six letters comprise the English alphabet. There are millions of combinations, arrangements and abbreviations that create symbolic patterns fundamental to human existence, languages, and more specifcally, words.