338.01 Type Journal by Ruba Hamade by Ruba Hamade

TYPE JOURNAL

March 2016

TYPE JOURNAL Art 338 Typography II

Ruba Hamade Baskerville • Open Sans

Cal Poly San Luis Obispo • March 2016

Introduction This journal is a compilation of all lectures, readings, and projects that were assigned in Typography II (ART 338) in Winter 2016. Readings and lectures provide concepts about typography such as using grids to create clear layouts and hierarchy, and using Paragraph and Character Styles to create typographic consistency. It also acts as a manual of how to use different tools and shortcuts in inDesign. Projects show direct application of these concepts. This booklet summarizes all the readings and lectures given throughout the quarter to be used in the future as a reference guide for the application of basic typographic concepts.

Introduction

Lectures

TYPOGRAPHIC REFINEMENT Week One – January 7 Factors to consider when choosing a typeface • typeface proportions and weight • length of text • format for viewing (printed on paper or viewed on screen or both) • audience/reader of the text • content of the text

Screen vs Print In general, body text point size should be larger when the text will be read on screen (laptop, tablet, e-reader, etc.). Body text sizes in print will typically range from 9pt to 12pt. Comparatively, body text on screen should be 14pt or larger.

Leading It should be 120–145% of the point size. Too tight (11/11)

It was a voluptuous scene, that masquerade. But first let me tell of the rooms in which it was held. There were seven—an imperial suite, In many palaces, however, such suites form a long and straight vista, while the folding doors slide back nearly to the walls on either hand, so that the view of the whole extant is scarcely impeded.

Lectures

Good (11/14.5) It was a voluptuous scene, that masquerade. But first let me tell of the rooms in which it was held. There were seven—an imperial suite, In many palaces, however, such suites form a long and straight vista, while the folding doors slide back nearly to the walls on either hand, so that the view of the whole extant is scarcely impeded.

Optimal Line Length 45–90 characters per line, or 2–3 lowercase alphabets. About 8–13 words per line, on average.Dashes - Hyphen: used if a word is too long for the column length. The red death had long devastated the country. – En Dash: used to indicate duration. The red death had devastated the country from 1892–1893. — Em Dash: used to express a break in the flow of a sentence. The fourth was furnished and lighted with orange—the fifth with white— the sixth with violet.

Widows The last line of a paragraph is called a widow if it is too short. Do not adjust tracking any tighter than -10. Widow

Solution: Set tracking to -10

They resolved to leave means neither of ingress nor egress to the sudden impulses of despair or of frenzy from within. The abbey was amply provisioned. With such precautions the courtiers might bid defiance to contagion. The external world could take care of itself.

Type Journal

UNDERSTANDING TYPEFACES Week Three â&#x20AC;&#x201C; January 21 Purchasing a font A font license grants the owner the right to use a typeface in a specific manner as outlined in the license.

Websites to Buy Fonts Google Fonts www.google.com/fonts Lost Type Co-op www.losttype.com League of Movable Type www.theleagueofmovabletype.com Font Squirrel www.fontsquirrel.com Fontspring www.fontspring.com House Industries www.houseind.com My Fonts www.myfonts.com Fonts.com www.fonts.com 6

Lectures

Installation of Fonts User:~/Library/Fonts/ Each user has complete control over the fonts installed in their Home. Local:/Library/Fonts Any local user of the computer can use fonts installed in this folder. Network:/Network/Library/Fonts/ The Network folder is for fonts shared among all users of a local area network. System:/System/Library/Fonts/ Mac OS X requires fonts in this folder for system use and displays. They should not be manually altered or removed.

Font Management Programs Font Book: create font sets, resolves font conflicts, can deactivate fonts in the /Library/Fonts/ and ~/Library/Fonts/ folders to prevent any application from seeing them, can create Library sets to open fonts in place, and has an automatic activation feature. Font Explorer X Pro: can create full sets that include font names already listed in other sets, can deactivate fonts in the /Library/ Fonts/ and ~/Library/Fonts/ folders to prevent any application from seeing them, an activate fonts in place. Suitcase Fusion 6: can create full sets that include font names already in other sets, can activate fonts in place, has liable automatic font activation feature; decide which font to activate, can deactivate fonts in the /Library/Fonts/ and ~/Library/Fonts/ folders, and has a vault option if you prefer to store copies of fonts that have been added. Type Journal

