ART 338: Typography II, Winter 2018 Department of Art and Design California Polytechnic State University
Typography Journal
A summary of the experiences from Typography II. Ryan Hutson
1 • Introduction
INTRODUCTION This journal summarizes my experience in Typography II. The class aims to teach students to use typography in an effective, content-driven manner through lectures, activities, discussions, and projects. Overall, students will gain a deeper understanding of effective page layout and use of the grid, using paragraph and character styles to maintain typographic consistency and using typography to create clear information hierarchy.
2 • Typography II Journal
LECTURES
3 • Lectures
Lecture 1: How to Succeed in Typography II Goal: to make us fall in love with typography Steps to succeed: 1. Listen: Eyes on speaker, laptop closed, phones silenced and put away 2. Take notes during lectures, reading, critiques, and whenever you get a good idea 3. Read carefully when doing research, getting a new assignment, before submitting digital files, and before outputting work. 4. Follow directions at all times. 5. Seek feedback on all aspects of design and throughout the design process 6. Ask for help if you are struggling or don’t understand something. 7. Be curious about what peers are doing, typography, and what’s happening in the world.
4 • Typography II Journal
Lecture 2: Typographic refinement, the details Point size Measuring system was first developed for handset metal type by Johann Gutenberg around 1450. Standards for typographic measurement were introduced by French type designer Pierre Simon Fournier le Jeune in 1737. • 12 points = 1 pica • 6 picas = 1 inch • Nomenclature: 1p6 = 1 pica, 6 points • Traditional metal type had a range of text and display sizes in increments from 5 point to 72 point. How do you choose a point size? When choosing a typeface, consider: • Typeface proportions and weight • Length of text • Format of viewing (printed, digital, or both) • Audience/reader of the text • Content of text • Screen vs print • Body text on screen should generally be displayed larger than body text sizes in print. Typically for screen, body text should be 14pt or larger, comparatively to print which will range from 9pt to 12pt. What about a hard working typeface? A workhorse typeface will have the following characteristics: • A good regular weight • Robust proportions • Has at least a bold weight and italic version • Legible numerals • Narrow enough to fit large amounts of copy into available space.
5 • Lectures
Things you can do to make your type look better • Kern type at display sizes • Customize leading: should be 120–145% of the point size • Optimal line length should contain 45–90 characters per line, 2–3 lowercase alphabets, 8–13 words per line, on average. • Letters that are too close together or spread apart are distracting for the reader. Type set in small caps or all caps can handle more letterspacing than type set in upper and lowercase. • Avoid fake small caps, use only if the typeface has an actual small caps style • Know your dashes • Hyphen (-): used if a word is too long for the column length. • En dash (–): used to indicate duration • Em dash (—): used to express a break in the flow of a sentence • Customize hyphenation to avoid too many consecutive hyphens and any word fragments. • Hyphenate words with at least 6 letters, after the first 3 letters, before the last 3 letters, and limiting to two consecutive hyphenations. • Use smart quotation marks, use straight quotes and prime marks when appropriate • Fix rags when practical • Use discretionary hyphens, line breaks, or tracking to adjust rags. • Avoid widows and orphans. Setting tracking to -10 or adjusting column width can resolve these issues. • Always spell check with command + I.
6 • Typography II Journal
Lecture 3: Why type matters Bad typography can have real world examples. Butterfly Ballot A voting ballot used in Palm Beach County, Florida for the 2000 presidential election. An approved typographic alternative to the ballot proved to be an odd solution. It took extra work for a reader to decipher the ballot, increasing chances of error that could deviate from their intended vote. What is typography? According to Matthew, it is the visual component of the written word. Typography performs a utilitarian function. What is typography for? Type is for the benefit of the reader and it helps get the most valuable thing: their attention. Why does typography matter? Good typography can help your reader devote less attention to the mechanics of reading and more attention to your message. Good typography reinforces the meaning of the text. Your ability to produce good typography depends on how well you understand the goals of your text.
7 • Lectures
Lecture 4: Choosing typefaces and understanding fonts How to choose the right typeface/font? Design factors to consider: • Content: How long is the text? What is it about? • Audience: What is the age of the reader? What is the demographic of the reader? • Format/Context: What is the size of the page/screen? Is the size set or will it vary? At what distance will the text be read? • Technical factors to consider: • Does the font have a full character set? • Does the font have foreign accented characters/glyphs? • Does the font have multiple weights and styles? • What is the format of the font? OpenType fonts are cross-platform • Does the font have a Web Font version? Where do you get fonts and why are they so expensive? Creating fonts are complex. Take years to develop and often require huge teams. When you buy a font, you purchase a license, granting you the right of use in a specific manner as outlined in the license. Places to get fonts • Google Fonts: free fonts for print and web • Lost Type Co-op: type foundry • League of Moveable Type: free, open-source fonts • Font Squirrel: free fonts for commercial use • Fontspring: commercial licensing • House Industries: draw attention to under-appreciated art genres • MyFonts: wide range of fonts, excellent newsletters • Fonts.com: extensive collection and nice blog How do I install my new fonts? Where do fonts live on my computer? Possible places: • User: ~/Library/Fonts
8 • Typography II Journal
• Each user has control over fonts installed in their Home • Local: /Library/Fonts • Any local user can use fonts installed in this folder • Network: /Network/Library/Fonts/ • Network folder is for fonts shared among all users of a LAN • System: /System/Library/Fonts/ • Mac OS X requires fonts in this folder for system use and displays. Should never be altered/deleted. What about a font manager? • You can activate fonts by placing them into any of the fonts folders on your hard drive. Risk damage if they are frequently moved around • In general, you want to have the minimum number of fonts installed to maximize computer performance. • Use sets to keep fonts organized and categorized. • Alternatives to Font Book are Font Explorer X Pro and Suitcase Fusion.
9 • Lectures
Lecture 5: How to print booklet Print booklet automates imposition, simplifying the binding process. For a saddle-stitched book, the number of pages must be divisible by four. Step 1: File > Print. Change printer to PostScript File Step 2: File > Print Booklet. Print preset: [Current Document Settings]. Printer: PostScript File. Step 3: Check preview to see if the file looks correct. Step 4: Make sure blank pages are recognized, sometimes Print Booklet doesn’t identify these pages. To fix this, put something small on each blank page and define it as a light color. Step 5: Convert PostScript file to a PDF. Open Adobe Acrobat: File > Create > PDF from File Step 6: Print PDF double-sided, and to flip on short edge.
10 • Typography II Journal
Lecture 6: Tips for an effective design collaboration Tip 1: Critique all books. Identify and incorporate the strongest design techniques into the final series of books. Tip 2: Establish and organize the styles. Make a list of all the styles necessary in the three books. Name the styles logically so others can understand the application. Tip 3: Paragraph Style options General settings: shows a overview of the style settings and if the style was based on an existing style Basic character formats: font, font style, size, leading, kerning, tracking and case. Advanced character formats: only need to worry about the baseline shift. Indents and spacing: defines alignment, indents, and space before or after paragraph returns. Tabs: shows all tabs and leaders Paragraph rules: shows rules that can appear above or below the paragraph. Paragraph shading: text highlighting Keep options: if you want to keep all or a certain number of lines together in one paragraph. Hyphenation: turns hyphenation on or off and customizes word hyphenation settings. Justification: customizes justified type spacing Span columns: if you want to switch from a single column to multiple commons in the same text box. Drop caps and nested styles: large initial caps and styles within other styles. GREP style: Globally search a Regular Expression and Print. Allows you to use code to find/edit or style text through the find/change dialog box or via paragraph styles.
11 • Lectures
Bullets and numbering: set up lists with auto bullet points or numbers. Character color: color of text, percentage of tint, and stroke alignment definition. OpenType features: choose Titling and/or Swash alternative characters, specify figure (number) style. Underline options: underline text Strikethrough options: strikethrough text Export tagging: turns styles into CSS, for ePubs and websites created in InDesign. Tip 4: Character style options Should only be used for changing text style within a paragraph. General: Shows style name and if the character style is based on a pre-existing style. Basic character formats: font, font style, size, kerning, tracking and case. Leading is inherited from the paragraph style. Advanced character formats: only adjust baseline shift. Character color: color of text, percentage of tint, stroke alignment. OpenType features: choose Titling and/or Swash alternative characters, specify figure (number) style. Underline options: use this to set up a hyperlink style. Tip 5: Tables are a great tool for positioning text and the table itself can be invisible. Table styles can be used for styling multiple tables within a document. The style defines: • the outside border of the table • the dividing lines in the table • the space above and below the table • the fills of fields in the table
12 • Typography II Journal
Tip 6: Cell styles are used to control how your text looks within the table. They can be used for styling individual cells, or rectangular divisions of the table. The cell style defines: • the borders around the cell • the paragraph style of the text • how the text is positioned within the cell • the style of the text within the cell • the fill color of the cell • if the cell is x-ed out Tip 7: Object styles work the same way
13â€ƒâ€˘â€ƒLectures
Lecture 7: Typography on screen Attributes to consider when choosing type for the screen Typeface contrast The amount of contrast between thick and thin strokes of characters impacts legibility. Higher contrast typefaces can be useful in small amounts or as headlines. x-height When choosing body text, a typeface with a high x-height can be useful for interfaces or on way finding. If x-height is too high, it may become difficult to distinguish letters n and h, or a and d. Character distinction Differentiating between different characters such as one, the lowercase l and the uppercase i is essential for on screen legibility. Special characters Strive to use typefaces that support different types of numbers, correct punctuation, and special characters, especially if the text is set in a different language. Finding alternatives Classic typefaces are sometimes so overused that they begin to look like generic defaults. Strategies for pairing typefaces Look for distinction, avoid pairing typefaces that are too similar. Pair display and text faces. Look for harmony Find typefaces with inherent visual relationships in their structure. Use a family Some typefaces have both serif and sans serif version, built on the same structure.
14 • Typography II Journal
Lecture 8: Using grids In page layout, grids: • Allow diverse visual elements to coexist • Are informed by the designer’s intentions • Aid in communicating cohesive messages ANATOMY OF A GRID: Margins: Define the active area of the page. Smaller margins increase usable surface area, while larger margins create an open visual space. Columns: Vertical divisions of space are used to align and organize elements. Column widths vary according to the function of the design. Gutters: The spatial divisions between columns. Gutters prevent collisions of textual and visual information. Flow lines: Divide the page into horizontal spatial divisions and create additional points of alignments for elements. Modules: Create spatial fields that contain textual and visual content. Positioning of modules can be varied to create rhythm and sequence. TYPES OF GRIDS Manuscript grid: The simplest grid. Its base structure is a large rectangular area that takes up most of the page. Accommodates extensive continuous text, like a book or long essay. Column grid: Helps organize discontinuous information. Columns can be dependent on each other for running text, independent for small blocks of text, or crossed over to make wider columns. Goal is to find a width that accommodates a number of characters per line of type at a given size. Modular grid: A column grid with a large number of horizontal flow lines that subdivide the columns into rows, creating a matrix of cells, or, modules.
15 • Lectures
USING GRIDS WILL: • Help organize elements in layouts • Establish consistency throughout a publication • Provide unity and rhythm in a wide range of formats and applications. Example of a manuscript grid in use.
Example of a column grid in use.
Example of a modular grid in use.
16 • Typography II Journal
READINGS
17 • Readings
Reading 1 Butterick’s Practical Typography TYPOGRAPHY IN TEN MINUTES 1. Typographic quality of your document is determined by how the body text looks 2. Point size is the size of the letters. In print, the most comfortable range for body text is 10–12 point. On web, the range is 15–25 pixels. 3. Line spacing is the vertical distance between lines of text. It should be 120%–145% of the point size. 4. Line length is the horizontal width of the text block. It should average 45–90 characters per line or 2–3 lowercase alphabets. 5. Choose good fonts to use, professionally made. Ignore the system fonts. SUMMARY OF KEY RULES 1. The four most important typographic choices you make in any doc ument are point size, line spacing, line length, and font (passim), because those choices determine how the body text looks. 2. Point size should be 10–12 points in printed documents, 15-25 pixels on the web. 3. Line spacing should be 120–145% of the point size. 4. The average line length should be 45–90 characters (includ ing spaces). 5. The easie st and most visible improvement you can make to your typography is to use a professional font, like those found in font recommendations. 6. Avoid goofy fonts, monospaced fonts, and system fonts, espe cially times new roman and Arial. 7. Use curly quotation marks, not straight ones (see straight and curly quotes). 8. Put only one space between sentences. 9. Don’t use multiple word spaces or other white-space characters in a row.
18 • Typography II Journal
10. Never use underlining, unless it’s a hyperlink. 11. Use centered text sparingly. 12. Use bold or italic as little as possible. 13. All caps are fine for less than one line of text. 14. If you don’t have real small caps, don’t use them at all. 15. Use 5–12% extra letterspacing with all caps and small caps. 16. Kerning should always be turned on. 17. Use first-line indents that are one to four times the point size of the text, or use 4–10 points of space between paragraphs. But don’t use both. 18. If you use justified text, also turn on hyphenation. 19. Don’t confuse hyphens and dashes, and don’t use multiple hyphens as a dash. 20. Use ampersands sparingly, unless included in a proper name. 21. In a document longer than three pages, one exclamation point is plenty (see question marks and exclamation points). 22. Use proper trademark and copyright symbols—not alpha betic approximations. 23. Put a nonbreaking space after paragraph and section marks. 24. Make ellipses using the proper character, not periods and spaces. 25. Make sure apostrophes point downward. 26. Make sure foot and inch marks are straight, not curly.
19 • Readings
FOREWORD • Typography is the visual component of the written word. • Type is visible language. • Good typography is measure by how well it rein foes the meaning of the text. • “If your argument is easy to follow, it will be a winning one”
20 • Typography II Journal
Reading 2 WHY TYPOGRAPHY MAT TERS Butterick’s Practical Typography • The article uses the butterfly ballot as an example to demonstrate how bad typography can negatively effect an outcome. • Type can engage readers, guide them, and persuade them. • Typography isn’t just the frosting on the doughnut, it has consequences. • If bad typography can have negative consequences, it shouldn’t be hard to believe that good typography can have positive consequences.
21 • Readings
Reading 3 TYPE COMPOSITION Butterick’s Practical Typography Good typography starts with good typing. • A text is a sequence of characters. Every character is a tool. Your goal: to always use the right tool for the job. • Straight quotes the two generic vertical quotation marks located near the return key. These are used for measurements and can be avoided if Smart Quotes is turned on. • Always put exactly one space between sentences. Put one space after punctuation. Extra space will disrupt the flow of white space in a paragraph. • Don’t overuse the exclamation point. • Don’t let parentheses or brackets crash into italicized text. • The colon usually connects the introduction of an idea and its conclusion. • Know your hyphens. • Use correct math symbols. • Use proper ellipses instead of three dots. • Understand the difference between line breaks and carriage returns. • Use white-space characters for space after a number or an in-line indentation • The paragraph mark (¶) is used when citing documents with sequentially numbered paragraphs. The section mark (§) is used when citing documents with numbered/lettered sections. Both should always be followed by a nonbreaking space.
22 • Typography II Journal
Reading 4 TEXT FORMATTING Butterick’s Practical Typography • Includes factors such as point size, bold or italic styles, small caps, letterspacing and kerning. • Underlining makes text hard to read. If you need to emphasize a word try using a bold or italic instead. In other situations, such as headings, you can also consider using all caps, small caps, or changing the point size. • Novelty fonts, script fonts, and handwriting fonts have no place in any document created by a professional writer. • Monospaced fonts are difficult to read. • System fonts already installed on your computer have been optimized for screen legibility, not print. • Bold or italic should be used sparingly to emphasize a contrast from the rest of the text. • The optimal point size for printed body text is between 10–12 point. On the screen body text can range from 15–25 pixels. • Limit yourself to three levels of headings. Two is better. • Letterspacing is the adjustment of horizontal white space between letters in a block of text. Typically lowercase letters do not need additional letterspacing. Text that is set in all caps or small caps will need 5–12% extra letterspacing, particularly at smaller sizes. • Kerning is the adjustment of spacing between specific pairs of letters. • All caps are appropriate for short phrases of text. • Body text should always be printed in black for printed documents. • White text on a dark background is known as knockout type. • Letterheads and business cards can include text set in color to establish hierarchy, but use it sparingly. • Alternate figures are meant for different typographic contexts. Lining figures are where the top and bottom “line up” • Ordinals are numbers that express position in a series. By default,
23 • Readings
your word processor will convert ordinals into superscripts. • Small caps should blend in with lowercase text and is a scaled down version of regular caps. • Roman numerals are difficult to read as a hierarchal heading label, additionally mixing in letters are also weak as you get down the line. Use numbers 1, 2 and 3. Subheads as 1.1, 1.2, 1.3, etc. • It is not always necessary to mix fonts. Some fonts already come with enough variation. It is more appropriate to mix two fonts that are visibly different.
24 • Typography II Journal
Reading 5 PAGE LAYOUT Butterick’s Practical Typography The positioning and relationship of text and other elements on the page. • Centered text is acceptable when used for short phrases or titles. Whole paragraphs should never be centered because it makes it difficult to read. • Justified text is spaced so the left and right sides of the text block both have a straight edge, giving text a cleaner, more formal look. If using justification, you must also turn on hyphenation to avoid rivers. • First-line indents is the most common way to signal the start of a new paragraph versus space between paragraphs. The indent should be no smaller than the point size of the text, and no bigger than four times the point size. Never use tabs to indent the first line. • Line spacing is the vertical distance between lines of text. The optimal line spacing is between 120%–145%. • Line length is the distance between the left and right edges of a text block. Aim for an average length of 45–90 characters. • Page margins set the default territory your text occupies on the page. They determine the width of the text block. At 12 point, left and right page margins of 1.5–2 inches will give you a comfortable line length. • Body text is the most common element in a document. Therefore, how the body text looks will have the most pronounced effect on the appearance of the document. You should always set up the body text first. • Hyphenation is the automated process of breaking words between lines to create more consistency across a text block.
25 • Readings
• Reduce point size and line spacing slightly for block quotations. Indent text block between half an inch and a full inch on the left side. Don’t include quotation marks on ends. • Tables are useful for grids of numbers or other data or for layouts where text needs to be positioned side-by-side or floating at specific locations on the page. • Cell borders are the lines around each cell in the table, useful for as guides when loading information into the table. • Cell margins create space between cell borders and the text of the cell, improves legibility of a dense table. • A rule is a line; a border is a box. They should be used sparingly to create visual distinction. • Space above and below a word or phrase draws attention to the reader. • Control widows and orphans to minimize distractions for the reader. • Keep lines together ensures that all lines in a paragraph appear on the same page.
26 • Typography II Journal
Reading 6 TYPOGRAPHICA MEA CULPA, UNETHICAL DOWNLOADING Steven Heller • Many designers ignore type licenses and cavalierly trade or transfer entire fonts to fellow designers, mechanical artists, printers, or service bureaus. Illicit type sharing betrays an honor system that can only work if we are all honorable. • Designers have a skewed sense of entitlement when it comes to type, perhaps because it is the most common means of written communication. • All font software is protected by copyright and some typeface designs are protected by patents, which provides founders with legal recourse. • All typefaces, from almost every foundry are automatically licensed for a specific number of output devices and CPUs at one location. • You can supply your documents as EPS files or Adobe Acrobat files with fonts embedded so you don’t have to give the service bureau a copy of the font(s).
27 • Readings
Reading 7 MY TYPE DESIGN PHILOSOPHY Martin Major • Martin Major designed Scala, Scala Sans, Telefont, Seria, and Seria Sans. • You cannot be a good type designer if you are not a book typographer. Must know how type works in a piece of text. • The best solution for mixing type is to use a combination of a serif and a sans that derive directly from each other. • Sans serifs have only been used in the past one hundred years substantially. The first being published around 1816 by the William Caslon iv English typefoundry. • Akzidenz Grotesk was the first sans serif to see great success, originally published in 1898. • In 1928, Paul Renner designed Futura, featuring a distinct look inspired by the Bauhaus movement and constructivism. • In 1957, Univers, Helvetica and numerous look-alikes were published as a reaction to pre-war geometric typefaces. • Univers had a strong feature that was new in type design, being made up of almost 21 weights and widths that could be mixed perfectly. • Mixing serif with sans only makes sense when the seriffed typeface and the sans are designed from the same basis or skeleton. • On designing Scala and Scala Sans, “two typefaces, one form principle” • More and more type designers have become aware of the basis of sans serifs and for the first time sans serif designs have become pull partners with seriffed designs.
28 • Typography II Journal
Reading 8 A VIEW OF LATIN TYPOGRAPHY IN RELATIONSHIP TO THE WORLD Peter Bil’ak • An essay scrutinizing the general misconceptions of western typography, and the appropriateness of Euro-centric type terminology. • Present-day dominance of Latin script has caused us to forget the parallel histories outside of Europe. • First recorded movable type system was most likely created in China around 1040 AD by Bi Sheng. • Choe Yun-ui made the transition from wood to metal movable type around 1230 AD. • Most existing typographic classification systems also apply exclusively to Latin type. • Traditional type foundries refer to typefaces other than Latin are referred as “Orientales”, while digital type foundries call these fonts “Non-Latin”. • Type terminology has also been diluted from the dominance and formal characteristics of Latin type, ignoring rich Greek traditions of typography (described as inclined, oblique, or cursive). • There is an increasing modest interest in Arabic, Cyrillic, Greek or Indic scripts.
29 • Readings
Reading 9 LAVA—VOICE OF A MAGAZINE Peter Bil’ak • Lava was designed to bridge the digital and print editions of a newly designed magazine. • Bil’ak and Stuart Bailey tried to create a series of customized typefaces, modified versions of Gill Sans, Plantain, and Trade Gothic. • Wanted a typeface would be the sole constant characteristic, identifying the magazine across multiple platforms (online, eBook, PDF and print). • Ended up with Lava. • Lava was designed to perform optimally in both high- and lowresolution environments.
Use of Lava typeface in print edition of Works That Work magazine.
30 • Typography II Journal
Reading 10 ERIC GILL GOT IT WRONG; A RE - EVALUATION OF GILL SANS Ben Archer • A critique of the Gill Sans typeface and the argument that an earlier typeface by Eric Gill’s mentor, Edward Johnston, is a superior piece of type design. • Gill Sans is the Helvetica of England; ubiquitous and utilitarian. • Gill claimed that Johnston’s letters were not entirely satisfactory or ‘fool-proof’, and that his prototype of Gill Sans was superior. • Archer contends the majority of character shapes in Gill Sans are actually worse than in Johnston’s design of fifteen years previous. • There is no distinction in the lower case l, i and numeral 1 in Gill Sans compared to Johnston. • Variation of the directional stress from weight to weight of Gill Sans in the lower bowl of the eyeglass g. It is no longer a double story by the time it becomes ultra bold. • Shorter middle arms in the E and F help balance and legibility in Johnston’s case. • Students should be urged to approach Gill Sans with caution; it is a hard typeface to use well without making considerable effort. • In 2015, Monotype released Gill Sans Nova addressing several criticisms made against the original typeface. Includes a recognizable numeral 1 and Greek, Cyrillic and many accented characters in the Opentype format.
31 • Readings
Reading 11 BEAUTY AND THE UGLINESS IN TYPE DESIGN Peter Bil’ak • The process of designing Karloff typeface, showing how closely related beauty and ugliness are. • Argues there is no such thing as conceptual type, since type design is a discipline defined by its ability to execute an outcome. Bil’ak goes on speculate on what true example of a conceptual typeface might be like. • Bodoni and Didot considered some of the most beautiful typefaces in existence. Bodoni laid down four principles for beauty: regularity, clarity, good taste, and charm. • Italian from the middle of the Industrial Revolution was a clear choice for deliberate ugliness. The reversed-contrast typeface was designed to deliberately attract readers’ attention by defying their expectations. • Interested in designing a typeface that shared parameters that control the appearance of a typeface, included in both ugliest and most beautiful letterforms. • Karloff connects the high contrast modern type of Bodoni and Didot with the monstrous Italians. • The product is a neutral low contrast typeface. Beauty + ugliness = neutral.
Beauty + ugly = neutral. Neutral being the product of combining these two extremes.
32 • Typography II Journal
Reading 11 AN IDEA OF A TYPEFACE Kai Bernau • Aware that there is no such thing as total neutrality, Neutral typeface explores how the absence of stylistic associations can help the reader engage with the content of a text. • Neutral was an attempt to create a typeface free of all connotations or associations that could distract a reader from the text. • Proved to be difficult to create a typeface free of cultural differences. • Process involved blending different typefaces with one another. • The figures had a great improvement after he decided to redesign the whole typeface. • “A typeface is both a tool for designing, and a tool for reading.” • Can approximate the formal idea of neutrality to some degree.
Detail from type specimen of Neutral.
33 • Readings
Reading 12 MAKING THE WOODKIT TYPEFACE SYSTEM Ondrej Jób • The process of designing Woodkit, a playful fixed-width display series of typefaces inspired by wood type. • Every single glyph fills a square, both horizontally and vertically, acting as reference and homage to the physicality of the real life wooden blocks. • Gave the font broad versatility, mutual interchangeability, and playfulness. Draws inspiration from 19th century wood type posters. • When typing, the font automatically rotates between three different versions for reach letter or number. When two glyphs are typed together, the font replaces them with their narrow variants so they fill just a single narrow square together. • Selection of 500 symbols, shapes, dingbats, and patterns to compliment Woodkit styles.
Specimen of letterpress style of Woodkit typeface.
34 • Typography II Journal
PROJECTS
35  â€˘â€ƒ Projects / Menu re-design
Project 1: Menu design The menu re-design challenges students to organize the information displayed on two different menus in an effective and logical manner. Specifically, students must be attentive to margin and white space, typeface choice, scale and relationship of information. Typographic details such as leading, kerning, and tracking are also taken into account to ensure information is delivered to the reader without any distractions. FIRST ITERATION Create menu designs for the restaurant and cafe of Chez Panisse. The restaurant and cafe will inevitably have two different layouts due to the nature of each menu. The restaurant is more formal and upscale, and has a pre-fixe course for each day of the week. The cafe is less formal and has menu items avalaible to order a la carte, grouped together in sections of appetizers, entrees, and desserts. After researching Chez Panisse, it seemed appropriate to use a serif throughout the menu designs, attributing to the formal and traditional mood. I used paragraph rules, alignments, and styles of text to group related information and create a hierarchy of reading. Restaurant menu: I wanted the reader to notice a clear distinction between the date and price versus the food included in the respective date. I thought information would be best organized if the reader could easily find the date they are dining in and find the food following after. A single axis with information flagged on each side creates vertical and horizontal alignments to deliver these groups of information effortlessly. I also used all caps to style the dates to make them more distinct from the rest of the body text. Cafe menu: The cafe seemed less formal than the restaurant so I felt there was room to wiggle in another typeface to use for headers. Another menu design was necessary since there was a fixed price for each item on the menu. I thought a list format would be appropriate and an efficient use of space. Food is grouped under their respective header, using a line to make the start of a new section obvious to the reader. The reader can read down the list, find an appealing meal, and continue reading to the right to see its respective price. Price is forced to a right alignment to create a structured layout on the page.
36 • Typography II Journal
C H E Z PA N I S S E Restaurant Menu Downstairs dinner menus for the week of December 31, 2017–January 6, 2018
Sunday, December 31
Réveillon Provençal $175
Champagne et olives frites Pissaladière et mesclun Bourride à la Lulu Agneau grillé aux truffes noires Soufflé glacé au citron Bonbons Panisse
Monday, January 1 and Tuesday, January 2 Wednesday, January 3 $100
Chez Panisse Restaurant & Café will be closed for the New Years Holiday.
Smoked Mendocino black cod, celery root, and Treviso salad with fried parsnips and crème fraîche Cannard Farm greens ravioli with wild mushrooms and Parmesan Spit-roasted Becker Lane Farm pork loin with juniper, sautéed Pink Lady apples, straw potato cake, and braised Belgian endive Crème caramel with Page mandarins and blood oranges
Thursday, January 4 $100
Bay scallops with blood orange, golden beet, fennel, and chervil salad Comté cheese pudding-soufflé with leeks and savoy spinach Grilled breast and confit leg of Sonoma County duck with warm chicories, roasted root vegetables, and sweet tooth mushrooms Tarte Tatin
Friday, January 5 $125
Warm vegetable and puntarelle salad with black truffle bagna cauda Manila clams and nettle risotto with crispy pancetta Paine Farm lamb roasted in the fireplace; with Béarnaise sauce, sautéed spinach and escarole, shoestring potatoes, and glazed carrots Page mandarin sherbet and candied blood orange ice cream meringata
Saturday, January 6 $125
Leeks vinaigrette with steelhead roe, chervil cream, and watercress Tagliatelle with Dungeness crab, Meyer lemon, and coriander Grilled Stemple Creek Ranch grass-fed beef loin with black truffle butter, wild mushrooms, chard gratin, and new onion fritters Bitersweet chocolate fondant with blood orange sherbet and blood orange caramel
First iteration of restaurant menu
37 • Projects / Menu re-design
First iteration of cafe menu
Café Menu C H E Z PA N I S S E
Dinner, Thursday, January 4, 2018
Menu du Jour ℅ $32 Garden lettuces Pappardelle verdi with wild mushroom ragù alla chiantigiana Candied orange, cardamom, and pistachio ice cream bombe and pain d’amande
Hors D’oeuvres Butter lettuce, orange, and fennel salad with citrus vinaigrette
$13
Sheep’s-milk ricotta with grilled bread, cardoons, and black truffle oil
$16
Marinated beet and cauliflower romanesco salad with mustard dressing
$12
Baked Andante Dairy goat cheese with garden lettuces
$14
Garden lettuces
$10
Pizzetta with tomato sauce, anchovy, capers, and hot pepper
$21
French lentil soup with sorrel, lemon, and crème fraîche
$10
Entrée Pappardelle verdi with wild mushroom ragù alla chiantigiana
$23
Fish and Dungeness crab cakes with chicories salad, Meyer lemon, potatoes, and aïoli
$34
Grilled chicken paillard with fried onions, carrots, lime, and curry butter
$27
Wood oven-roasted duck breast with butternut squash gratin, rocket, and sage
$31
Roasted pork loin with rosemary and fennel seed; with polenta, scarlet turnips, and salsa di oliva
$30
Pizza with wild nettles and ricotta
$22
Side orders: A plate of olives or Spanish anchovies
$5 each
Dessert A bowl of Churchill Orchards Kishu tangerines and Flying Disc Ranch dates
$10
Niloufer’s cardamom cake with poached pear, pomegranate caramel and crème Chantilly
$12
Apple and candied Meyer lemon galette with huckleberry ice cream
$12
Mocha custard with crème Chantilly and walnut cookies
$12
Tangerine sherbet meringata with passionfruit coulis and Page mandarin
$12
38 • Typography II Journal
SECOND ITERATION Restaurant menu: Created a variation of the existing restaurant menu I designed by applying a left alignment to all the information. The result was a two column format, with dates clearly reading first and respective information following. Cafe menu: Taking feedback from the last critique, I underestimated the formality of the restaurant, so simplified the menu to use a single typeface. I experimented with one layout using a center alignment and another using a left alignment. Additionally, prices have been positioned differently to their respective menu item.
39 • Projects / Menu re-design
C H E Z PA N I S S E Restaurant Menu Downstairs dinner menus for the week of December 31, 2017–January 6, 2018
Sunday, December 31 Réveillon Provençal $175
Champagne et olives frites Pissaladière et mesclun Bourride à la Lulu Agneau grillé aux truffes noires Soufflé glacé au citron Bonbons Panisse
Monday, January 1 and Tuesday, January 2 Wednesday, January 3 $100
Chez Panisse Restaurant & Café will be closed for the New Years Holiday.
Smoked Mendocino black cod, celery root, and Treviso salad with fried parsnips and crème fraîche Cannard Farm greens ravioli with wild mushrooms and Parmesan Spit-roasted Becker Lane Farm pork loin with juniper, sautéed Pink Lady apples, straw potato cake, and braised Belgian endive Crème caramel with Page mandarins and blood oranges
Thursday, January 4 $100
Bay scallops with blood orange, golden beet, fennel, and chervil salad Comté cheese pudding-soufflé with leeks and savoy spinach Grilled breast and confit leg of Sonoma County duck with warm chicories, roasted root vegetables, and sweet tooth mushrooms Tarte Tatin
Friday, January 5 $125
Warm vegetable and puntarelle salad with black truffle bagna cauda Manila clams and nettle risotto with crispy pancetta Paine Farm lamb roasted in the fireplace; with Béarnaise sauce, sautéed spinach and escarole, shoestring potatoes, and glazed carrots Page mandarin sherbet and candied blood orange ice cream meringata
Saturday, January 6 $125
Leeks vinaigrette with steelhead roe, chervil cream, and watercress Tagliatelle with Dungeness crab, Meyer lemon, and coriander Grilled Stemple Creek Ranch grass-fed beef loin with black truffle butter, wild mushrooms, chard gratin, and new onion fritters Bitersweet chocolate fondant with blood orange sherbet and blood orange caramel
Second iteration of restaurant menu, version 1.
40 • Typography II Journal
Second iteration of restaurant menu, version 2.
C H E Z PA N I S S E Restaurant Menu Downstairs dinner menus for the week of December 31, 2017–January 6, 2018
Sunday, December 31 | 175 Réveillon Provençal Champagne et olives frites Pissaladière et mesclun
Monday, January 1 and Tuesday, January 2 Chez Panisse Restaurant & Café will be closed for the New Years Holiday.
Bourride à la Lulu Agneau grillé aux truffes noires Soufflé glacé au citron Bonbons Panisse
Wednesday, January 3 | 100
Thursday, January 4 | 100
Smoked Mendocino black cod, celery root, and Treviso salad with fried parsnips and crème fraîche
Bay scallops with blood orange, golden beet, fennel, and chervil salad
Cannard Farm greens ravioli with wild mushrooms and Parmesan Spit-roasted Becker Lane Farm pork loin with juniper, sautéed Pink Lady apples, straw potato cake, and braised Belgian endive
Comté cheese pudding-soufflé with leeks and savoy spinach Grilled breast and confit leg of Sonoma County duck with warm chicories, roasted root vegetables, and sweet tooth mushrooms Tarte Tatin
Crème caramel with Page mandarins and blood oranges
Friday, January 5 | 125
Saturday, January 6 | 125
Warm vegetable and puntarelle salad with black truffle bagna cauda
Leeks vinaigrette with steelhead roe, chervil cream, and watercress
Manila clams and nettle risotto with crispy pancetta
Tagliatelle with Dungeness crab, Meyer lemon, and coriander
Paine Farm lamb roasted in the fireplace; with Béarnaise sauce, sautéed spinach and escarole, shoestring potatoes, and glazed carrots
Grilled Stemple Creek Ranch grass-fed beef loin with black truffle butter, wild mushrooms, chard gratin, and new onion fritters
Page mandarin sherbet and candied blood orange ice cream meringata
Bitersweet chocolate fondant with blood orange sherbet and blood orange caramel
41 • Projects / Menu re-design
C H E Z PA N I S S E Café Menu Dinner, Thursday, January 4, 2018
Menu du Jour | 32 Garden lettuces Pappardelle verdi with wild mushroom ragù alla chiantigiana Candied orange, cardamom, and pistachio ice cream bombe and pain d’amande
Hors D’oeuvres Butter lettuce, orange, and fennel salad with citrus vinaigrette | 13 Sheep’s-milk ricotta with grilled bread, cardoons, and black truffle oil | 16 Marinated beet and cauliflower romanesco salad with mustard dressing | 12 Baked Andante Dairy goat cheese with garden lettuces | 14 Garden lettuces | 10 Pizzetta with tomato sauce, anchovy, capers, and hot pepper | 21 French lentil soup with sorrel, lemon, and crème fraîche | 10
Entrée Pappardelle verdi with wild mushroom ragù alla chiantigiana | 23 Fish and Dungeness crab cakes with chicories salad, Meyer lemon, potatoes, and aïoli | 34 Grilled chicken paillard with fried onions, carrots, lime, and curry butter | 27 Wood oven-roasted duck breast with butternut squash gratin, rocket, and sage | 31 Roasted pork loin with rosemary and fennel seed; with polenta, scarlet turnips, and salsa di oliva | 30 Pizza with wild nettles and ricotta | 22
Side orders: A plate of olives or Spanish anchovies | 5 each Dessert A bowl of Churchill Orchards Kishu tangerines and Flying Disc Ranch dates | 10 Niloufer’s cardamom cake with poached pear, pomegranate caramel and crème Chantilly | 12 Apple and candied Meyer lemon galette with huckleberry ice cream | 12 Mocha custard with crème Chantilly and walnut cookies | 12 Tangerine sherbet meringata with passionfruit coulis and Page mandarin | 12
Second iteration of cafe menu, version 1.
42 • Typography II Journal
C H E Z PA N I S S E
Café Menu Dinner, Thursday, January 4, 2018
32 Menu du Jour Garden lettuces Pappardelle verdi with wild mushroom ragù alla chiantigiana Candied orange, cardamom, and pistachio ice cream bombe and pain d’amande
Hors D’oeuvres 13
Butter lettuce, orange, and fennel salad with citrus vinaigrette
16
Sheep’s-milk ricotta with grilled bread, cardoons, and black truffle oil
12
Marinated beet and cauliflower romanesco salad with mustard dressing
14
Baked Andante Dairy goat cheese with garden lettuces
10
Garden lettuces
21
Pizzetta with tomato sauce, anchovy, capers, and hot pepper
10
French lentil soup with sorrel, lemon, and crème fraîche
Entrée 23
Pappardelle verdi with wild mushroom ragù alla chiantigiana
34
Fish and Dungeness crab cakes with chicories salad, Meyer lemon, potatoes, and aïoli
27
Grilled chicken paillard with fried onions, carrots, lime, and curry butter
31
Wood oven-roasted duck breast with butternut squash gratin, rocket, and sage
30
Roasted pork loin with rosemary and fennel seed; with polenta, scarlet turnips, and salsa di oliva
22
Pizza with wild nettles and ricotta
5 each Side orders: A plate of olives or Spanish anchovies Dessert 10
A bowl of Churchill Orchards Kishu tangerines and Flying Disc Ranch dates
12
Niloufer’s cardamom cake with poached pear, pomegranate caramel and crème Chantilly
12
Apple and candied Meyer lemon galette with huckleberry ice cream
12
Mocha custard with crème Chantilly and walnut cookies
12 Tangerine sherbet meringata with passionfruit coulis and Page mandarin
Second iteration of cafe menu, version 2.
43 • Projects / Menu re-design
FINAL Restaurant menu: Sided with the original design since my variant encountered some awkward white space issues. Changed the header to a left and right alignment to make consistent with the other menu header. Cafe menu: Sided with the left alignment layout. It was easier to between menu items and their respective price. Adjusted side orders to be its own section and italicized the date in the header to make it distinct from the rest of the text on the page.
CONCLUSION This project was a great opportunity to challenge students to create a clear and logical flow of information when designing a page. I used paragraph rules, different fonts (such as all caps, italics, and small caps), indents, and custom spacing to establish a hierarchy of information.
44 • Typography II Journal
C H E Z PA N I S S E
Café Menu Dinner, Thursday, January 4, 2018
32 Menu du Jour Garden lettuces Pappardelle verdi with wild mushroom ragù alla chiantigiana Candied orange, cardamom, and pistachio ice cream bombe and pain d’amande
Hors D’oeuvres 13
Butter lettuce, orange, and fennel salad with citrus vinaigrette
16
Sheep’s-milk ricotta with grilled bread, cardoons, and black truffle oil
12
Marinated beet and cauliflower romanesco salad with mustard dressing
14
Baked Andante Dairy goat cheese with garden lettuces
10
Garden lettuces
21
Pizzetta with tomato sauce, anchovy, capers, and hot pepper
10
French lentil soup with sorrel, lemon, and crème fraîche
Entrée 23
Pappardelle verdi with wild mushroom ragù alla chiantigiana
34
Fish and Dungeness crab cakes with chicories salad, Meyer lemon, potatoes, and aïoli
27
Grilled chicken paillard with fried onions, carrots, lime, and curry butter
31
Wood oven-roasted duck breast with butternut squash gratin, rocket, and sage
30
Roasted pork loin with rosemary and fennel seed; with polenta, scarlet turnips, and salsa di oliva
22
Pizza with wild nettles and ricotta
5
Side orders A plate of olives Spanish anchovies
Dessert 10
A bowl of Churchill Orchards Kishu tangerines and Flying Disc Ranch dates
12
Niloufer’s cardamom cake with poached pear, pomegranate caramel and crème Chantilly
12
Apple and candied Meyer lemon galette with huckleberry ice cream
12
Mocha custard with crème Chantilly and walnut cookies
12
Tangerine sherbet meringata with passionfruit coulis and Page mandarin
Final version of cafe menu.
45 • Projects / Menu re-design
C H E Z PA N I S S E
Restaurant Menu Downstairs dinner menus for the week of December 31, 2017–January 6, 2018
Sunday, December 31
Champagne et olives frites
Réveillon Provençal
Pissaladière et mesclun
$175
Bourride à la Lulu Agneau grillé aux truffes noires Soufflé glacé au citron Bonbons Panisse
Monday, January 1 and Tuesday, January 2
Chez Panisse Restaurant & Café will be closed for the New Years Holiday.
Wednesday, January 3
Smoked Mendocino black cod, celery root, and Treviso salad with fried parsnips and crème fraîche
$100
Cannard Farm greens ravioli with wild mushrooms and Parmesan Spit-roasted Becker Lane Farm pork loin with juniper, sautéed Pink Lady apples, straw potato cake, and braised Belgian endive Crème caramel with Page mandarins and blood oranges
Thursday, January 4 $100
Bay scallops with blood orange, golden beet, fennel, and chervil salad Comté cheese pudding-soufflé with leeks and savoy spinach Grilled breast and confit leg of Sonoma County duck with warm chicories, roasted root vegetables, and sweet tooth mushrooms Tarte Tatin
Friday, January 5
Warm vegetable and puntarelle salad with black truffle bagna cauda
$125
Manila clams and nettle risotto with crispy pancetta Paine Farm lamb roasted in the fireplace; with Béarnaise sauce, sautéed spinach and escarole, shoestring potatoes, and glazed carrots Page mandarin sherbet and candied blood orange ice cream meringata
Saturday, January 6
Leeks vinaigrette with steelhead roe, chervil cream, and watercress
$125
Tagliatelle with Dungeness crab, Meyer lemon, and coriander Grilled Stemple Creek Ranch grass-fed beef loin with black truffle butter, wild mushrooms, chard gratin, and new onion fritters Bitersweet chocolate fondant with blood orange sherbet and blood orange caramel
Final version of restaurant menu.
46 • Typography II Journal
Project 2: Resume Redrafting our resume was a timely opportunity for us to update its content along with gaining additional practice with our typography skills. FIRST ITERATION Attempted three different layouts. (a) shows a single column, while (b) and (c) show a two column. Given the amount of information packed on a resume, I made sure to use paragraph rules and different text styles to clearly separate sections and pieces of information. I experimented applying weights to different pieces of information such as the employer versus the position and organizing respective information in different alignments as seen in (b).
47 • Projects / Resume
Ryan Hutson
650.703.8321 rhutson12@gmail.com behance.net/ryanhutson
EDUCATION
California Polytechnic State University San Luis Obispo, California B.F.A. Art and Design, Graphic Design concentration
Expected Spring 2018
EXPERIENCE
Technical Association of the Graphic Arts (TAGA) Design Coordinator/Designer
9/2016 – Present
Mustang Media Group Graphic Designer
5/2017– Present
KCPR San Luis Obispo 91.3 FM Graphic Designer, Disc Jockey
9/2015 – Present
Lead and worked alongside a team to design and develop packaging for a technical journal.
Conceptualize and design ad campaigns for print and web platforms.
Designed and illustrated station promotional materials including posters, web banners, and editorial graphics. Sheryl Sandberg & Dave Goldberg Family Foundation Design Intern
6/2017– 9/2017
Target Corporation Sales Floor Team Member
7/2015 – 9/2015
Created branded materials ranging from slide decks, logos, workshop guides, and illustration. Developed solutions for the Option B photo project.
Satisfied guest’s needs while pushing out merchandise. Cross trained and worked in other areas as needed. HONORS AND AWARDS
The Helmut Kipphan Cup recipient, TAGA Annual Technical Conference 2017 Grand Prize Award Collaborated with a team of designers to format, design, and produce a technical journal. President’s Honors List Maintained Dean’s List throughout academic year.
9/2015 – 6/2017
DESIGN AND TECHNICAL SKILLS
Creating vector illustrations using a variety of tools with Adobe Illustrator
Photo retouching, color correction, and painting using a drawing tablet in Adobe Photoshop Editorial layouts and digital publishing with Adobe InDesign
Working knowledge of modeling, rigging, texturing, and lighting with Autodesk Maya Understanding of HTML and CSS
Basic animation and video editing with Adobe After Effects and Adobe Premiere Pro Digital Photography
First iteration of layout a.
48 • Typography II Journal
First iteration of layout b.
Ryan Hutson
650.703.8321 rhutson12@gmail.com behance.net/ryanhutson
EDUCATION
California Polytechnic State University San Luis Obispo, California
B.F.A. Art and Design, Graphic Design concentration EXPECTED SPRING 2018
EXPERIENCE
Technical Association of the Graphic Arts (TAGA)
SEPTEMBER 2016–PRESENT
Lead and worked alongside a team to design and develop packaging for a technical journal.
Design Coordinator/Designer Mustang Media Group MAY 2017–PRESENT
Graphic Designer
KCPR San Luis Obispo 91.3 FM SEPTEMBER 2015–PRESENT
Graphic Designer, Disc Jockey Sheryl Sandberg & Dave Goldberg Family Foundation JUNE 2017–SEPTEMBER 2017
Design Intern
Target Corporation
JULY 2015–SEPTEMBER 2015
Sales Floor Team Member
Conceptualize and design ad campaigns for print and web platforms. Designed and illustrated station promotional materials including posters, web banners, and editorial graphics. Created branded materials ranging from slide decks, logos, workshop guides, and illustration. Developed solutions for the Option B photo project. Satisfied guest’s needs while pushing out merchandise. Cross trained and worked in other areas as needed.
HONORS AND AWARDS
The Helmut Kipphan Cup recipient,
TAGA ANNUAL TECHNICAL CONFERENCE 2017
Grand Prize Award
Collaborated with a team of designers to format, design, and produce a technical journal.
President’s Honors List
Maintained Dean’s List throughout academic year.
DESIGN SKILLS
TECHNICAL SKILLS
Branding and Identity design Typography and Editiorial design Packaging design User Experience and Interaction design
Vector artwork in Illustrator Color correction, painting, and touch ups in Photoshop Editorial layouts and digital publishing in InDesign Animation and video editing with After Effects Understanding of HTML, CSS, and InVision Digital Photography
SEPTEMBER 2015–JUNE 2017
49 • Projects / Resume
Ryan Hutson
First iteration of layout c. 650.703.8321 rhutson12@gmail.com behance.net/ryanhutson
EXPERIENCE
EDUCATION
Technical Association of the Graphic Arts (TAGA) Design Coordinator/Designer Lead and worked alongside a team to design and develop packaging for a technical journal.
California Polytechnic State University San Luis Obispo, California B.F.A. Art and Design Graphic Design concentration
SEPTEMBER 2016–PRESENT
Mustang Media Group Graphic Designer Conceptualize and design ad campaigns for print and web platforms. MAY 2017–PRESENT
KCPR San Luis Obispo 91.3 FM Graphic Designer Designed and illustrated station promotional materials including posters, web banners, and editorial graphics.
EXPECTED SPRING 2018
TECHNICAL SKILLS
Vector artwork in Illustrator Color correction, painting, and touch ups in Photoshop Editorial layouts and digital publishing in InDesign Animation and video editing with After Effects Understanding of HTML, CSS, and InVision Digital Photography
SEPTEMBER 2015–PRESENT
Sheryl Sandberg & Dave Goldberg Family Foundation Design Intern Created branded materials ranging from slide decks, logos, workshop guides, and illustration. Developed solutions for the Option B photo project. JUNE 2017–SEPTEMBER 2017
Target Corporation Sales Floor Team Member Satisfied guest’s needs while pushing out merchandise. Cross trained and worked in other areas as needed. JULY 2015–SEPTEMBER 2015
DESIGN SKILLS
Branding and Identity design Typography and Editiorial design Packaging design User Experience and Interaction design HONORS AND AWARDS
The Helmut Kipphan Cup recipient Grand Prize Award Collaborated with a team of designers to format, design, and produce a technical journal. TAGA ANNUAL TECHNICAL CONFERENCE 2017
President’s Honors List Maintained Dean’s List throughout academic year. SEPTEMBER 2015–JUNE 2017
50 • Typography II Journal
FINAL (a) was not my favorite layout mainly due to the amount of work it takes for the eye to connect information across the page. It also felt like a more chaotic layout with small elements aligned to the right contrasted against a wild rag from the left alignment of other information. (b) had a bit more potential, since it was an easy read from left to right. However when reaching the bottom, the pattern changes by introducing another category in the same alignment of detailed information. (c) was the best option out of the three layouts because the reader could easily read down one column to the next with all related information grouped together. I refined some of the type styles since the initial draft had too many unnecessary styles being used.
51 • Projects / Resume
Ryan Hutson
650.703.8321 rhutson12@gmail.com behance.net/ryanhutson
EXPERIENCE
EDUCATION
Technical Association of the Graphic Arts (TAGA) Design Coordinator/Designer Lead and worked alongside a team to design and develop packaging for a technical journal.
California Polytechnic State University San Luis Obispo, California B.F.A. Art and Design Graphic Design concentration
SEPTEMBER 2016–PRESENT
Mustang Media Group Graphic Designer Conceptualize and design ad campaigns for print and web platforms. MAY 2017–PRESENT
KCPR San Luis Obispo 91.3 FM Graphic Designer Designed and illustrated station promotional materials including posters, web banners, and editorial graphics.
EXPECTED SPRING 2018
TECHNICAL SKILLS
Vector artwork in Illustrator Color correction, painting, and touch ups in Photoshop Editorial layouts and digital publishing in InDesign Animation and video editing with After Effects Understanding of HTML, CSS, and InVision Operation of DSLR camera and post production editing
SEPTEMBER 2015–PRESENT
DESIGN SKILLS
Sheryl Sandberg & Dave Goldberg Family Foundation Design Intern Created branded materials ranging from slide decks, logos, workshop guides, and illustration. Developed solutions for the Option B photo project.
Branding and Identity Design Typography and Editiorial Design Packaging Design User Experience and Interaction Design
JUNE 2017–SEPTEMBER 2017
Target Corporation Sales Floor Team Member Satisfied guest’s needs while pushing out merchandise. Cross trained and worked in other areas as needed. JULY 2015–SEPTEMBER 2015
HONORS AND AWARDS
The Helmut Kipphan Cup recipient Grand Prize Award Collaborated with a team of designers to format, design, and produce a technical journal. TAGA ANNUAL TECHNICAL CONFERENCE 2017
President’s Honors List Maintained Dean’s List throughout academic year. SEPTEMBER 2015–JUNE 2017
Final version of layout c.
52 • Typography II Journal
Project 3: The Elements of Style Booklet The Elements of Style is a reference book about grammar for students and writers. The text contains examples that demonstrate principles of the English language that are most commonly violated. Originally written in 1918, the book is naturally quirky and archaic. Students are challenged to typeset the text in a contemporary style that places content in focus for the reader, as opposed to distracting them. FIRST ITERATION Delivered concepts for the book cover, title page, introductory and three following spreads. My idea for the cover was to balance a degree of abstraction with it being obvious this cover belonged to the second book in the series. I thought two rectangles could capture this idea and could be expanded to the rest of the series’ covers. Thinking about the rest of the book, I started with body text, and asked myself what typeface to choose. The contents of the book seemed more formal and academic, a serif seemed like a good choice, also taking into account there would be a lot of body text. I didn’t think there was a need for a second typeface to distinguish headers since I could establish that hierarchy through styles and spacing before and after. I also used bolded weights, italics, and indentations throughout body text to distinguish examples and commentary from the regular text.
53 • Projects / The Elements of Style booklet
TH E E L E ME N T S OF S T Y LE section ii Elementary Principles of Composition
First concept for cover of The Elements of Style booklet
A novel might be discussed under the heads: 54 • Typography II Journal A. Setting.
B. Plot. C. Characters.
Detail of text examples, showing hierarchy.
periods; the rise, fall, and modification of political D. Purpose. in a word, all the conditions of national constitutions; well-being became the subject of their works.
An historical eventexpanded. might be discussed under the heads: The definition 4 They sought write a history of peoples than A. What ledrather up totothe event. a history of kings.
B. Account of the event. The definition explained by contrast. C. What the event led up to.
5 They looked especially in history for the chain of causes and effects.
In treating either of these last two subjects, the writer The definition supplemented: another element in the would probably find it necessary to subdivide one or new conception of history. more of the topics here given. As a rule, single sentences 6 They undertook to study in the as past the physiology should not be written or printed paragraphs. An of nations, and hoped by applying the experimental exception may be made of sentences of transition, method on a large scale to deduce some lessons of topics are treated briefly. indicating the relation between the parts of an exposition real value about the conditions on which the welfare or Frequent exceptions also necessary In argument. dialogue, speech, even if onlyare a single word, is a in of societyeach mainly depend. textbooks, guidebooks, and other works inbegins whichwith many paragraph by itself; that is, a new —Lecky, The Political Value ofparagraph History. eachConclusion: change of speaker. The application of this rule,new when an important consequence of the dialogue and narrative are combined, is best learned from conception of history. examples in well-printed works of fiction. Elementary Principles of Composition In narration and description the paragraph sometimes begins with a concise, comprehensive statement serving to hold together the details that follow.
nine
The breeze served us admirably.
As a rule, begin each paragraph with a topic sentence, The campaign opened with a series of reverses. end it in conformity with the beginning. The next ten or twelve pages were filled with a curious set of entries. Again, the object is to aid the reader. The practice here recommended enables him to discover the purpose of But this device, if too often used, would become a each paragraph as he begins to read it, and to retain mannerism. More commonly the opening sentence simply this purpose in mind as he ends it. For this reason, the indicates by its subject with what the paragraph is to be most generally useful kind of paragraph, particularly in principally concerned. exposition and argument, is that in which At length I thought I might return towards the (a) the topic sentence comes at or near the beginning; (b) the succeeding sentences explain or establish or develop the statement made in the topic Principles of Composition sentence;Elementary and (c) the final sentence either emphasizes the thought of the topic sentence or states some important consequence.
13
Detail of text examples, distinguishing commentary with italics.
9
Detail of the start of a new section, first iteration.
s i s s t
A a s m b d i d I p
55 • Projects / The Elements of Style booklet
employed. SECOND ITERATION 3 Formerly, science was taught by the textbook I separated out method; more information the title pagelaboratory and refined some now it ison taught by the typos, widows, and orphans. Also added a glyph to in the running method. footer and completed the rest of my section. Used checkmarks and Xs to distinguish between correct and incorrect in certain examples The left-hand version gives the impression that the writer as opposed to using a table or side-by-side comparison. Changed the is undecided or timid; he seems unable or afraid to header of each section to the corresponding numeral instead of spelt out choose one form of expression and hold to it. The rightnumber.
hand version shows that the writer has at least made his choice and abided by it. By this principle, an article or a preposition applying
to all the members of a series must either be used only before the first term or else be repeated before each term. °
The French, the Italians, Spanish, and Portuguese
3
The French, the Italians, the Spanish, and the Portuguese
°
In spring, summer, or in winter
3
In spring, summer, or winter (In spring, in summer, or in winter)
Correlative expressions (both, and; not, but; not only, but also; either, or; first, second, third; and the like) should be followed by the same grammatical construction, that is, virtually, by the same part of speech. Put statements in positive form. (Such combinations as “both Henry and I,” “not silk, but a cheap substitute,” are obviously within the rule.) Many violations of this assertions. rule (as theAvoid first three arise from Make definite tame, below) colorless, hesitating, non-committal language. Use the word _not_ as a means of denial or in antithesis, never a means faulty arrangement; others (as theaslast) from of theevasion. use of unlike constructions. ° He was not very often on time.
11
° 3It was both a came long ceremony and very tedious. He usually late. 3
28
The ceremony was both long and tedious. ° He did not think that studying Latin was much use. Section 3 HeIIthought the study of Latin useless.
°
The Taming of the Shrew is rather weak in spots. Shakespeare does not portray Katharine as a very
Detail of text examples, distinguishing between correct and incorrect usage.
Detail of the start of a new section, second iteration.
56 • Typography II Journal
THIRD ITERATION Began collaboration with two other teammates to complete the rest of the series. In order to unify the books we created a style guide based off the accumulated strengths we saw in each others designs. After testing out the style guide, we found that each teammate was found confused when encountering a circumstance unique to their section of the book. We discussed these situations and thought it’d best if we eliminated the bold weight examples, since they were indented already. I also changed my commentary to a bold italic to distinguish it from the preceding information. FINAL The system of abstract shapes did not work out across the series so we decided to use a flood coat of color unique to each book in the series, featuring its respective section number placed in the corner to unify the books. CONCLUSION This project was great practice for improving typography and forces the designer to think about how special sets of information should be delivered to the reader. It was also a great exercise to collaborate with two other designers, by learning to unify a visual language with a style guide and reaching the best solution together. Above all, I was glad to learn the proper way to print a booklet.
develop it by showing its implications and consequences. In a long paragraph, he may carry out several of 57 • Projects / The Elements of Style booklet these processes. 1. Now, to be properly enjoyed, a walking tour should be gone upon alone. Topic sentence.
Updated detail of commentary.
2. If you go in a company, or even in pairs, it is no longer a walking tour in anything but name; it is something else and more in the nature of a picnic. The meaning made clearer by denial of the contrary.
3. A walking tour should be gone upon alone, because freedom is of the essence; because you should be able to stop and go on, and follow this way or that, as the freak takes you; and because you must have your own pace, and neither trot alongside a champion walker, nor mince in time with a girl. The topic sentence repeated, in abridged form, and supported by three reasons; the meaning of the third (“you must have your own pace”) made clearer by denying the contrary.
4. And you must be open to all impressions and let your thoughts take colour from what you see. A fourth reason, stated in two forms.
10
The Elements of Style
Three final covers.
58 • Typography II Journal
Project 4: Collaborative Type Book Each student was assigned a typeface to research it’s history, designer, and visual characteristics. I was assigned to research Eurostile and also design a set of spreads to contain my research to be contributed into an overall type book full of other designers’ typeface research. Each student designs their own type book with a cover, table of contents, introductory essay, divider pages, bibliography, contributors page, and back cover. INITIAL PHASE Started with gathering research on the history of the typeface, a biography of the designer, a visual analysis of the letterforms, and an image gallery of the typeface in use. Proceeded to make preliminary sketches of different ways all of the gathered information could be organized in layouts to create a dynamic, interesting way to deliver the content. FIRST ITERATION I wanted to emulate the feel of graphic design popular during the 1960s and 70s, during Eurostile’s peak of popularity. I chose to use Franklin Gothic as the typeface throughout my body text and headers since it seemed akin to the typography popular during the time. I experimented with a twelve column grid, and found separating text into two columns was optimal for the line length. At this point, I was unsure of what direction I wanted to go in, emphasizing Eurostile’s relationship with architecture, science fiction, or the decade. I also began to think what it would be like to experiment with text at different angles and using photoshop to break images out of a rigid grid structure.
59 • Projects / Type Book
Detail of first concept cover.
Style with an ‘i’ A review of Eurostile Introductory spread.
An introduction to
Eurostile
According to the Eurostile on Linotype’s website, Eurostile is a geometric sans-serif typeface originally designed by Aldo Novarese of the Nebiolo foundry in 1962. Under the typeface story of Eurostile on the Fonts website, it’s purpose was to succeed the similar Microgramma, a caps-only typeface designed by Alessandro Butti originally intended for display sizes. The Eurostile family reflects the spirit of the 1950s and 1960s with its square proportions and linear nature, appealing to architecture, television, and science fiction popular during the time (Linotype). With the resolved design, Eurostile added lowercase letters with a family of eleven weights from roman to bold and condensed to extended (Linotype). This versatility has given the typeface the capability to work well in headlines, short bodies of text and poster work (Linotype). Eurostile is mostly seen and associated with a dynamic, technological feel.
stile Image 1: 1960s perpetual calendar (1965).
4 Type Book
tile ile ost Euros
ray o t s i H Mircogramm Eur
Next
Aldo’s story displaying information (Fonts.com). Eurostile has also been widely used on technology, automobiles, and music packaging.
Eurostile’s evolution Microgramma and Eurostile were both released originally for handset metal type (Fonts.com). Microgramma was originally intended strictly for display sizes. It was a real “Titling Design,” meaning its capital letters go all the way to the edge of the top of a lead sort (Linotype). Microgramma remained popular for nearly a decade until Aldo Novarese began to create the missing lowercase letters, which led to the release of Eurostile in 1962 under the Nebiolo type foundry (Linotype). “To the original five cuts (regular, bold, condensed, extended, and bold extended), he added bold condensed and compact variants, and thus Eurostile became part of the design landscape in the 1960s (Shaw 98). As Eurostile gained traction, it was later interpreted as a font for phototypesetting, dry transfer letterings and finally as digital fonts (Fonts.com). During the 1980s, Linotype worked with Adobe to usher Eurostile into the era of PostScript fonts (Linotype). Microsoft included Eurostile in its Microsoft Office software products. The typeface has also a large presence in several video games, films (especially those in science fiction), and sports channels for
10 Type Book
While Eurostile remained the first choice among graphic designers for use in headlines, it slowly faded into relative insignificance. Univers, Helvetica, and Avant Garde Gothic picked up where Eurostile left off (Linotype). However, in the past decade, foundries such as Linotype, Monotype, and ITC have taken on forgotten typefaces to create a fresh and improved version of the family. Linotype’s Type Director, Akira Kobayashi, studied the Eurostile fonts and noticed several flaws and inconsistencies imposed by metal typefounding (Linotype). Kobayashi created Eurostile Next to resolve these issues, creating drawings more fluid and true to the original 1960s spirit (Linotype). Eurostile Next also contains a rethinking of Eurostile’s accents and special characters, capable of reaching a broader audience across the globe.
“
Many of his typefaces, draw inspiration from the time, surrounding, and trends in art and technology...
”
Aldo Novarese was born in 1920 in Pontestura, a small town of the Piedmont region of Northern Italy (Kupferschmid). By eleven years of age, he attended the vocational school for printing, Scuola Artieri Stampatori, learning about graphic and printing techniques (Kupferschmid). From 1933 to 1936, Novarese continued his education at the Scuola Tipografica Giuseppe Vigliardi-Paravia, under Alessandro Butti focusing on typography and type design. This led him to join the Nebiolo foundry in 1936 as an apprentice draftsman (Kupferschmid). Novarese and Butti worked closely together to create typefaces such as Landi, Normandia, Fluidum, and Microgramma. However, Novarese’s career came to ahalt in 1939, when he was imprisoned for participating in protests against the Second World War (Kupferschmid). He also protested against his call to military service and was spared being condemned to hard labor since he had won a gold medal in Ludi Juveniles, a celebration of Facist culture, sport, and art (Kupferschmid). Novarese later joined the partisan resistance when Italy was divided between the German occupation and the American-led liberation (Kupferschmid). Novarese had returned to Nebiolo for work after the war. While the company was not in great shape in the post-WWII era, the Nebiolo fonts began gaining popularity and demand outside of Italy (Kupferschmid). By 1952, Novarese had succeeded Butti as Nebiolo’s art director, holding the position for the next twenty-three years, responsible for creating typefaces such as Cigno, Ritmo, Garaldus, and Egizio. (Kupferschmid). As Novarese gained success, he began to teach type design and interact
Eurostile 5
with other fellow European type designers. This led him to form a friendship with influential French typographer Maximillien Vox, who created the Vox system of classifying typefaces (Kupferschmid). According to Kupferschmid, in 1957, Novarese proposed his own typeface classification system, but had never reached the same influence as Vox’s. By the end of the 1950s, Nebiolo did not have a contemporary, versatile sans serif family in their catalog. Nebiolo created Eurostile as one of the answers to this demand (Kupferschmid). Despite the success of Eurostile, Novarese did not cease his experimentation with creating more sansserifs, especially with the possibilities of the new phototypesetting technology on the horizon (Kupferschmid). “Considering the huge investment required for the development of a new type family in the days of metal type, the typefaces had to meet the expectations of the market as well as the manufacturer” (Kupferschmid). As a result, there was an apparent downswing during the mid 1970s of Nebiolo’s casting business, with Novarese’s Stop (1971) being the last successful new typeface. Nebiolo closed its doors, ceasing all production of type in 1975 (Kupferschmid). Despite the closure, Novarese continued his career as a freelance typeface designer, drawing a huge variety of typefaces for twenty more years (Kupferschmid). According to Kupferschmid, many of Novarese’s typefaces are available digitally, but most of his phototype fonts were never digitized and sank into obscurity when the commissioning companies closed. Many of his typefaces, “draw inspiration from the time, their surrounding, and trends in art and technology—so much so that some did not age well and became hard to use after a while without evoking a certain period or style” (Kupferschmid). Aldo Novarese died in September of 1995 in Turin. Eurostile 11
First concept of designer biography spread.
60 • Typography II Journal
SECOND ITERATION I narrowed down the visual language of my spread to relate more to the graphic design motifs happening in the 60s. I wanted to incorporate black and white photography, collages, and transparencies. As for the rest of the book, I experimented with ways I could keep a neutral layout, non-partial to any specific typeface or design period contained in the book.
Contents
Akzidenz Grotesk Caroline Craig Bickham Script Alexander Depue
17
Caslon (Adobe) Matthew Eike
28
Centaur Hailey Firstman
39
Clarendon WeeTeng Goh
50
Copperplate Cassidy Ha
61
Futura Ahmad Hamade
72
Eurostile Ryan Hutson
83
Helvetica Neue Shea Irwin
94
ITC American Typewriter Suzie Katz
Second iteration concept for the table of contents.
6
105
Typography, An Introduction
8 Type Book
Eurostile 9
What is typography? Why does it matter? How does it impact our lives? The Merriam-Webster definition of “typography” is: “the work of producing printed pages from written material” or “the style, arrangement, or appearance of printed letters on a page.” How those letters, words, and sentences are styled and arranged affects how they are perceived. Good typography clarifies content, establishes hierarchy, and presents information in a manner that makes it easier to read, and, therefore, to understand. Good typography is good communication: it can start a dialog or advance an idea or make a difference in the world. Typography is also intertwined with our daily lives—we encounter type in everything from the products we buy, the signage around us, the books we read, the news we consume, and the directions we follow. Typography can be beautiful, functional, persuasive, and
10 Type Book
inviting. It can also fail, especially when there is a disconnect between how the type looks and what the text says. This book is a celebration of typography and typeface design. It is also a creative collaboration among students in Art 338: Typography II at California Polytechnic State University, San Luis Obispo, during winter quarter 2018. Each student in the class researched a different typeface and contributed the pages in this book that describe and showcase their assigned typeface. The final design reflects the many talents of the students who brought this project to life. Charmaine Martinez Professor of Design at California Polytechnic State University and Type Enthusiast
Eurostile 11
Second iteration concept for the introductory note.
EE
61 • Projects / Type Book
Eurostile
EE and bold extended), he added bold condensed and compact variants, and thus Eurostile became part of the design landscape in the 1960s (Shaw 98). As Eurostile gained traction, it was later interpreted as a font for phototypesetting, dry transfer letterings and finally as digital fonts (Fonts.com). During the 1980s, Linotype worked with Adobe to usher Eurostile into the era of PostScript fonts (Linotype). Microsoft included Eurostile in its own Microsoft Office software products. The typeface has also a
E
E
E
E
Microgramma and Eurostile were both released originally for handset metal type (Fonts.com). Microgramma was originally intended strictly for display sizes. It was a real “Titling Design,” meaning its capital letters go all the way to the edge of the top of a lead sort (Linotype). Microgramma remained popular for nearly a decade until Aldo Novarese began to create the missing lowercase letters, which led to the release of Eurostile in 1962 under the Nebiolo type foundry (Linotype). “To the original five cuts (regular, bold, condensed, extended,
E
E
E
EE
Eurostile’s evolution
12 Type Book
E
According to the Eurostile on Linotype’s website, Eurostile is a geometric sans-serif typeface originally designed by Aldo Novarese of the Nebiolo foundry in 1962. Under the typeface story of Eurostile on the Fonts website, it’s purpose was to succeed the similar Microgramma, a caps-only typeface designed by Alessandro Butti originally intended for display sizes. The Eurostile family reflects the spirit of the 1950s and 1960s with its square proportions and linear nature, appealing to architecture, television, and science fiction popular during the time (Linotype). With the resolved design, Eurostile added lowercase letters with a family of eleven weights from roman to bold and condensed to extended (Linotype). This versatility has given the typeface the capability to work well in headlines, short bodies of text and poster work (Linotype). Eurostile is mostly seen and associated with a dynamic, technological feel.
E
E
E EE
E
Refined concept for introductory spread of Eurostile typeface.
large presence in several video games, films (especially those in science fiction), and sports channels for displaying information (Fonts.com). Eurostile has also been widely used on technology, product design, automobiles, and music packaging. While Eurostile remained the first choice among graphic designers for use in headlines, it slowly faded into relative insignificance. Univers, Helvetica, and Avant Garde Gothic picked up where Eurostile left off (Linotype). However, in the past decade, foundries such
Eurostile 13
as Linotype, Monotype, and ITC have taken on forgotten typefaces to create a fresh and improved version of the family. Linotype’s Type Director, Akira Kobayashi, studied the Eurostile fonts and noticed several flaws and inconsistencies imposed by metal typefounding (Linotype). Kobayashi created Eurostile Next to resolve these issues, creating drawings more fluid and true to the original 1960s spirit (Linotype). Eurostile Next also contains a rethinking of Eurostile’s accents and special characters, capable of reaching a broader audience across the globe.
Aldo Novarese: the creator of Eurostile Regular Oblique Medium Medium Oblique Bold Bold Oblique Heavy Heavy Italic Black Black Italic Cond Regular Cond Italic Cond Heavy Cond Heavy Italic Extd Regular Extd Regular Italic Extd Medium Black Black Italic
14 Type Book
Aldo Novarese was born in 1920 in Pontestura, a small town of the Piedmont region of Northern Italy (Kupferschmid). By eleven years of age, he attended the vocational school for printing, Scuola Artieri Stampatori, learning about graphic and printing techniques (Kupferschmid). From 1933 to 1936, Novarese continued his education at the Scuola Tipografica Giuseppe Vigliardi-Paravia, under Alessandro Butti focusing on typography and type design. This led him to join the Nebiolo foundry in 1936 as an apprentice draftsman (Kupferschmid).
Novarese and Butti worked closely together to create typefaces such as Landi, Normandia, Fluidum, and Microgramma. However, Novarese’s career came to ahalt in 1939, when he was imprisoned for participating in protests against the Second World War (Kupferschmid). He also protested against his call to military service and was spared being condemned to hard labor since he had won a gold medal in Ludi Juveniles, a celebration of Facist culture, sport, and art (Kupferschmid). Novarese later joined the partisan resistance when Italy was divided between the German occupation and the American-led liberation (Kupferschmid). Novarese had returned to Nebiolo for work after the war. While the company was not in great shape in the postWWII era, the Nebiolo fonts began gaining popularity outside of Italy (Kupferschmid). By 1952, Novarese had rose to become Nebiolo’s art director. He held the position for the next twenty-three years, creating typefaces such as Cigno, Ritmo, Garaldus, and Egizio. (Kupferschmid). As Novarese gained success, he began to teach type design and interact with other European type designers. This led him to form a friendship with influential French typographer Maximillien Vox, who created the Vox system of classifying typefaces
16 Type Book
Eurostile 15
(Kupferschmid). According to Kupferschmid, in 1957, Novarese proposed his own typeface classification system, but had never reached the same influence as Vox’s.
By the end of the 1950s, Nebiolo did not have a contemporary, versatile sans serif family in their catalog. Nebiolo created Eurostile as one of the answers to this demand (Kupferschmid). Despite the success of Eurostile, Novarese did not cease his experimentation with creating more sansserifs, especially with the possibilities of the new phototypesetting technology on the horizon (Kupferschmid).
“Considering the huge investment required for the development of a new type family in the days of metal type, the typefaces had to meet the expectations of the market as well as the manufacturer” (Kupferschmid). As a result, there was an apparent downswing during the mid 1970s of Nebiolo’s casting business, with Novarese’s Stop (1971) being the last successful new typeface. Nebiolo closed its doors, ceasing all production of type in 1975 (Kupferschmid). Despite the closure, Novarese continued his career as a freelance typeface designer, drawing a huge variety of typefaces for twenty more years (Kupferschmid). According to Kupferschmid, many of Novarese’s typefaces are available digitally, but most of his phototype fonts were never digitized and sank into obscurity when the commissioning companies closed. Many of his typefaces, “draw inspiration from the time, their surrounding, and trends in art and technology—so much so that some did not age well and became hard to use after a while without evoking a certain period or style” (Kupferschmid). Aldo Novarese died in September of 1995 in Turin.
Eurostile 17
Refined concept for typeface history spread.
Refined concept for typeface designer biography spread.
62 • Typography II Journal
TH TYPE PE BOOK THIRD ITERATION
I chose to incorporate the large type treatment coupled along with the collage of the letterforms from each respective typeface. I simplified the designer’s biography spread since the type was getting difficult to read with a ragged left edge.
Detail of potential cover for book.
TYPOGR APHY, AN N INTROD DUCTION What is typography? Why does it matter? How does it impact our lives?
The Type Book
The Merriam-Webster definition of “typography” is: “the work of producing printed pages from written material” or “the style, arrangement, or appearance of printed letters on a page.” How those letters, words, and sentences are styled and arranged affects how they are perceived. Good typography clarifies content, establishes hierarchy, and presents information in a manner that makes it easier to read, and, therefore, to understand. Good typography is good communication: it can start a dialog or advance an idea or make a difference in the world.
A book of ten typefaces and their context Volume 1
Typography is also intertwined with our daily lives—we encounter type in everything from the products we buy, the signage around us, the books we read, the news we consume, and the directions we follow. Typography can be beautiful, functional, persuasive, and inviting. It can also fail, especially when there is a disconnect between how the type looks and what the text says.
This book is a celebration of typography and typeface design. It is also a creative collaboration among students in Art 338: Typography II at California Polytechnic State University, San Luis Obispo, during winter quarter 2018. Each student in the class researched a different typeface and contributed the pages in this book that describe and showcase their assigned typeface. The final design reflects the many talents of the students who brought this project to life. Charmaine Martinez Professor of Design at California Polytechnic State University and Type Enthusiast
Third iteration of introductory note.
63 • Projects / Type Book
WORKS CITED
New visual language applied to works cited page.
Chahine, Nadine, Bryan Reimer, and Jonathan Dobres. “Branding and Legibility in Automotive Displays.” ATZelektronik worldwide 10.1, 2015, p. 32–36. Accessed 26 February 2018. Fonts.com. “Eurostile,” 2018. https://www.fonts.com/font/ linotype/eurostile/story. Accessed 26 February 2018. Kupferschmid, Indra. “Aldo: as Ferrari is to cars, Novarese is to type.” Type Network, 2016. djr.typenetwork.com/news/ article/aldo-novarese. Accessed 26 February 2018. Linotype. “Eurostile,” 2018. www.linotype.com/384/eurostilefamily.html. Accessed 26 February 2018. Linotype. “Eurostile Next,” 2018. www.linotype.com/5324/ eurostile-next.html. Accessed 26 February 2018. Novarese, Aldo. “Eurostile, A Synthetic Expression of Our Times.” Pagina, International Magazine of Graphic Design, no. 4, January 1964 , Società Italiana di Grafica, Milan. Editoriale Metro S.p.A., republished on Display 14 August 2012, www.thisisdisplay.org/features/eurostile_a_synthetic_ expression_of_our_times_aldo_novarese. Accessed 26 February 2018. Shaw, Paul. “HOT TYPE.” Print., vol. 62, no. 4, 2008, p. 98. Accessed 26 February 2018.
The life of Aldo Novarese Aldo Novarese was born in 1920 in Pontestura, a small town of the Piedmont region of Northern Italy (Kupferschmid). By eleven years of age, he attended the vocational school for printing, Scuola Artieri Stampatori, learning about graphic and printing techniques (Kupferschmid). From 1933 to 1936, Novarese continued his education at the Scuola Tipografica Giuseppe VigliardiParavia, under Alessandro Butti focusing on typography and type design. This led him to join the Nebiolo foundry in 1936 as an apprentice draftsman (Kupferschmid).
gold medal in Ludi Juveniles, a celebration of Facist culture, sport, and art (Kupferschmid). Novarese later joined the partisan resistance when Italy was divided between the German occupation and the American-led liberation (Kupferschmid).
Novarese had returned to Nebiolo for work after the war. While the company was not in great shape in the post-WWII era, the Nebiolo fonts began gaining popularity outside of Italy (Kupferschmid). By 1952, Novarese had rose to become Nebiolo’s art director. He held the position for the next twenty-three years, creating typefaces such as Cigno, Ritmo, Garaldus, and Egizio. (Kupferschmid). As Novarese gained success, he began to teach type design and interact with other European type designers. This led him to form a friendship with influential French typographer Maximillien Vox, who created the Vox system of classifying typefaces (Kupferschmid). According to Kupferschmid, in 1957, Novarese
proposed his own typeface classification system, but never reached the same influence as Vox’s.
By the end of the 1950s, Nebiolo did not have a contemporary, versatile sans serif family in their catalog. Nebiolo created Eurostile as one of the answers to this demand (Kupferschmid). Despite the success of Eurostile, Novarese did not cease his experimentation with creating more sansserifs, especially with the possibilities of the new phototypesetting technology on the horizon (Kupferschmid).
business, with Novarese’s Stop (1971) being the last successful new typeface. Nebiolo closed its doors, ceasing all production of type in 1975 (Kupferschmid). Despite the closure, Novarese continued his career as a freelance typeface designer, drawing a huge variety of typefaces for twenty more years (Kupferschmid). According to Kupferschmid, many of Novarese’s typefaces are available digitally, but most of his phototype fonts were never digitized and sank into obscurity when the commissioning companies closed. Many of his typefaces, “draw inspiration from the time, their surrounding, and trends in art and technology—so much so that some did not age well and became hard to use after a while without evoking a certain period or style” (Kupferschmid).
Revised typeface designer biography spread.
Eurostile Regular Oblique Medium Medium Oblique Bold Bold Oblique Heavy Heavy Italic Black Black Italic Cond Regular Cond Italic Cond Heavy Cond Heavy Italic Extd Regular Extd Regular Italic Extd Medium What’s so unique Black Black Italic about Eurostile? Novarese and Butti worked closely together to create typefaces such as Landi, Normandia, Fluidum, and Microgramma. However, Novarese’s career came to a halt in 1939, when he was imprisoned for participating in protests against the Second World War (Kupferschmid). He also protested against his call to military service and was spared being condemned to hard labor since he had won a
“Considering the huge investment required for the development of a new type family in the days of metal type, the typefaces had to meet the expectations of the market as well as the manufacturer” (Kupferschmid). As a result, there was an apparent downswing during the mid 1970s of Nebiolo’s casting
Aldo Novarese died in September of 1995 in Turin.
Visual analysis spread.
A visual analysis In an edited version of an original article by Aldo Novarese, Novarese states a close observation of the letters will reveal a compactness, a geometrical gracefulness which does not fatigue the eye, but on the contrary, attracts inattentive eyes to its uncommon characteristics. According to researchers from MIT, Eurostile’s, “design looks technical and industrial, while the characters themselves are boxlike in appearance.” The letters are, “decorative and, when set, give a general impression of a pleasing horizontal ornament”(Novarese). As Novarese puts it, “its outline is already familiar and unconsciously present.” Whenever we look at modern buildings we get the impression of countless letters ‘H’ assembled together (Novarese). “The square shape with the narrow curved angles is a typical architectural expression of our times, much as the round arc was of the Roman period, which produced the inscriptional characters of the ogive arch of the Gothic style, which produced the medieval faces” (Novarese). One of the obvious attributes of Eurostile is
that it is square in design. Many of the letters resemble the form of being traced around a 70s style television screen (Chahine, Reimer, and Dobres 33). There is also a symmetry and mathematical quality to the design (Linotype). Aside from the squared off curves, Eurostile has a large x-height and adds distinction from the crowd of other sans serif typefaces. Some of the more distinguishing letters of Eurostile can be found in the ‘Ks’ which have diagonals that do not touch the stem (Linotype). The lowercase ‘t’ has a long cross bar on the right, along with a tail that curves back to a vertical orientation. Its cross bar is similar to that of the lowercase ‘f’. The ‘A’, ‘M’, ‘N’, ‘V’ and ‘W’ all have flat apexes and the ‘Q’ has the distinction of having the tail longer within the counter than on the outside (Linotype). The lowercase a is of the traditional two-storied variety found in 19th century grotesques and most roman types (Linotype). The ‘g’ is a single storied design, similar to the likes of Helvetica or Frutiger.
64 • Typography II Journal
FINAL Went with a very different visual language for the book’s feel. I knew I wanted something distant from the associations with all the typefaces contained, but still wanted to feature them on the cover. It seemed logical to reference the ransom note aesthetic, since it could compile an aspect from each of these typefaces and have a random feel to it. I included rips of paper and paper cut outs to separate information on the table of contents, introductory note, divider pages, and bibliography. I also changed the layout of my designer’s bio to read easier, attached captions and corresponding numbering to diagrams and images, and rearranged the image gallery to match the other treatment of images.
New cover for book.
65 • Projects / Type Book
Finalized table of contents.
Finalized divider page.
Akzidenz
Grotesk
Designed and written by Caroline Craig
2
3
Finalized bibliography. CASLON (ADOBE) by Matthew Eike Author Unknown. “Family Classification of Type” Graphic Design Spokane Falls. Accessed 20 Febraury 2018. Author Unknown. “Carol Twombly: About the Designer” Adobe Typekit. Accessed 20 February 2018 Author Unknown. “Adobe Caslon” Fonts.com, Accessed 20 February 2018. Coale, Brian. “Caslon, when in doubt, use Caslon” Casey Connect. Accessed 20 February 2018
CENTAUR by Hailey Firstman
CLARENDON by WeeTeng Goh
COPPERPLATE by Cassidy Ha
“Centaur (Typeface).” Cargo Collective, cargocollective.com/anjalinair/ Centaur.
Challand, Skylar. “Know Your Type: Clarendon.” (IDGSN), 21 Aug. 2009, idsgn. org/posts/know-your-type-clarendon/.
Berry, John D. “American Type Founders Company: A Legacy of Typographic Innovation,
“Centaur (Typeface).” Wikipedia, en.wikipedia.org/wiki/ Centaur_(typeface).
Cunningham, Jonathan. “Clarendon.” Meaningful Type, www.meaningfultype. com/clarendon.html.
Quality, and Creativity. American Type Founders Collection. http://atftype.com/ history.php. Accessed 20 Feb 2018.
Christianson, Thomas. “Centaur.” Typehead Chronicles, www. rightreading.com/typehead/centaur. htm.
Devroye, Luc. “Robert Besley.” Luc Devroye, luc.devroye.org/fonts-40003.html.
Carter, Sebastian. “Frederic W. Goudy.” Twentieth Century Type Designers, Taplinger Publishing Company, 1987, pp. 42–50.
Revolvy, LLC. “‘Centaur%2B(Typeface)” on Revolvy.com.” Trivia Quizzes, www.revolvy.com/main/index. php?s=Centaur%2B%28typeface%29. Zapf, Hermann. Journal of Typographic Research; Detroit, Mich.. etc. Vol. 2, Iss. 4, (Oct 1, 1968).
“Fann Street Foundry.” MyFonts, www.myfonts. com/foundry/Fann_Street_Foundry/. MacMillan, David M., and Rollande Krandall. “Thomas Cottrell, Later Fann Street Foundry.” Circuitousroot, www. circuitousroot.com/artifice/letters/press/ noncomptype/typography/cottrell/index. html. McCormick, Kathryn. “Terminology (Anatomy & Framework), Size, and Classification.” Typography I. 2017, San Luis Obispo, California Polytechnic State University. Meggs, Philip B, and Roy McKelvey, editors. “Clarendons.” Revival of the Fittest: Digital Versions of Classical Typefaces, RC Publications, 2000, pp. 86–91. Seddon, Tony. Essential Type: An Illustrated Guide to Understanding and Using Fonts. Yale University Press, 2016.
“Copperplate Gothic.” Linotype. linotype. com/1549209/copperplate-gothic-family. html. Accessed 21 Feb 2018. “Frederic W. Goudy.” Edited by The Editors of Encyclopædia Britannica, Encyclopædia Britannica. https://www.britannica.com/ biography/Frederic-W-Goudy. Accessed 21 Feb 2018. Halff, Allison. “Tuesday Typefaces: Copperplate Gothic.” The Center for Book Arts. centerforbookarts.org/tuesdaytypefaces-copperplate-gothic/. Accessed 20 Feb 2018. Heller, Steven, and Louise Fili. Typology: Type Design from the Victorian Era to the Digital Age. Chronicle Books, 1999.
Selections from the Specimen Book of the Fann Street Foundry. Aldersgate Street, London: Reed & Fox. c. 1874. Retrieved 26 April 2017. 120 Know Your Type
Bibliography 121
66 • Typography II Journal
CONCLUSION My biggest takeaway from this project was optimizing typography for legibility on the screen. In addition, the nature of the project allowed for a realm of creative possibilities to be explored. Aside from refining typography techniques, we all gained a deeper understanding of how the grid functions in a layout and developing typography that is informed by its content.
67 • Colophon
COLOPHON Designed by Ryan Hutson, Winter 2018 Type set in PT Sans and PT Serif