338.03 Type Journal by Joanne Mendoza by Joanne Mendoza

TYPOGRAPHY

VOL 1, WINTER 2017

2 2 Typography II

INTRODUCTION Typography is power. And with great power comes great responsibility. This journal is intended to document important things our class has read and discussed this quarter in Typography II. It includes an overview of what we have valuable information covered through the ten week course, from lectures to readings to projects. Because we have learned so much, I only wanted to include bits of information that I found particu larly interesting or things that I haven’t gotten com pletely down which I’ll want to make reference to in the future. This journal is a valuable resource, and I invite you to take a look into some of the typographic techniques and lessons I have learned though out the course.

SECT

CLASS R

TION

READINGS

BUTTERICKâ&#x20AC;&#x2122;S PRACTICAL TYPOGRAPHY

5 SIMPLE RULES TO FOLLOW

01 02 03 04 05

START EVERY PROJECT WITH DESIGNING THE BODY TEXT

KEEP AN EYE ON POINT SIZE

• Print size = 10–12 point • Web size = 12–25 pixels (or 14+ point) DON’T STICK WITH DEFAULT LEADING

• Should be about 120%–145% of point size • Default option is always too small FIND THE RIGHT LINE LENGTH

• Should average of 45–90 characters per line • OR 8–13 words per line FONT CHOICE IS IMPORTANT

• Ignore fonts that came with your computer

OTHER KEY RULES

• All caps are fine for less than one line of text • Use 5–12% extra letter spacing with all caps and small caps • 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.

Typography II

TYPE COMPOSITION PARENTHESIS, BRACKETS, AND BRACES

• These marks shouldn’t adopt the formatting of the surrounding material • Sometimes, an italic character will collide with pa renthesis; in this case it is fine to italicize • Kerning only works with characters with the same font weight, size, and style ELLIPSIS

• An ellipsis is a sequence of three dots used to indicate an omission in quoted material • Do you use word spaces with ellipsis? • It up to you; typically you’ll want spaces, but if it looks weird then don’t do it, fam FOOT AND INCH MARKS

• Not curly—use straight quotes

MATH SYMBOLS

• Use en dash as a minus sign • There’s a glyph for the multiplication symbol; don’t use an x

Typography II

TEXT FORMATTING DISTINCTION

• If you want to differentiate hierarchy, make sure its actu ally distinct or looks different • Real distinction or no distinction • Bold stands out more than italic • Use all caps with digression • All caps and small caps may need extra tracking • Underlining makes text harder to read • Subtle changes in style can make the difference to make things easier to digest DETAILS

• With kerning, want to set to metrics (what the typogra pher; math that they set to set the text apart) • Body text in printed documents must always be set in black • You should think about the background color too • If possible, spell it out (“second” vs 2nd) • Hyphenation becomes more necessary in short lines and justified text • Monospace fonts are harder to read—awkward spacing • Deactivate bad system fonts

Typography II

WHY TYPOGRAPHY MATTERS TYPE FOR THE READER

• Reader attention is one’s most valuable resource; good typography helps keep attention on the content • Nonverbal communication counts. Others draw in ferences about us not just based on what we say, but how we say it • Typography is for the benefit of the reader, so keep that in mind when designing your work • Try to look at the type as your readers will • “Typography has to be oriented to your actual readers, not idealized ones.” EFFECTIVE TYPOGRAPHY

• Good type is measured by how well it reinforces the meaning of the text • For a given text, there are many typographic solu tions that would be equally good. • Your ability to produce good typography de pends on how well you understand the goals of your text, not on taste or visual training.

Typography II

“

Good typography is

measured by how well it reinforces the meaning

of the text, not by some abstract scale of merit.” —M. Butterick

OTHER READINGS: THOUGHTS & NOTES

FAMILY PLANNING

This reading was about the evolution of type families through out history. Even in the 1500s, Garamond’s typeface included various versions of the type created for different sizes. Nowadays with technology, it is much easier to create more variation. When designing a typeface, one needs to make sure to keep in mind consistency within the letters, so all of the vari ations look related. UNETHICAL DOWNLOADING

Steven Heller’s article “Typographica Mea Culpa, Unethical Downloading” was a really interesting read because he discusses downloading, keeping, and sharing typefaces that one has not legally obtained access to. Its funny that such a great designer openly admits that he has done these things in the past. • All typefaces are licensed for specific purposes • Make sure you know what you’ve purchased • Some free fonts are not free for commercial use • Fonts are pieces of intellectual property • It may help to think that buying typefaces are part of professional expenses MY TYPE DESIGN PHILOSOPHY