TYPESETTING IN INDESIGN Week Four â&#x20AC;&#x201C; January 28 Paragraph Styles Affect paragraph level attributes: leading; tabs; indents; space before and after; hyphenation and justification settings; rules above and below General Settings: Shows a overview of the style settings and if the style was based on an existing style Basic Character Formats: Basic text formatting: font, font style, size, leading, kerning, tracking and case. Advanced Character Formats: Do not use horizontal, vertical scale, and skew. Use only baseline shift. Indents and Spacing: Defines alignment, indents, and space before or after paragraph returns. Tabs: Shows all tabs and leaders (a character that fills the negative space before the tab). Paragraph Rules: Shows rules (lines) that can appear above or below the paragraph. Paragraph Shading: Text highlighting. You never know when you might use it. Spacing can be customized. 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 columns in the same text box. 8

Lectures

Drop Caps and Nested Styles: Large initial caps and styles within other styles. GREP Style: Means Globally search a Regular Expression and Print. Allows you to use code to find and edit or style text through the Find/Change dialog box or via Paragraph Styles. Bullets and Numbering: Set up lists with auto bullet points or numbers. Character Color: Color of text. Percentage of tint. Stroke alignment can also be defined here. OpenType Features: Chose Titling and/or Swash alternative characters. Specify figure (number) style. Export Tagging: Turns styles into CSS. For Epubs and websites created in InDesign.

Character Styles Are used for styling text within a paragraph, for things like: bold text; italic text; run-in subheads; custom bullets or numbers General: Shows style name and if the character style is based on a pre-existing style. Basic Character Formats: Basic text formatting: font, font style, size, kerning, tracking and case. Leading is inherited from the paragraph style. Advanced Character Formats: Do not scale or skew, use Baseline Shift only. Character Color: Choose color of text, percentage of tint, and stroke alignment. OpenType Features: Chose Titling and/or Swash alternative characters. Specify figure (number) style. Type Journal

Table Styles 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 General: Shows if the table style is based on a pre-existing style in the document. Table Setup: Shows the border of the table and the spacing around the table within a paragraph. Row Strokes: The horizontal dividing lines in the table. Column Strokes: The vertical dividing lines in the table. Fills: Color(s) of fields within the table.

Cell Styles Used for styling individual cells, or rectangular divisions of the table. The cell style defines: the borders around the cell; 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. General: Shows if the cell style is based on a pre-existing style. Graphic: Inset, or space around, a graphic that is placed within a table cell. Strokes and Fills: Stroke around the cell and fill color of the cell. Diagonal Lines: When you want a diagonal line across a cell or an x-ed out cell.

Lectures

TYPOGRAPHY ON SCREEN Week Nine â&#x20AC;&#x201C; March 1 Two Typefaces Designed for the Screen by Mathew Carter: Georgia and Verdana Type for Screen Typeface Contrast: The amount of contrast between the thick and thin strokes of characters in a typeface impacts legibility. Higher contrast typefaces can be useful in small amounts or as headlines, but extreme variation in stroke width is burdensome in long text.

X-Height: When choosing a typeface for text, a high x-height is ideal, especially for use on interfaces or wayfifinding. If the x-height is too high, there is less room for other distinctive characteristics. The letters n and h, or a and d, can become difficult to distinguish as the x-height increases.

Type Journal

Character Distinction: Differentiating between different characters is essential for on screen legibility.

Numbers, Punctuations, and Special Characters: Strive to use typefaces that support different types of numbers, correct punctuation,and special characters, especially if your text will be set in a variety of languages. ÂżTiene sentido? Buena tipografĂa es importante.Small Caps and Ligatures: Some fonts contain alternate styles or characters like small caps and ligatures. Using small caps on the web usually means specifying a separate font file with just the small caps. Ligatures combine two or more characters to create a joined letterform. The most common ligatures solve for letterforms that unappealing crash into each other. Finding Alternatives: Classic typefaces are sometimes so overused that they begin to look like generic defaults. Look for typefaces that share some similar traits to your favorite classics.

Lectures

Strategies for Pairing Typefaces Look for Distinction: Avoid pairing typefaces that are too similar.

Pair Display and Text Faces: Take advantage of display type.

Look for Harmony: Find typefaces with inherent visual relationships in their structure.

Type Journal

SHORTCUTS

Lectures

•

option + 8

option + k

option + g

™

option + 2

…

option + ;

—

option + shit + -

–

option + -

tab

command + shift + t

Readings

