gnignoL detsuR ecanruF kaerbyaD neetneveS ngineB eniN gnimocemoH enO raC thgierF
Longing Rusted Furnace Daybreak Seventeen Benign Nine Homecoming One Freight Car
INTRODUCTION.
Monday on the 20th day of the 3rd month in the year 2017 at hour 20 minute 49 second 30, 31, 32, 33…. Sitting with both legs up on the chair, one underneath my body, the other upright propping my head staring at the screen I type this message on. I cannot say I didn’t see this moment coming as I put this journal together, but I can say that I did not expect the journey to be as crushing as it turned out to be. That’s life, I suppose. Every moment in its place, one unexpected change in direction after another, every instance forever amounting up to other instances forever amounting up to other instances forever amounting up to other instances…. An ironically endless progression that is eventually filled with ends. Winter Quarter, your time has come. Until we meet again. A culmination of typographic notes and works from Trey Cahalan.
Typography II Journal
5
Reading Notes
s.
Typography in Ten Minutes.
Five key rules: Typographic quality is largely determined by how your body text looks because of how much more body text there will be in a document.
1
Point size for print is 10–12 point size, while point size for web is 15–25 pixels. Point size will be different for all unique font, so adjustments are necessary.
2
Line spacing should be 120–145% of the point size.
3
Line length should be 35–90 characters per line or 2–3 lowercase alphabets.
4
Font choice is key to making a document or design visually good. Ignore the system fonts that come free with the computer and buy professional fonts that work with the document or design.
5 8
Reading Notes
Summary of Key Rules.
Continuation of five key rules: Avoid system fonts, goofy fonts, and monospaced fonts.
6
Use curly quotation marks, not straight quotation marks.
7
Put only one space between sentences, not two spaces.
8
Don’t use multiple word space/whitespace characters in a row.
9 10
Don’t use underlining unless for hyperlinks.
Use centered text sparingly.
11
Use bold or italics as little as possible in your document.
13
All caps are fine for less than one line of text.
14
Only use real small caps; never use or create fake small caps.
15
Use 5–12% extra letterspacing for all caps and small caps.
16
Typography II Journal
9
Kerning should be turned on, always.
17
Use either first-line indents that are four times the point size of the text, or use 4–10 points of space between paragraphs. Do not use both at the same time.
18
Turn on hyphenation for justified text.
19
Do not confuse hyphens and dashes, and don’t use multiple hyphens in place of dashes.
20
Use ampersands sparingly, unless included in a proper name.
21 10
Reading Notes
In documents longer than 3 pages, one exclamation point is plenty.
22
Use proper trademark and copyright symbols over alphabetic approximations.
23
Put a nonbreaking space after paragraph and section marks.
24
Make ellipses using the proper character, not by using periods and spaces.
25
Make sure apostrophes point downward.
26 27
Make sure foot and inch marks are straight, not curly.
Forward. “Typography is the visual “Type is visual language.” component of the written word.” —Matthew Butterick
—Erik Spiekermann
Both definitions are different because one defines “typography” while the other defines “type.”
“Type” is mechanized writing—as opposed to writing by hand. Printed type does not exist without a relationship to the page it is presented on. Typography is the arrangement of prefabricated elements on a page. This arrangement visualizes and thus reinforces the hierarchy of the message. Typography helps better communicate a message that is being said through a body of text. “Good typography is measured by how well it reinforces the meaning of the text, not by some abstract scale of merit.” —Matthew Butterick
Typography II Journal
11
Why Typography Matters.
Why is the design of the butterfly ballot problematic? The design of the butterfly ballot is problematic because of how much confusion the layout causes the user to have when using it. Problems with the ballot include: options on the ballot alternate between both pages, the fill-in bubbles and the options don’t line up as best as they could be lining up, space is used ineffectively, and the elements on the page seem more cluttered and jumbled around than they need to be. 12
Reading Notes
In what way is Trixie’s résumé better than Violets? Trixie uses negative space better than Violet by allowing the text to sit on the page with larger margins, more breathing room between lines of text, and similar/relevant information is still placed close enough to relating information to give the reader less struggle to find information and to make the reader move his/her eyes less distance on the page. Trixie’s résumé also benefits from simpler page elements such as the nicer looking bullet points and section dividers compared to Violet’s more graphic bullet points and blocky gray bands of color as section dividers. The résumé with the better typography attracts the better quality of attention.
Typography II Journal
13
What is the main argument in Beatrice Warde’s essay “The Crystal Goblet”? The main argument in the essay is that the best design should be invisible, similar to how the crystal goblet (the receptacle of the wine) is invisible, thus making the wine the centerpiece of attraction with nothing to distract the viewer from it. Any other goblet (a gold one perhaps) would make the viewer more in awe with the goblet than with the wine itself. Comparing this to design, the wine is the type on the page and the goblet is the typography.
14
Reading Notes
Why does Mathew Butterick disagree with this? Butterick disagrees with Warde’s main argument because he says, “it’s poorly reasoned, contradicts common sense, and like all faulty analogies, leads to faulty conclusions.” As he relates the argument to typography, he claims that typography isn’t and should not be invisible, and that by embracing that fact, it can promote the creation of better typography. Butterick says that typography is the visual component to type, and without typography, the type has no visual characteristics. Therefore, the viewer/reader would have no reason to be in awe of the text and have nothing for him/her to be captivated by while reading. The written word on a page is the fusion of type and typography.
Typography II Journal
15
Type Composition. What are three new things you learned from the chapter on type composition?
16
Hard page breaks
1
Reading Notes
This is a good solution for making it easier to deal with text boxes in InDesign. Before, I would just stretch text boxes to certain lengths so that the text that doesn’t fit in the box would flow to the next text box that I had placed onto the next page. However, this would make editing a pain for me since I’d have to change the text and then resize the box the text sits within. With the use of page breaks (cmnd + fn + enter), I get rid of the step requiring me to readjust the text box since all the text I don’t want on the first page automatically gets bumped forward to the second page, regardless of what size my first text box is.
Paragraph and section marks
2
Not only did I know what the symbol for a section mark was, but I had no idea that the “§” symbol had anything to do with textual formatting and editing. On top of this, knowing that InDesign can reveal the symbols (Type > Show Hidden Characters) helps me figure out why the text in my document is acting the way it is, and how it’s being affected.
Optional hyphens
3
This trick helps me out a lot when it comes to better looking hyphenation within my document. It’s silly, but I didn’t know I was “allowed” to add my own hyphens to words so that they’d look nicely hyphenated (and fix my column rags at the same time), which is silly because there’s technically no rule book that says I can’t manually adjust text to it look nicer and more proper.
Do you think you will use any of the keyboard combinations you learned to create different symbols? Oh, definitely! In fact, I’ve been integrating some of these throughout the projects we’ve had all quarter long and in previous quarters as well. Typography II Journal
17
Text Formatting. Text formatting includes everything that affects the appearance of the characters on the page—not only fonts, but also point size, bold or italic styles, small caps, letterspacing, and kerning.
Page Layout. Page layout is one of the most important and difficult things to deal with as a designer. It determines how a page or spread will feel to viewers when they look at the content the pages have to offer. This alone gives viewers first impressions before even reading or thinking about the content. The elements that affect page layout include everything that has to deal with the text, the negative space around the text, images, graphic elements, margins, and much more. Layout is also affected by the smaller details within the text like hyphenation, orphans and widows, and indentation to mention a few.
18
Reading Notes
Family planning. or how type families work. A functional typeface family has each of its styles recognizably different for the family to be functional. This alone makes it so that it can be used for several different applications within a single document/design without forcing the designer to add another font to the list of current fonts being used for that document/ design. Large typeface families are good, but if they’re too large, they become impractical because many of the styles would go unused. On top of that, the large typeface family takes up an unnecessary amount of space on the computer, which could slow down its processing speed. When it comes to managing the fonts and typefaces, it’s good to always keep the ones that aren’t used often enough turned off so that it’s easier and faster to find the fonts you want for a document/design. This also saves on processing time for your computer.
Typography II Journal
19
Using Grid Layouts Effectively. No exceptions, always use a layout grid for any design projects. Layout grids aid in giving the design harmony, consistency, and cohesiveness. By using a grid, you could make your design fit to well-known structures and layouts such as the rule of thirds, the Golden Ratio, or the Fibonacci Spiral as compositional tools that improve layouts tremendously.
20
Reading Notes
Typographica Mea Culpa. Unethical Downloading. At all times, typeface software should only be distributed ethically and legally. Likewise, if you have possession of a font that you haven’t obtained through ethical means, then today is a better day than any to stop using the font entirely until you do obtain it ethically. It’s not just every designers job to work ethically, but it’s our job as human beings to follow a code of ethics.
Typography II Journal
21
My Type Design Philosophy. It is important to note the differences between the serif typeface and the sans serif typeface. Both categories carry with them separate meanings that may or may not conflict with each other. As designers, we should use a serif or sans serif typeface family whenever it is best to use one over the other to make the design as best as possible. We should not choose one or the other simply because we prefer to use one kind of typeface over the other.
22
Reading Notes
A View of Latin Typography in Relationship to the World. In general, serif typefaces refer to their standard style as “Roman,” whereas sans serif typefaces refer to this as “Regular.” There is also a difference when it comes to emphasized text, serif typefaces refer to it as “Italics” and sans serif refers to it as “Oblique.” The names are different; however, the styles are the same.
Typography II Journal
23
Lava. Voice of a Magazine. A single typeface alone can help define the characteristics of a magazine or project immensely. If there are no typefaces out there that seem suitable for your project, then a solution could be to create your own typeface, although it’s not an easy task. A typeface alone can define the feelings you want your project to convey, and since everyone will be reading the text in a book or a magazine, this is hugely important. If the project is meant to have text that will be read through either print or electronic formats, it’s important that the typeface will still be legible on both platforms.
24
Reading Notes
The First Thing I Ever Designed. Elena Schenker and Gratuitous Type Magazine. Magazines have become key portfolio pieces for designers because they showcase a wide range of skills in design, especially when this entire project is produced by yourself.
Typography II Journal
25
Eric Gill got it all wrong. a re-evaluation of Gill Sans. Because of how popular a font can be, it must be examined to make sure that it’s not a font that is poorly designed, especially if it’s one that has risen in availability. Due to this, if more people use the font and it turns out the font isn’t as best designed as possible, then a lot of people would start using this bad font unless otherwise taught that it’s not that great.
26
Reading Notes
Beauty and Ugliness in Type Design. The theory is that the aspects of a beautiful typeface plus the aspects of an ugly typeface would amount to the creation of a wholly neutral typeface, which turns out to be a logically accurate equation. Typefaces each have their own unique personalities and meaning behind them, so it’s natural for some to be used over others in different situations. Neutral typefaces, however, seem to be the most versatile because of how many different situations they can work in as opposed to the lesser number of situations that less neutral typefaces can be used for.
Typography II Journal
27
7 Striking Design Pairings. Throughout the ages, design has evolved time and time again, however, that leaves open the opportunity for designers to adapt past designs from generations ago to their own designs. It’s always interesting to see how later designs pull and implement past designs into their own creations, especially since different eras of design have their own unique spins on how a design should function and be portrayed.
28
Reading Notes
An Idea of a Typeface. There is no such thing as total neutrality. Keeping that in mind, neutral typefaces explore how the absence of stylistic associations help the reader engage with the content of the text rather than with the design and style of the text itself. Neutrality can be achieved by utilizing the design principle of timelessness. What could add to the sense of neutrality in a typeface is the idea itself of the typeface being neutral mixed with the removal of anything on the typeface that could distract the reader from the meaning of the word the text is spelling out.
Typography II Journal
29
A Typeface Designed to Revive the Endangered Cherokee Language. Some peoples don’t have typefaces for their own languages, which is unfortunate because a written language in digital form is huge for a culture to have so that they can communicate more effectively in today’s technological centered world. For some languages, however, they have a typeface with only a single style, which also hampers a culture to communicate effectively because they can’t show expression or hierarchy with their type.
30
Reading Notes
Typography II Journal
31
Lecture Notes
s.
Typographic Refinement. The Details. POINT SIZE—The measuring system for type ■■ 2 basic units: POINTS and PICAS ■■ 12 points = 1 pica ■■ 6 picas = 1 inch ■■ 1p6 = 1 pica + 6 points FACTORS TO CONSIDER—Choosing a point size ■■ Typeface proportions and sizes ■■ Length of text ■■ Format for viewing ■■ Audience/Reader of the text ■■ Content of the text SCREEN vs PRINT—A whole different game ■■ Body text point size should be larger when the text will be read on a screen versus when read on print.
34
Lecture Notes
WORKHORSE TYPEFACE—Doing all the work ■■ Good regular height ■■ Robust proportions ■■ Bold/Italic ■■ Legible numerals ■■ Economy: narrow enough to fit large amounts of copy into the available space. HELPFUL TIPS—Have better-looking type ■■ Kern type at display sizes ■■ Customize leading (120–145% of the point size) ■■ Pay attention to line length (too wide/too narrow) LINE LENGTH—An optimal use ■■ 45–90 characters per line ■■ 2–3 lowercase alphabets ■■ 8–13 words per line LETTERSPACING—Some things just need space ■■ Adjust tracking with care (too loose/too compact) ■■ Try not to go below -10 tracking. SMALL CAPS—Spot the fakers ■■ Only use TRUE small caps.
Typography II Journal
35
DASHES—You better know them ■■ - Hyphen ■■ – En-dash ■■ — Em-dash HYPHENATION SETTINGS—Set them up right ■■ Hyphenate words with at least—6 LETTERS ■■ Hyphen after first—3 LETTERS ■■ Hyphen before last—3 LETTERS ■■ Hyphen limit—2 HYPHENS QUOTATION MARKS—Choose wisely ■■ “ ‘ Smart quotes ■■ " ' Dumb quotes ■■ ″ ′ Prime marks PARAGRAPH RAGS—Sand them down ■■ Fix ragged paragraphs as best as possible, when practical. WIDOWS—Avoid them ■■ Can be fixed with tracking ORPHANS—Avoid orphans ■■ Fix the short segments of paragraphs stranded at the bottom or top of a column. SPELLING—Better safe, than sorry ■■ Turn on dynamic spelling in InDesign settings. ■■ Check your own spelling (cmnd + i)
36
Lecture Notes
Choosing Typefaces and Understanding Fonts. CONSIDER—When choosing a font ■■ The content the font will be used for. ■■ The audience that will be reading the content. ■■ The format/context that the content will be set in. CONSIDER—These technical factors ■■ Does the font have a complete character set? ■■ Does the font have foreign accented characters and glyphs? ■■ Does the font have multiple weights and styles? ■■ Does the font have small caps? ■■ Does the font have lining and old style numerals? ■■ What is the file format of the font? ■■ Does the font have a web-use version? ■■
■■
Buying a font means you purchase a license to use that font. Make sure you establish how/when/why you can use a font you purchase.
Typography II Journal
37
Typesetting in InDesign. Tools and Techniques. ■■
Control and customize your typography by using styles. Using styles will save time by automating your text formatting.
PARAGRAPH STYLES—Styling paragraphs and ■■ Leading, tabs, indents, space before and after, hyphenation and justification settings, rules above and below. ■■ Paragraph Styles are the most common styles in your InDesign document. CHARACTER STYLES—Styling text within paragraphs ■■ Bold text, italic text, run-in subheads, custom bullets or numbers.
38
Lecture Notes
TABLE STYLES—Styling tables within your document. ■■ Outside border, dividing lines, space above and below, fills of fields within the table. ■■ Tables are a great tool for positioning text. The table itself can be invisible. CELL STYLES—Styling individual cells within tables ■■ Borders around the cell, text positioning in the cell, style of text in the cell, fill color of the cell, crossing-out cells. OBJECT STYLES—Consistent styling for graphic elements ■■ Using styles boosts efficiency and impress your friends.
Typography II Journal
39
Typography on Screen. ATTRIBUTES TO CONSIDER—Choosing screen type ■■ Typeface contrast; weight in the typeface that affects legibility. ■■ X-Height; higher x-heights are ideal for use in interfaces or wayfinding. ■■ Beware of Extremes; characteristics of type can cause issues if they’re too distinct. ■■ Character Distinction; on screen legibility is essential for clear design. ■■ Special Characters; having a variety of different characters allows for a more flexible design. ■■ Small Caps and Ligatures; use real small caps and real ligatures to maintain consistent typography. ■■ Optical Sizes; typefaces with differing designs allow for different stylings for different types of content. ■■ Finding Alternatives; classic typefaces may become so overused that finding newer, less used typefaces can freshen up a design.
40
Lecture Notes
STRATEGIES—Pairing typefaces ■■ Look for distinctions and pair typefaces that look visually different. ■■ Take advantage of display type by pairing it with text faces. ■■ Find typefaces with inherent visual relationships in their structure to create harmony between your typefaces. ■■ Some typefaces have both serif and sans serif versions, and both are typically built on the same structure. ■■ Choose a typeface and build upon it to make it give off a different visual appeal. Then, try something different with a contrasting typeface. ■■
Evaluate typefaces critically. Learn to trust your instincts. Experiment.
Typography II Journal
41
Exercise Anal
lysis.
Legibility and Readability Study. Study Analysis: ■■
■■
■■
■■
44
9 point size with 13 leading looks like a solid standard for body text with any typeface. Some typefaces are better for body text than others. Serif typefaces with high contrast in weight are typically bad for body text due to how hard they are to read when at the small size body text is typically set at. Sans Serif typefaces seem to be the easiest to typeset due to how consistent their weights are. Serif typefaces, however, are more distinct, and because of this, the letterforms are more recognizable and allow the reader to distinguish each letterform and thus read each word faster. Smaller point sizes make the text lighter on the page and harder to read due to how small the type is. Larger point sizes add visual weight to the type. An Increase in leading gives the type more breathing room, but too much could result in gaps and holes between the lines of text that make the reader have a harder time reading the text. Smaller leading settings constrict the lines of text, which could also make the text harder to read, and when the leading Exercise Analysis
■■
■■
is too small, the lines of text begin to run into each other with their ascenders and descenders. With the given column width of 20 picas, the best-looking point size and leading seems to be 9/13. The line length will tend to have 8-10 words per line on average, which is close to standard. Additionally, it is easier to read this text in a sans serif due to its consistent weight and proportions. The worst combination of point size and leading with the 20-pica column width would have to be 9/12, 9/15, or 10/13 with regards to the point-size to leading ratio. 9/12 looks tight and compact, while 9/15 looks too loose to read. 10/13 looks too big in point size, and the leading isn’t big enough to compensate for how big the text looks at 10 points.
Typography II Journal
45
Grid Analysis Study. Study Analysis: ■■
■■
■■
46
Both the spreads follow a similar 7 column grid. The body text of the spreads is organized into 2 columns, each 3 columns wide and headers and quotes span 4 columns across. The left page of both spreads has the body text start on the second column and the right side of the second spread starts the body text on the first column. The smallest of the columns (the pull quote/caption on the left side of the right page on spread 1) is the smallest unit of measurement that builds up the other columns in the spreads. Each column of body text is 3 times the width of the small pull quote/caption column. Together, each page is built on a 7-column grid where 6 of the 7 columns create 3 columns of body text, and then the last column is used for either negative space or caption space. also, there are larger fields of text used for titles and headers that are built up by 4 of the 7 columns of the underlying grid. The grid is clearly comprised of columns. Everything is lined up vertically with the underlying 7-column grid.
Exercise Analysis
■■
■■
The image on Spread 1 spans across all columns along the top of the page. The image lines up with the inside margin of the page which lines up with the body text and the header on that page. The image on Spread 2 falls into 3 columns and lines up with one of the columns of the body text. The only elements that break the grid are images where they bleed off the page (right page on spread 1) and graphic elements that bleed off the page (spread 2).
Typography II Journal
47
Projects.
Typesetting. Rules of Typography. Project Objectives: ■■
■■ ■■
■■
To research scholarly articles and books about typography. To compile a list of research findings. To establish information hierarchy in the design and layout of at least five quotes about typography. To consider legibility and readability when selecting typefaces.
Typography II Journal
51
DRAFT #1—Feeling choked ■■ Layout of quotes is too random and nonsensical. ■■ Graphic elements are taking up too much of the negative space ■■ Graphic elements are choking the content ■■ Graphic quotation marks are unnecessary and distracting. 52
Projects
FINAL DRAFT—Fresh breath ■■ Graphic elements no longer inturrupt the flow of the content. ■■ Addition of more negative space helps the design breathe ■■ Layout of quotes are happier in an organized fashion. ■■ Flow of graphic elements creates visual texture directing vision. Typography II Journal
53
A Dialogue. Project Objectives: ■■
■■
■■
To use typography to create a distinction between two different voices. To consider content when making decisions about typeface selection and imagery. To demonstrate an understandingof good typographic practice whensetting text.
Typography II Journal
55
DRAFT #1—Unifinished, unadventurous ■■ Layout is too expected and standard. ■■ Huge lack of risks taken to make a stunning layout.
DRAFT #2—Progress ■■ Layout is better and uses text in an interesting way. ■■ More risk by not using any imagery throughout layout. ■■ Lack’s final text layouts. 56
Projects
FINAL DRAFT—Nice turn of events ■■ Text fits between letterforms in an appealing way. ■■ Layout managaes to express itself without the use of imagery. ■■ might still need some more refinement, but the result is different from other past projects. Great sense of experimentation. Typography II Journal
57
Elements of Style Booklet. Project Objectives: ■■
■■ ■■ ■■
■■
To develop a grid structure that ensures consistency in a multiple page document. To design a saddle stitched publication. To properly apply paragraph and character styles. To use typographic techniques to establish hierarchy and clarity in a given text. To evaluate each other’s work and modify one’s design based on the strongest solution.
Typography II Journal
59
60
Projects
FINAL DRAFT (SOLO)—On left page ■■ Cover pattern doesn’t exactly synergize with the choice in typeface, but it does contrast well. ■■ Cover design could be more striking and experimental.
FINAL DRAFT (GROUP)—On right page ■■ Covers work well together, but fall short of creativity. Style, as a result, is elegant and simple. Can benefit from experimentation.
Typography II Journal
61
Type Zine. Project Objectives: ■■
■■ ■■ ■■
■■
■■
To collaborate on the planning and creation of a magazine. To develop typography that is informed by content. To improve and refine typographic techniques. To increase understanding of page layout, the importance of 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.
Typography II Journal
63
64
Projects
FINAL DRAFT—Consistent theme ■■ spreads have a good, even amount of text on each spread. ■■ Images and text are evenly balanced throughout spreads. ■■ Some spreads could be more developed in terms of layout and execution with text and image treatments. ■■ Cover lacks visual interest.
Typography II Journal
65
Colophon JOURNAL—Designed by Trey Cahalan TYPEFACES USED—Include: ■■ Proxima Nova ■■ Higher Content gathered and designed by Trey Cahalan during his 2017 winter quarter at California Polytechnic State University, San Luis Obispo.