This article, by type designer Martin Majoor, went over a variety of topics, from mixing fonts—serif and sans serif— to typefaces throughout history and the individuals who helped create them.

Typography II

A VIEW OF LATIN TYPOGRAPHY

Written by Peter Biľak, “A View of Latin Typography in Relationship to the World” goes over eurocentric typog raphy and how non-eurocentric types are affected by it. When reading this, I never really thought about how terms like roman and italics might be “inappropriate for typefaces which didn’t evolve in Western Europe”. LAVA—VOICE OF A MAGAZINE

In Peter Bil’ak’s reading, Bil’ak talks about the typeface he designed for a magazine. Because the type was going to have to be used on print as well as on screen, one of the things he kept in mind when creating the type was to design something which would “perform optimally in both highand low-resolution environments”. THE FIRST THING I EVER DESIGNED

I really enjoyed this Madeleine Morley reading because it relates to the Zine project we are working on. I appreciated the amount of amount of detail and care Morely put into each of the magazines she created—a reader could tell eas ily by the images shown as well as the passion in how she described the process. BEAUTY AND UGLINESS IN TYPE DESIGN

This article by Peter Bil’ak goes over the process of design ing the typeface Karloff. He talks about beautiful type, using Bodoni as an example, as well as uglier type like “Italian”. The Karloff typeface acted as the hybrid between the two fonts, utilizing characteristics from both the beauty and the beast.

Typography II

AN IDEA OF A TYPEFACE

Kai Bernau’s article was super interesting; it talked about how the neutrality of a typeface would affect how the reader engages with the text. While I was going through this read ing I kept thinking back on when we had to watch Helvetica and how, because it was so neutral, so many people choose to use it. 7 STRIKING DESIGN PAIRINGS

This article was really cool because the bulk of the content was imagery. It’s funny seeing similarities between different pieces of design which were created so many years apart. A TYPEFACE DESIGNED TO REVIVE THE ENDANGERED CHEROKEE LANGUAGE

I thought it was cool that the Cherokee language created their symbols based on syllabus, not letters. Reading about designing a typeface for a completely different language was interesting to see because it’s not something we learn about every day.

Typography II

SECT

2 2 CLASS L

TION

2 2

ECTURES

TYPOGRAPHIC REFINEMENT POINTS AND PICAS

• 12 points in 1 pica • 6 picas in one inch • Measurements written like 1p6 (to say 1 pica + 6 points) HOW DO YOU CHOOSE A POINT SIZE?

• Typeface proportions and weight • Length of text • Format for viewing (paper or screen?) • Audience/reader of the text • Content of the text HOW DO YOU FIND A WORKHORSE TYPEFACE?

• Find type with a good regular weight • Robust proportions • At least one bold weight • Make sure it has noticeable contrast • An italics version • Economy: narrow enough to fit large amounts of copy into the available space

Typography II

LETTER SPACING

• If letters are too close together, the text is hard to read • Adjust tracking with care • Type set in small caps/ all caps need more letter spacing • Do not style text as “small caps” • Only use it if the type has an actual small caps style KNOW YOUR DASHES!

• Hyphen—if a word is too long for a column • Em dash—used for break in the flow of a sentence • En dash—used for duration CUSTOMIZE HYPHENATION

• 6, 3, 3, 2

Typography II

FIX RAGS WHEN YOU CAN

• Use soft returns, hyphens, or tracking • Don’t adjust tracking to anything less than -10 • Avoid having widows and orphans • Widows: when the last line of a paragraph is too short • Orphans: short segments of a paragraph at the top or bottom of a column • Can fix by adjusting column height SCREEN VS PRINT

• Body text is usually smaller at 9 to 12pt • Text on screen should be bigger at 14pt+ HOW TO MAKE YOUR TYPE BETTER

• Kern at display sizes • Customize leading (120%–145% of point size) TURN ON DYNAMIC SPELLING

• Command + i

Typography II

CHOOSING TYPEFACES WHEN CHOOSING TYPEFACES, CONSIDER...

• Content and length of text • Audience age and demographic • Size of page/screen • Does the typeface have the full character set with all punctuation and glyphs? • Multiple weights/ styles? • What kind of numerals does it have? (Lining? old style?)

FONT OPINIONS: WHAT NOT TO USE

• Avoid using Arial • Times New Roman = apathetic font because it’s the default • Minon = an apathetic, generic typeface; don’t use it because you can find better options • Myriad = hard to use because used by Apple, so linked with Apple computers and ad campaigns