SUMMARY OF KEY POINTS Week One – January 7 1. Point size should be 10–12 points in print, 15–25 pixels on web. 2. Line spacing should be 120–145% of the point size. 3. The average line length should be 45–90 characters. 4. Avoid goofy fonts, monospaced fonts, and system fonts, espe cially times new roman and Arial. 5. Use curly quotation marks, not straight ones. 6. Put only one space bet ween sentences. 7. Never use underlining, unless it’s a hyperlink. 8. Use centered text sparingly. 9. Use bold or italic as litt le as possible. 10. If you don’t have real small caps, don’t use them at all. 11. Use 5–12% extra letterspacing with all caps and small caps. 12. Kerning should always be turned on. 13. Use first-line indents that are one to four times the point size of the text, or use 4–10 points of space bet ween paragraphs. 14. If you use justified text, also turn on hyphenation. 15. Don’t confuse hyphens and dashes, and don’t use multiple hyphens as a dash. 16. Make sure apostrophes point downward. 17. Make sure foot and inch marks are straight, not curly.

Read more about Summary of Key Points. 16

Readings

WHY TYPOGRAPHY MATTERS Week Two – January 12 The typography of the infamous “butterfly ballot” wasn’t random. Like every terr ible and misg uided project throughout history, it seemed like a good idea at the time. Someone considered a number of typographic alternatives and approved this one.

A recreation of the “butterfly ballot” from Palm Beach County, Florida, and a butterfly-free redesign, by William Lidwell, Kritina Holden, and Jill Butler, from their book Universal Principles of Design.

Read more about Why Typography Matters. Type Journal

TYPE COMPOSITION Week Three – January 19 Today’s computer keyboards depict the available characters in almost the same way as a manual typewriter. But this depiction is misleading. The computer keyboard can produce many more characters than the ones visible on its keys. These include accented characters, math symbols, and white-space characters—inv isible markers that are useful for getting consistent typographic results.

Even though the computer keyboard can produce many more characters and symbols than the typew riter, much of that power is hidden from the writer.

Read more about Page Layout. 20

Readings

HOW TYPE FAMILIES WORK Week Four – January 28 The idea of varying the weight of a single typeface probably happened in the mid-19th century. Heavy typefaces did exist before that time, but they were generally seen on their own and not in relationship to the regular (text) weight. The Deberny & Peignot Foundry released Frutiger’s masterpiece, Univers, in 1957 in an unprecedented 21 variants. Frutiger’s systematic approach and innovative naming scheme eliminated confusion in type specification, and was perhaps even more interesting that the actual typeface design itself. Higher numbers signified increasing weight or width, so while Univers Regular was Univers 55, Univers Bold was referred to as Univers 75, and Univers Regular Condensed was Univers 57. The Univers system anticipated 9 weights and 9 widths (also incorporating an oblique, or sans serif italic variant), although some combinations of these proved unworkable in practice, so there is no Univers 79, or Black Condense. The incorporation of two different styles of typeface into one family was probably first explored in 1932, by Jan van Krimpen in his Romulus project. The sans and serif forms of Romulus share the same construction principles, but the resulting letterforms of the two styles are quite different.

Read more about How Type Families Work. Type Journal

THINKING WITH TYPE: GRID Week Five â&#x20AC;&#x201C; February 2 Multicolumn Grid The more columns you create, the more flexible your grid becomes. You can use the grid to articulate the hierarchy of the publication by creating zones for different kinds of content. A text or image can occupy a single column or it can span several.

Modular Grid A modular grid has consistent horizontal divisions from top to bottom in addition to vertical divisions from left to right. These modules govern the placement and cropping of pictures as well as text.

Baseline Grid Modular grids are created by positioning horizontal guidelines in relation to a baseline grid that governs the whole document. Baseline grids anchor all layout elements to a common rhythm. Read more about Grid. 22

Readings

UNETHICAL DOWNLOADING Week Five – February 2 Steven Heller describes the guilty revelation experienced when he learned that typeface software licenses are sold for use on specific, not unlimited numbers of CPUs. He calls for the ethical treatment of type designers, i.e. respect for their copyrights. The principle of “one time usage” or “one person licensee” seems foreign when it comes to type. Vanderlans says that when this is brought to violators’ attention “people usually admit their error and pay for the fonts.” But some designers resent any strictures: “I bought a font for use in a book,” explains a designer that I know, “it never occurred to me that I could not give it to my mechanical person, and from him to the printer. Isn’t it enough that I paid for it? Do the foundries have to bleed me for an additional fee each time I use it on a job?” Vanderlans counters that he does not charge anybody an additional fee for each use. “Once you purchase a copy, users can use the font on as many jobs, for as long as they want. And there is a way to hand your design job to a service bureau without breaching the font license. 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). Or users can buy a special license that allows them to take a font to their service bureau.”

Read more about Unethical Downloading. Type Journal

TYPE DESIGN PHILOSOPHY Week Five â&#x20AC;&#x201C; February 4 This article by the designer of Scala and Seria is as much a typographic guide and history lesson as it is a personal account of his approach to type design.

The Origins of the Sans Before the mixing of serif and sans in text can be explained, it should first be made clear where sans serif typefaces originate from, as it is only for about the last one hundred years that they have been used substantially.

Seria and Seria Sans. A literary typeface There were two main reasons to start working on a new typeface. The first had to do with my dissatisfaction with the use of Scala in a more literary way. As a book designer I could not use Scala for the more literary books or for poetry, as I found it was too stubborn with too short ascenders and descenders. The second reason came as a direct question from a French art critic, Hector Obalk. In 1996 he had invited me to give a lecture on type design in the Pompidou Centre in Paris, and during a chat afterwards he told me of his love for Scala.

Read more at My Type Design Philosophy by Martin Majoor. 24

Readings

LATIN TYPE IN THE WORLD Week Six – February 9 The first recorded movable type system was more likely created in China around 1040 AD by Bi Sheng. Unlike Latin script which uses 26 letters, Chinese script uses thousands of characters, making type composition particularly complicated. Most of the existing typographic classification systems also apply exclusively to Latin type. In catalogues of the traditional type foundries such as French Imprimerie Nationale, the house of Garamont, Didot and Romain du Roi, typefaces other than Latin are referred as “Orientales”. Most contemporary digital type foundries such as Monotype call these fonts “Non-Latin”. These terms certainly have rather colonial overtones, suggesting the idea of “the other”, describing foreign scripts in negative terms as “non-European”. The term “Roman” is customarily used to describe serif typefaces of the early Italian Renaissance period. More recently, the term has also come to denote the upright style of typefaces, as opposed to the word “Italic”, which refers to cursive typefaces inspired by the handwriting of Italian humanists. Thus Linotype offers fonts called Sabon Greek Roman and Sabon Greek Italic, (designed by Jan Tchichold), based on 16th century models. “Greek Roman” and “Greek Italic” are contradictions in terms, mixing two very different histories. Such slanted versions of Greek or Cyrillic types should properly be described in more technical terms such as inclined, oblique, or cursive. Read more about A View of Latin Typography in Relationship to the World. Type Journal

LAVA MAGAZINE Week Seven – February 18 Works That Work was a new magazine that was launched in February 2013. The first things that he started working on was its typeface. Mitim, with all its features, flaws and limitations became an integral part of Dot Dot Dot’s identity. This magazine stretched across multiple platforms (online, eBook, PDF and print), and its content were also available in various configurations. He wanted the typeface to be the voice of WTW, relaxed manner of an engaged storyteller, ready to handle long stories, but also small captions or titles. He named it Lava.

Since the magazine would be read both in print and on screen, Lava was designed to perform optimally in both high- and lowresolution environments. Lava looks closely at system fonts such as Times and Georgia and aspires to work on screen as well as they do. In print, Lava delivers something that default UI fonts usually lack: refined details, finely tuned proportions and meticulous spacing that let the reader forget about the typeface and pay attention to the text. Read more at Lava—Voice of a Magazine by Peter Bil’ak. 26

Readings

GRATUITOUS MAGAZINE Week Seven – February 18 For Schlenker, the self-initiated Gratutious Type was integral to launching her career. It is an independent magazine. She also felt that the U.S. lacked a graphic design-focused magazine with a more international perspective and aesthetic. She wanted to explore her own ideas in editorial design, to connect with other artists I admired, and to steal their secrets under the guise of gathering information for her publication. She did a lot of sketching. Her idea for the cover happened pretty quickly, but the interior developed only after a lot of trial and error around specific ideas that I wanted to execute. She wanted there to be lots of white space, lots of movement (even amongst the magazine’s folios), and a sense of playfulness—more than editorial authority. She quickly realized that she wanted to allow the magazine’s design to evolve with each issue, to change up typefaces, the grid, and other graphic elements.

Read more at The First Thing I Ever Designed: Elena Schenker and “Gratitous Type” Magazine. Type Journal

VISIONS OF THE FUTURE Week Seven â&#x20AC;&#x201C; February 18

See more JPL posters at Visions of the Future. 28

Readings

EVALUATION OF GILL SANS Week Eight – February 23 There are three developmental forms of the Gill Sans lowercase ‘a’ on record; revisions were made at the Monotype drawing office and passed back to Gill for approval. The original design for ‘a’ is strikingly similar to Johnston’s, followed by a second attempt which was put into production and can be seen on early specimen sheets. The third and least satisfactory character is seen in all versions of Gill Sans since the early 1930s.

Aside from inconsistencies of the weights in Gill Sans, Gill changed proportions between capital height, stroke width and character width. The images on the right shows a comparison of uppercase E and F in Gill Sans and Johnston. Shorter middle arms help balance and legibility in Johnston’s case.