Typography II

$$$ WHY ARE TYPEFACES SO EXPENSIVE?? MAKING A FONT IS REALLY COMPLEX

• May take a long time to develop • May take a lot of people, large teams FONTS AND LICENSES

• A font license grants the owner the right to use a typeface in a specific manner as outlined in the license. QUESTIONS TO ASK ABOUT FONT LICENSES

• Can I use this for commercial work? • How much $$$$$ does it cost? • Online use only? Or print use only? Both?

Typography II

WHERE TO GET FONTS GOOGLE FONTS

• Has some free fonts for print and web ART DEPARTMENT

• (Technically, only supposed to use it as students *cough cough*) LOST TYPE CO-OP

• Pay what you want type foundry LEAGUE OF MOVABLE TYPE

• Provides well-made, free, open-source, fonts FONT SQUIRREL

• 100% free for commercial use • Some of the fonts are janky FONTSPRING

• All of the fonts can be used for commercial projects HOUSE INDUSTRIES

• Not where you will find a good deal,but nice retro fonts • Spending money out the wazzoo MY FONTS

• Really good deals and frequent special offers

Typography II

HOW TO INSTALL NEW FONTS AND WHERE DO THEY LIVE? GET A FONT MANAGER, MAN.

• Helps you organize your typefaces FONT BOOK

• Free and pretty easy to use • Resolves font conflicts • Can create font sets FONTEXPLORER X PRO

• $$$$$$$ SUITCASE FUSION 6

• $$$$$$$ • In general, you want to have the minimum number of fonts installed • You can turn the font files off, but don’t delete it • Use sets to keep fonts organized and categorized • Love your fonts. Know where they came from. Take care of them.

Typography II

TYPE ON SCREEN DIFFERENT FROM PRINTED TYPE

• Type has to be bigger,also meaning more leading • Proportions just have to be bigger • Make sure to make it legible/readable from farther away • Always test to see if it works IMPORTANT POINTS TO LOOK AT

• Contrast between thick and thin strokes makes a differ ence with readability • For body text, avoid high contrast • A high x-height is ideal, but not too high or it won’t have enough distinction between characters • Look at the overall proportions • Special characters • Mostly if downloading free fonts—a lot don’t have full set of proper special characters • At the very least, you need to have punctuation • Small caps+ligatures • Use the real stuff, please • Finding alternatives • Look for fonts that aren’t so generic • Classic typefaces are sometimes so overused that they look like generic fonts..boooo • “I tend to avoid Helvetica. It has a lot of baggage”—CM

Typography II

STRATEGIES FOR PAIRING TYPEFACES

• Look at the type of content, want to differentiate one type of content to another • Look for distinction • Avoid typefaces that are too similar • Pair display and text faces • Take advantage of display type • Also, take something that you wouldn’t normally use and go to maybe extreme weights and put those in • “Except for gill sans, which is ugly” –CM • Look for Harmony • Find typeface with inherent visual relationships in their structure • Use a family • Pick a typeface w a serif and a sanserif • Good because they’re built with the same skeleton • Build outward • Lock in one typeface and build upon it • Choose body text first • If everything is open, you don’t really know what to do

Typography II

THINGS TO REMEMBER: • With the type that you choose, you are giving a message to the viewer • Make sure that it reinforces the meaning of the text • Everyone comes in with god awful typeface taste • You kind of learn what’s good and bad • Eventually you gotta learn to trust your instincts • Truuuust yourself

Typography II

SECT

3 3

CLASS P

TION

3 3

PROJECTS

EXERCISE 1: LEGIBILITY PROJECT DESCRIPTION

In this exercise, you will investigate and analyze text set in paragraph form (“body text” or “text blocks”). Using serif and sans serif text typefaces, you will cre ate different versions of those settings by altering the leading and point size. EXERCISE NOTES

This was a relatively easy assignment and really help ful to see how different point sizes and leading affect readability of body text. HOWEVER— For some reason I had a really hard time with this assignment. The instructions were really specific and clear, but for some reason I found myself taking for ever on it because all of the text boxes weren’t fitting on the page. It wasn’t until much later that I realized that 6p and p6 (concerning the paragraph label placement) are very different. Next time I won’t skim the instructions so quickly.

Typography II

Serif Without typography, one could argue, messages will still be legible, but if one really wants to communicate rather than simply display a heap of alphanumeric data, some consideration would be helpful. Paul Watzlawick’s first axiom of communication—“one cannot not communicate”—puts it very succinctly. If you fail to consider the effect of your message on the recipient, you may inadvertently communicate that you do not care how your message may be received. CASLON PRO, 9/13