Read more of Eric Gill Got it Wrong: A Re-Evaluation of Gill Sans. Type Journal

TYPE DESIGN Week Eight – February 25 The Beauty While any choice representing beauty is bound to be very personal and subjective, many agree that the high-contrast typefaces created by Giambattista Bodoni and the Didot clan are some of the most beautiful in existence.

“Italian” has reversed-contrast typeface was designed to deliberately attract readers’ attention by defying their expectations. Strokes that were thick in classical models were thin, and vice versa — a dirty trick to create freakish letterforms that stood out in the increasingly saturated world of commercial messages. No other style in the history of typography has provoked such negative reactions as the Italian.

Read more at Beauty and Ugliness in Type Design by Peter Bil’ak. 30

Readings

AN IDEA OF A TYPEFACE Week Nine – March 1 Aware that there is no such thing as total neutrality, Neutral typeface explores how the absence of stylistic associations can help the reader to engage with the content of a text. A typeface is both a tool for designing, and a tool for reading. The fewer distracting details there are, the more invisible the typeface, and the clearer the text becomes. In the old version of Neutral, there were a couple of things that were not as invisible as I wanted them to be when I started redrawing it. In that way, I guess it’s more neutral now than it ever was. The plain, reserved nature of the typeface that resulted from filling in this framework of parameters will be quite neutral to a quite large number of people, even though we may argue about the details. In the end we can not create something completely neutral, something to which none of us can attribute any qualities. But we can approximate the formal idea of neutrality to some degree. And even if some would not consider this typeface to be neutral at all — maybe it was only through this project that their own thinking about neutrality was triggered. And in that respect also the project would be a success. It is more important to ask the question than to answer it.

Read more at An Idea of a Typeface by Kai Bernau. Type Journal

NEW CHEROKEE TYPEFACES Week Nine – March 1 Back story: In the summer of 2011, two representatives from the Language Technology Office of the Cherokee Nation attended a type conference to issue a plea for new digital Cherokee typefaces. The few existing Cherokee fonts at the time were of poor quality, lacking bold or italics. While What are its distinguishing characteristics? This serif face is a harmonious mix of closed and open shapes, straight strokes, and playful curves. The ornate historic Cherokee glyphs have been opened up and simplified for legibility. The current 2.0 update features a new lowercase in different weights and styles— the first addition to the syllabary in its 195-year history. There’s also a small-caps version, so that bilingual documents can be set in Cherokee text (which looks like small caps to a Latin reader, with sentences beginning with a large syllable and then continuing with smaller glyphs) that maintains the same visual density as English upper- and lower-case text. What should I use it for? This typeface was designed for use in the Cherokee language with a Latin word or phrase added here and there. Phoreus’ clear, simple shapes are well suited to the very young readers needed to keep the language alive. It works nicely on English language websites, and its open letterforms are an unexpected option to swap in for editorial or advertising text you might have otherwise set in Archer. Read more at A Typeface Designed to Revive the Endangered Cherokee Language by Angela Riechers. 32

Readings

Projects

EXERCISE ONE Week One â&#x20AC;&#x201C; January 7 Objective: to examine how changes in point size, leading, and typeface selection impact legibility.

Analysis What effect does varying the typeface have on legibility? Serif and sans-serif typefaces have different effects on legibility. The x-height, ascenders, and descenders vary from one typeface to another. This makes some typefaces harder to read than others, or faster to read than others. For this exercise, I chose Clarendon LT STD as serif typeface and Aller as sans-serif typeface. What effects do the changes in leading have on readability? Leading affects how fast one reads a paragraph. Leading is not always a specific number, but is more related to the point size of a certain typeface. For example, 9/13 for Clarendon looks more expanded than 9/13 for Aller. The shapes of letterforms in each typeface affect the point size and leading.

Projects

What point sizes look best with the given column width? For Clarendon, the best point size is 10. For Aller, the best point size is also 10. They are both more legible at this point size. Which typeface in which point size and leading is the most readable? Both Clarendon and Aller are most readable in 9/14. But I think they are more legible in point size 10 which requires more leading.

Which is the worst combination of all three and why? 10/13 of Aller looks very tight because the point size is bigger but the leading wasnâ&#x20AC;&#x2122;t increased in relationship to the point size. 9/15 of Clarendon also looks very loose because the relationship between the point size and leading wasnâ&#x20AC;&#x2122;t adjusted. There is too much space between the lines.

Type Journal

PROJECT ONE Week Two – January 14 Analysis I chose Avenir as typeface and I varied between weights to achieve hierarchy. The quotes are written in Avenir (Roman) in 9.8/13.5. The author’s name is written in bold and all caps with point size of 7 and leading of 10.5. I decreased the size because these information are less important than the main quote. The book title and year published are even less important, so they’re written in regular all caps, with same point size and leading. The book title should always be italicized. I think that these styles achieve the proper heirarchy for the content. The page title “Typography” is written in

APHY PHY

Avenir (Bold) and is rotated counter-clockwise, giving the illusion of running up“Type fromisthe bottom of the page. I created a balance magical. It not only communicates a word’s

information, it conveys between the heavy weight but of the title anda subliminal the size of message.” the text. In — ERIK SPIEKERMANN CITED IN THE BOOK OF ALINA addition, I focused on aligning the edges with each other. WHEELER, DESIGNING BRAND IDENTITY, 2009, PAGE 155

Before

“Typography manipulates the silent dimensions of the alphabet, employing habits and techniques— such as spacing and punctuation—that are seen “Type is magical. It not only communicates a word’s but not heard.” information, but it conveys a subliminal message.” — ELLEN LUPTON, THINKING WITH TYPE: A CRITICAL GUIDE ERIK SPIEKERMANN CITED IN THE BOOK OF ALINA WHEELER, FOR DESIGNERS, WRITERS, & STUDENTS, 2010, PAGE 91 DESIGNING BRAND IDENTITY, 2009, PAGE 155

After

“When most people look at a page, they don’t “Typography manipulates the silent dimensions of see typefaces and they don’t see type. They see the alphabet, employing and techniques— words. They’re not admiringhabits the page—they’re such as spacing and punctuation—that are seen reading it, and reading is all about rhythm.” but not heard.” — JAMES FELLICI, THE COMPLETE MANUAL TYPOGRAPHY: ELLEN LUPTON, THINKING WITH TYPE: A CRITICAL GUIDE A GUIDE TO SETTING PERFECT TYPE, 2012, PAGE 105 FOR DESIGNERS, WRITERS, & STUDENTS, 2010, PAGE 91

Projects

“Typography creates many of the road signs by “When people a page,pages.” they don’t which wemost navigate ourlook way at through see typefaces and they don’t see type. They see — JAMES FELLICI, THE COMPLETE MANUAL TYPOGRAPHY: words. They’re not admiring the page—they’re A GUIDE TO SETTING PERFECT TYPE, 2012, PAGE 218

TYPOGRAPHY

“Type is magical. It not only communicates a word’s information, but it conveys a subliminal message.” ERIK SPIEKERMANN CITED IN THE BOOK OF ALINA WHEELER, DESIGNING BRAND IDENTITY, 2009, PAGE 155

“Typography manipulates the silent dimensions of the alphabet, employing habits and techniques— such as spacing and punctuation—that are seen but not heard.” ELLEN LUPTON, THINKING WITH TYPE: A CRITICAL GUIDE FOR DESIGNERS, WRITERS, & STUDENTS, 2010, PAGE 91

“When most people look at a page, they don’t see typefaces and they don’t see type. They see words. They’re not admiring the page—they’re reading it, and reading is all about rhythm.” JAMES FELLICI, THE COMPLETE MANUAL TYPOGRAPHY: A GUIDE TO SETTING PERFECT TYPE, 2012, PAGE 105

“Typography creates many of the road signs by which we navigate our way through pages.” JAMES FELLICI, THE COMPLETE MANUAL TYPOGRAPHY: A GUIDE TO SETTING PERFECT TYPE, 2012, PAGE 218

“Typography must support the positioning strategy and information hierarchy. Identity program typography needs to be sustainable and not on the curve of a fad.” ALINA WHEELER, DESIGNING BRAND IDENTITY: AN ESSENTIAL GUIDE FOR THE WHOLE BRANDING TEAM, 2009, PAGE 154

“A grid is not about painting a page—creating the perfect composition within the frame of the paper trim. It is about building a page—providing a framework within which visual and typographic elements work to reinforce meaning.” JOHN K ANE, A TYPE PRIMER, 2011, PAGE 178

“When the type is poorly chosen, what the words say linguistically and what the letters imply visually are disharmonious, dishonest, out of tune.” ROBERT BRINGHURST, THE ELEMENTS OF TYPOGRAPHIC STYLE, 1992, PAGE 23

Type Journal

PROJECT TWO Week Four – January 26 Main Objectives To use typography to create a distinction between two different voices, and to demonstrate an understanding of good typographic practice when setting text