Sans Serif Without typography, one could argue, messages will still be legible, but if one really wants to communicate rather than simply display a heap of alphanumeric data, some consideration would be helpful. Paul Watzlawick’s first axiom of communication—“one cannot not communicate”— puts it very succinctly. If you fail to consider the effect of your message on the recipient, you may inadvertently communicate that you do not care how your message may be received. AVENIR, 9/13

Without typography, one could argue, messages will still be legible, but if one really wants to communicate rather than simply display a heap of alphanumeric data, some consideration would be helpful. Paul Watzlawick’s first axiom of communication—“one cannot not communicate”—puts it very succinctly. If you fail to consider the effect of your message on the recipient, you may inadvertently communicate that you do not care how your message may be received. CASLON PRO, 9/12

Without typography, one could argue, messages will still be

Without typography, one could argue, messages will still be legible, but if one really wants to communicate rather than simply display a heap of alphanumeric data, some consideration would be helpful. Paul Watzlawick’s first axiom of communication—“one cannot not communicate”— puts it very succinctly. If you fail to consider the effect of your message on the recipient, you may inadvertently communicate that you do not care how your message may be received. AVENIR, 9/12

legible, but if one really wants to communicate rather than

Without typography, one could argue, messages will still

would be helpful. Paul Watzlawick’s first axiom of communica-

than simply display a heap of alphanumeric data, some

If you fail to consider the effect of your message on the recipient,

om of communication—“one cannot not communicate”—

your message may be received.

of your message on the recipient, you may inadvertently

simply display a heap of alphanumeric data, some consideration

be legible, but if one really wants to communicate rather

tion—“one cannot not communicate”—puts it very succinctly.

consideration would be helpful. Paul Watzlawick’s first axi-

you may inadvertently communicate that you do not care how

puts it very succinctly. If you fail to consider the effect

CASLON PRO, 9/14

communicate that you do not care how your message may be received. AVENIR, 9/14

Without typography, one could argue, messages will still be legible, but if one really wants to communicate rather than

simply display a heap of alphanumeric data, some consideration

Without typography, one could argue, messages will still

tion—“one cannot not communicate”—puts it very succinctly.

than simply display a heap of alphanumeric data, some

you may inadvertently communicate that you do not care how

om of communication—“one cannot not communicate”—

would be helpful. Paul Watzlawick’s first axiom of communica-

be legible, but if one really wants to communicate rather

If you fail to consider the effect of your message on the recipient,

consideration would be helpful. Paul Watzlawick’s first axi-

your message may be received.

puts it very succinctly. If you fail to consider the effect

CASLON PRO, 9/15

of your message on the recipient, you may inadvertently communicate that you do not care how your message may be received. AVENIR, 9/15

Without typography, one could argue, messages will still be legible, but if one really wants to communicate rather than simply display a

heap of alphanumeric data, some consideration would be helpful. Paul

Watzlawick’s first axiom of communication—“one cannot not commu-

Without typography, one could argue, messages will still be

message on the recipient, you may inadvertently communicate that you

display a heap of alphanumeric data, some consideration would

nicate”—puts it very succinctly. If you fail to consider the effect of your

legible, but if one really wants to communicate rather than simply

do not care how your message may be received.

be helpful. Paul Watzlawick’s first axiom of communication—

CASLON PRO, 8/13

fail to consider the effect of your message on the recipient,

“one cannot not communicate”—puts it very succinctly. If you you may inadvertently communicate that you do not care how your message may be received.

Without typography, one could argue, messages will still be legible, but if one really wants to communicate rather than simply display a heap of alphanumeric data, some consideration would be helpful. Paul Watzlawick’s first axiom of communication—“one cannot not communicate”— puts it very succinctly. If you fail to consider the effect of your message on the recipient, you may inadvertently communicate that you do not care how your message may be received. GARAMOND, 10/13

AVENIR, 8/13

Joanne Mendoza

EXERCISE 2: GRID ANALYSIS PROJECT DESCRIPTION

In this exercise, you will work in a team to analyze magazine layout grids. Write an analysis of how a grid is being used to orga nized elements on the page. Consider the following: • Is there a relationship between the grids of the two different layouts? • Is there a mathematical relationship between the different columns on the page? • Do you think the grid is comprised of columns or modules? • How do images relate to the grid? • Do any elements break the grid? EXERCISE NOTES