Analysis What is this interview about? Do you want to emphasize any specific portions of the text? In this interview, Campbell explains to the audience how they should discover the hero inside themselves. He encourages each person to lead his life as if it’s a journey, and to do the work that each enjoys the most. The quotations in which Campbell is giving advice to the audience should be emphasized. How will you use typography and layout to indicate the two different voices? The questions should be distinguished from the answers without having to repeat Campbell and Moyers’ names before each question and answer. I will use the same typeface for both (Verdana), bold for answers and regular for answers. If you do want to use images, how will they relate to text? I won’t use images. I will focus on typography to show the tone of the interview. The tone is dynamic and unstatic, so I will represent the text boxes diagonally to show this movement and energy Campbell is trying to convey. 38

Projects

Process

Chosen Layout

Bold for questions and regular for answers

Right alignment for questions and left alignment for answers

Type Journal

First Draft

Second Draft Reading orientation is not clear

Projects

Type Journal

Revisions to Second Draft

Final Layout

Projects

Type Journal

PROJECT THREE (PHASE I) Week Five â&#x20AC;&#x201C; February 5 Main Objectives To develop a grid structure that ensures consistency in a multiple page document, to properly apply paragraph and character styles, and to use typographic techniques to establish hierarchy and clarity in a given text.

Analysis I chose only one typeface to adjust the hierarchy in sections three and four. Open Sans has different weights (light, regualr, semibold, bold, and extrabold). Therefore, I think that I can distinguish between different styles by switching between weights. The main section title is in extrabold weight, the sub-header is in bold weight, the text is in regular weight, and the examples are in light weight. Open Sans is a sans-serif typeface, so I chose point size of 9.5 for regular text. The footer is separated from the content by a line. I chose to differentiate between sections three and four by placing a reversed bar at the top of each section with the number of the section in Roman numeral in white. In the second phase of the project, we decided to use a serif typeface (Minion Pro) for the text and a sans-serif (Open Sans) for the headers. In addition, we removed the line between the text and the footer because other sections used tables, and the line will compete with the borders of the tables. The section title was separated to a whole instead of the black bar. This will emphasize the title section more. 44

Projects

Process

Section title: Open Sans Extrabold (23/27.6) Sub-header: Open Sans Bold (11/13.2)

Text: Open Sans Regular (9.5/15)

Examples: Open Sans Light (9.5/15)

Type Journal

PROJECT THREE (PHASE II) Week Six – February 11 Things learned in this Project •

Typography: focus on hierarchy when organizing the content, understand more the relationship between point size and leading to achieve legible text, avoid orphans and widows, obtain right line length, and choosing contrasting typefaces to work as headers and text.

•

InDesign: apply paragraph and character styles properly, give specific names to styles and avoid general names, use rulers to align certain text boxes, use special character to determine page numbers, use master pages to determine common page layouts.

Section title: Open Sans Light (24/34)

Projects

Sub-header: Open Sans Bold (11/13.2)

Text: Minion Pro Regular (10.5/14.5)

Type Journal

Booklet cover (phase I)

Author's name shouldn't be on the cover

Projects

Booklet cover (phase I)

Redesign of the cover to be part of the series

Type Journal

PROJECT FOUR Week Ten – March 10 Main Objectives To increase understanding of page layout, the importance of a grid use, hierarchy and pacing in a multiple page document, to create an InDesign file using paragraph and character styles that can be easily modified and refined, to develop a visual design that is appropriate for on screen viewing

Analysis The main theme of the magazine is representing type trends as expressions of culture. This magazine is a special issue representing Arabic Typography as a main section. I chose the name “Nuqat” which means points in Arabic. I chose two typefaces: Univers and Palatino to create contrast between different styles. Palatino was only used for titles of main articles. Univers was used for titles of articles that followed full page titles. Full page photographs divide different sections. There are three main sections: Calligraphy & Lettering, Into the Middle East, and Type Trends. There are three sub-sections: Typography Spotlight, Mid-Century Modern, Type in Packaging, Book Covers of 2015. I added timelines to articles that require showing different periods of time, such as Surf Typography, Nike Typography, and Calligraphic Styles. The images are fit in the columns. The grid is based on three columns. The grid is consistent in

Projects

Divided into one column and a half (still based on three columns)

Timelines consistent across sections

Page layouts divided into 3 columns

Type Journal

Page layouts divided into 3 columns Lead in to interview

Introduction applied in two columns

Projects

different types of articles such as Jon Continoâ&#x20AC;&#x2122;s interview, Surf/ Nike Typography, and Book Covers of 2015. Sometimes the grid was divided into two parts in the same page (column and a half for each part), such as the spread of Calligraphic Styles. In the spread of Rising Type Stars, the grid was divided into 1 column (for the results of the quiz) and two columns combined for the article.

View the full version of the magazine Nuqat.

Process Phase 1: Grid Title (should be bigger)

Basic grid divided into 3 columns. Images pccupy all 3 columns.

Type Journal

(white space)

Phase 2: Section design

Relate images to specific locations (replaced afterwards by the Middle East map) 54

Projects

Relationship between title of section and full-page image

Captions were too big (they should be less prominent)

Type Journal

CRITIQUES Week One – Week Ten Project One •

Good distinction among different types of content.

Project Two •

The layout of text in designed shapes is interesting, but the light green and peach colors are too close in value.

•

The title could be more prominent if you rearranged the text on the left.

•

Adding imagery would give the layout more interest and impact, which would entice the reader to get into the interview.

Project Three •

Example text is too large compared to body text.

•

The two typefaces work better together when the Open Sans is bold.

•

There are inconsistencies with the space around and between examples.

Project Four •

Divide articles into different sections by adding full page images that drive in readers into the section.

•

Projects

Text columns is a little bit tight.

Quizzes

QUIZ ONE Week One – January 5 1. The “x-height” refers to the height of a lowercase character, usually the x, from the baseline to the top of the character. 2. A font is the delivery mechanism for letterforms. 3. A typeface is the design of the letterforms. 4. Caslon and Palatino are typefaces appropriate to use for the body text when designing books. 5. The bowl is the completely enclosed round part of the letterforms such as p, b, and R, both the positive and negative space, while the counter refers only to the negative space, whether it’s completely enclosed or not. 6. Univers and Helvetica are typefaces associated with the International, or Swiss Style. 7. A ligature is a glyph combing to or more characters that are difficult to fit properly, such as f followed by i, into a single, more elegant shape. 8. Kerning is manually adjusting the individual spaces between letter pairs for legibility. 9. The eye is similar to the counter, but refers to the enclosed part of the letter e, and an ear is the small stroke extending off the upper part part of a lowercase g. 10. Monospace: each character has the same horizontal width.

Quizzes

QUIZ TWO Week Two – January 12 1. Ways to fix a widow: try setting the tracking to -10 to force the widow up to the previous line or try adding some line breaks in the paragraph to force more text down to the line with the widow. 2. A line of text should be 8–13 words or 45– 90 characters. 3. In a paragraph, two hyphens in a row is not problematic in a block of text. 4. A good general rule for leading is that it should be 120 –145% of the point size. 5. 12 points make up one pica.

Type Journal

QUIZ THREE Week Three – January 19 1. The semicolon (;) is used instead of a conjunction to combine two sentences: (example: He did the crime; he must do the time), or to separate list elements with internal commas: (example: We visited Tulsa, Oklahoma; Flint, Michigan; and Paducah, Kentucky). 2. Beatrice Warde in her essay “The Crystal Goblet” suggested that good typography should be “invisible”. 3. The primary design flaw of the Florida “Butterfly Ballot” is that the fill-in dots to select a candidate did not clearly line up with the candidate’s names. 4. An ampersand is a stylized depiction of the Latin word et, is typographic shorthand for the word “and”. It should be used when it is part of a proper name (Fromage & Cracotte Inc.). 5. You should never put two spaces after a period. Extra spaces disrupt the balance of white space and are unnecessary.

Quizzes

QUIZ FOUR Week Four â&#x20AC;&#x201C; January 28 1. Paragraph and Character Styles allow you to define sets of formatting attributes that get applied together. So instead of selecting a heading, changing it to 13 point, bold, and all caps, you can define a style that includes these three attributes, and apply the style to the heading. They also inherit formatting from other styles. A change to the parent style will propagate to all the substyles. But a change to the substyle will only affect that one style.They also change formatting across a class of related elements. 2. How a table looks is primarily defined by the formatting of cell borders and cell margins. 3. To signal the start of a new paragraph, you can add extra space between paragraphs or indent the first line of the new paragraph. 4. When you buy a font, you are purchasing a license that grants the owner the right to use the typeface in a specific manner. 5. It is important to organize fonts into sets so you can easily turn on and off fonts depending on what project you are working on, so you can categorize fonts and easily find them by style, and so you can keep a minimum number of fonts open on your computer, thus improving the speed of Adobe programs.

Type Journal

QUIZ FIVE Week Eight – February 23 1. Peter Bil’ak’s typeface Lava was designed for multiple platforms: online, eBook, PDF and print. It was also designed for the magazine “Work That Works”. 2. A multicolumn grid has vertical divisions of space. A modular grid has consistent horizontal divisions from top to bottom in addition to vertical divisions. 3. Elena Schlenker’s “Gratuitous Type” magazine was an independent, self-funded graphic design magazine. 4. Scala and Scala Sans are both humanistic typefaces. 5. The use of the term “Roman” to denote the upright style of a typeface is inappropriate for typefaces which did not evolve in Western Europe.

Quizzes

Type Journal