I liked looking at published magazines and seeing how they experimented and used the grid to their advantage. I probably should take a look at pub lished, print magazines for inspiration to supplement the inspiration I find on the web.

Typography II

PROJECT 1: TYPESETTING PROJECT DESCRIPTION

For this project, you will research and document as many rules, ideas, or principles about typography as possible. Your findings must be typeset on one side of an 8.5in × 11in piece of paper. A minimum of five examples must be presented on the page. Each entry must come from a different source, and each student must do their best to have unique entries. You must credit the author as well as the source, including the page number on which it appeared and the year it was published. Books and scholarly articles must be used as your primary reference, not the Internet. Consideration should be given to the typesetting and design of the page. CRITIQUE NOTES

• Be careful with the amount of styles you implement • Too many styles in one document can be overwhelming • Helvetica is overused • Be mindful of which quotes/words you choose to highlight • Not the biggest fan of this project

Typography II

PROJECT 2: A DIALOGUE PROJECT DESCRIPTION

Using the dialogue provided, you will design a diptych that utilizes all of the text and emphasizes the fact that there is more than one voice. Please consider all your choices and decisions carefully. Everything matters. Think about and utilize typographic hier archy. You can use color, and images to help support your design, but care must be taken to make sure your typogra phy is intentional and refined. Think about how all of the typographic elements influence our interpretation of the text and how you, as a designer, can influence the viewer’s reading of the text. CRITIQUE NOTES

• Remember that even if you have a grid in place/ estab lished, doesn’t mean that it has to be boxy • Layout more dynamic if you know when to break the grid • Adds more compositional interest • Grid is there for a foundation • Experiment with images breaking across the spread • Sometimes, you can treat type like images,—know when/ when not to break the grid • Since this is an interview, even though it’s not in the re quired text, it is good to put a small introduction to at least give context to the content of the dialogue

Typography II

PROJECT 3: THE ELEMENTS OF STYLE PROJECT DESCRIPTION

The Elements of Style is a classic reference book about grammar for students and conscientious writers. The focus of the book is on composition, the effective use of plain English, and the principles of composition most commonly violated. The text is full of examples and comparisons, which necessitates the effective use of indents and shifts in typo graphic style. The text, originally written in 1918, is quirky and, many times, archaic. Your job is to develop a design that would appeal to high school and college-aged stu dents. We will be breaking up the text into smaller sections, and each student will be assigned a portion of the text to be used in the creation of a small reference booklet. The sec ond phase of the project will require you to work in teams to create a single related series of booklets. CRITIQUE NOTES—DON’TS

• Boring cover • Lack of clear information hierarchy • Too many shifts in text weight • Poor spacing within elements • Small margins • Use of strike through text • Inconsistent text styling • Cover not being the same size as the page

Typography II

THE INDIVIDUAL BOOKLET

For the first part of this projÂ ect, before getting into groups, each of us students had to individually design one book out of the set of three. Here we could design freely, just based on what we wanted. However, later on after creating our individual

Typography II

PROJECT 4:TYPE ZINE PROJECT DESCRIPTION

In this project, you will be creating a digital magazine. The theme of the magazine is: Typography, Design, Activism and Social Justice (this is the theme, not the title). Students in the class will be responsible for collecting and creating all the assets for the magazine, including: text, illustrations, and photographs. All found images and text (articles, interviews, etc.) must be properly credited. Include author bylines and captions for all images. INTERIM CRITIQUE NOTES

• What can you add in terms of design elements vs typog raphy to break up text elements? • Instead of just putting “title” when you’re doing sketches, put the actual phrase so that you have a better idea of what it will be • Find a way to tie everything together so it looks cohesive • Have a variety of image sizes PRESENTATION CRITIQUE NOTES

• Plan out what you are going to say • Talk about concepts • The WHY or the meaning of things • People can already see what you are showing • Don’t talk about the struggle • Your client doesn’t care how hard it was

Typography II

INITIAL SPREAD VARIATIONS…BORING. The initial stages of this project were really difficult for me because for some reason, no matter how long I tried mak ing variations, all of my spreads looked really similar and really boring. I started out with keeping everything in the grid, then I experimented with breaking the grid with over lapping pictures. Eventually I started going craaaaaaazy and tried playing with the size of the type and graphic elements, making larger strides in with my variations in spreads. Shout out to Charmaine for giving me that extra push I needed. “GO TO MEXICO!”

Typography II

JOANNE MENDOZA AVENIR NEXT & BRIM NARROW MARCH 2017

Typography II