UBIQUITOUS TYPOGRAPHY
Winter 2017/338.03 Winter Journal
1
2
Typography II
Introduction Typography 2 sparked my creativity and fueled my experiments. For the first time, I’ve explored designing dialogue, magazines, and booklets. I’ve discovered the challenge of harmonizing multiple components by the means of typography throughout separate booklets and multiple magazine spreads. I’ve become convinced that a layout grid is absolutely necessary, and without one, hope is lost for consistency and structure. I’ve used this class to immerse myself into design like I have never done before, realizing the importance of being a thought-provoking designer and breaking the rules in the hopes of finding personality in design. This journal in no way encompasses the entirety of what the typography world has to offer. It tells a small fraction of something much larger. Something that never ceases to amaze me is the transition a designer makes from seeing the world around them through ignorance to seeing the world through a typographic magnifying glass. Typography remains to be as ubiquitous as the air you breathe. This journal shows a snippet of my typographic journey in the winter quarter of 2017.
Winter Journal
3
Lecture & Reading N
4
Typography II
& Notes
1
Winter Journal
5
Matthew Butterick’s Practical KEY POINTS: • Body text is the largest aspect of your design. Start there and develop your body text before anything else. • Body text size should be 10–12 points for print and 15–25 pixels for web, but adjust for different typefaces. • Line spacing should be 120%–145% of the point size. • Line length should be an average of 45–90 characters or 8–13 words per line. Page margins help achieve this. • Choose the correct fonts to go with your style, using default font is boring. • Using straight quotation marks is lame, so make sure you use the curly ones. • BUT, for measurement marks, use straight marks, not curly quotations.
“The four most ument are poin 6
Typography II
l Typography • Don’t use more than one space between words and sentences. • Don’t underline unless it is a hyper-link. • Centered text should be used sparingly. • All caps work for text on single lines and add 5–12% more letter spacing. • If you don’t have real small caps, don’t even think about it. • Separate paragraphs by using first-line indents that are one to four times the point size of the text, or by using 4–10 points of space between paragraphs.
important typographic elements of a docnt size, line spacing, line length, and font.” Winter Journal
7
Butterick’s Practical Typography
PAGE LAYOUT • Use centered text for short phrases or titles. • Hyphenation should be used for justified text. • Hyphenation helps fix line lengths, improving the rags of the left aligned text. As line length gets shorter, hyphenation becomes essential. • Block quotations: Reduce the point size and line spacing. Indent the text block between half an inch and a full inch on the left side. Make the side indents large enough to be noticed but not so large that the line length becomes too small. Don’t include quotation marks at the ends.
. . . .
• Don’t manually set your numbered and bulleted list. Use the automated settings • Tables are useful for spreadsheet-style grids of numbers or other data and for layouts where text needs to be positioned side-by-side or floating at specific locations on the page. Cell borders and cell margins should always be adjusted from the default options.
“Y L B 8
Typography II
PAGE LAYOUT MAXIMS 1. Decide on the look of the body text. 2. Divide the page into foreground and background. 3. Make adjustments with the smallest increments. 4. When in doubt, try it both ways. 5. Be consistent. 6. Relate each new element to existing elements. 7. Keep it simple. 8. Imitate what you like. 9. Don’t fear white space.
You draw a listener’s attention through contrast. Loudness is an effective form of contrast. But so is silence.” Winter Journal
9
Butterick’s Practical Typography
TYPE COMPOSITION • Straight quotes are the two generic vertical quotation marks located near the return key. 'straight single quote' "straight double quote" • Curly quotes are the quotation marks used in good typography. There are four types. ‘open/close single quotes’ “open/close double quotes” • The paragraph mark (¶) is used when citing documents with sequentially numbered paragraphs. The section mark (§) is used when citing documents with numbered or lettered sections. • Parentheses are for separating citations or other asides from the body text. Brackets show changes within quoted material. Braces—sometimes known as curly brackets—are not typically used except in technical and mathematical writing. • The hyphen is the smallest of these marks. It has three uses: at the end of a line when a word breaks into the next line, in multi-part words and in phrasal adjectives. topsy-turvy listener-supported radio
10
Typography II
• The en dash is used for two uses: to indicate a range of values and to denote a connection or contrast between pairs of words. pages 330–39 conservative –liberal split • The em dash (—) is used to make a break between parts of a sentence. Use it when a comma is too weak, but a colon, semicolon, or pair of parentheses is too strong. • Your keyboard includes a trademark symbol (™), a registered trademark symbol (®), and a copyright symbol (©). When you need these symbols, use them. • Ampersands are completely correct when they’re part of a proper name. Fromage & Cracotte Inc • An ellipsis is a sequence of three dots used to indicate an omission in quoted material.
Winter Journal
11
Typography Articles HOW TYPE FAMILIES WORK • New innovations in technology led to the creation of super-families. • Type families like United and Chronicle has over 100 fonts in the family. • Type was originally set by using different sizes of movable metal type • The idea of varying weights didn’t come into light until the mid-19th century • In the later 20th century, Adrian Frutiger shifted attention from the design of a single typeface to the design of a complete typeface system • In 1932, Jan van Krimpen was the first to combine two different typefaces into one family. • In 1977, Donald Knuth conceived a programming language, Metafont, which defined the shapes of letter-forms with powerful geometric equations.
12
Typography II
• Metafont made it possible to change a single input parameter for a typeface (optical size, angle of slant, size of serif) and have it be consistent throughout the entire font. • Gerrit Noordzij taught writing and type design at the Royal Academy of Arts in the Hague. He described typeface production in three ways: translation, expansion, and rotation. USING LAYOUT GRIDS EFFECTIVELY • Using a grid layout helps the harmony and consistency throughout your designs. • Make sure the layout grid compensates for the type of book binding that is used. TYPOGRAPHICA MEA CULPA, UNETHICAL DOWNLOADING • If you buy a font, don’t hand it out to everyone around you. • Typeface licenses are meant for a limited number of CPUS and limited uses (web, print, etc). • You can get into big trouble if you misuse the license that you purchased for a typeface.
Winter Journal
13
Typography Articles
LAVA — VOICE OF A MAGAZINE • Typeface designed to work well on both digital and print versions of a magazine. • Also would be on e-book; the typeface would be the only unifying element • Lava would perform optimally on high and low-resolution platforms. • Lava reference Times New Roman and Georgia for their on-screen legibility. • Lava was designed for magazine use. GRATUITOUS TYPE MAGAZINE • started by Elana Schlenker • “felt that the U.S. lacked a graphic design-focused magazine with a more international perspective and aesthetic. I thought I could offer something different, which would also provide me with an outlet to explore my own ideas in editorial design.” • emphasize playfulness over dry editorial objectivity • white space and movement
14
Typography II
BEAUTY AND UGLINESS IN TYPE DESIGN • sought out to design a typeface that combines aspects of the ugliest and most beautiful typefaces • Bodoni and Didot widely considered classically beautiful for contrasting proportions • ‘Italian’ was picked as an ugly (unconventional, really) typeface. Doesn’t obey letterform convention • found that ugliness in type is dependent on where the contrasting thick and thin strokes are placed. When the thin/thick strokes of a font like didot are reversed, the result looks wrong. When they are averaged together, you get a very neutral result, like a medium weight of a slab serif typeface.
Winter Journal
15
Typography Articles
AN IDEA OF A TYPEFACE • Neutral was Kai Bernau’s graduation project. • An attempt to create a truly neutral typeface. • Neutrality is a construction that describes things that seem free of connotation to a specific group at a certain time. • Most neutral typefaces were deduced to be a grotesk typeface with a humanist twist. • Neutral’s proportions were averaged and adjusted based on grotesk typefaces. • Bernau acknowledges he was investigating neutrality from his own point of view, so the typeface was geared specifically to him. • We can at best approximate neutrality for a rough majority of viewers. GILL SANS • Preferred typeface of Penguin Books, the Church, the Railways, and the BBC. • Eric Gill developed the model for Gill Sans, Johnston, in 1916 for the London Underground.
16
Typography II
• Gill Sans has various formal issues compared to Johnston; x heights are too low, certain characters have lost character-defining terminal stroke details in medium weights. THE BUTTERFLY BALLOT • The butterfly ballot suffers from alignment issues that confuse the viewer and may have caused many voting errors. Clarity is one of the most important principles in typography. The butterfly ballot is an example of design that is illogical. REVIVING THE CHEROKEE TYPEFACE • In the summer of 2011, representatives of the Cherokee nation attended a typography conference to seek designers to create new contemporary typefaces for the Cherokee language that would be long-lasting but appealing to a young generation of tech-literate Cherokee.
Winter Journal
17
Projects: and Critiq
18
Typography II
2
Process que
Winter Journal
19
20
Typography II
Legibility Exercise
Winter Journal
21
Project One: Typography Quotes FIRST DRAFT
22
Typography II
FINAL DRAFT
PROJECT CRITIQUE: The downside of using such a bold highlighting style is that it makes the entire quote a little more difficult to read. Reducing the amount of highlighting would help readability.
Winter Journal
23
Project Two: A Hero’s Journey PROCESS
24
Typography II
CRITIQUE NOTES • Be cautious when playing with sush candy colors because of the possibility of vibrating edges. • The shading on the knot needs to be emphasized more in order to get the wrapping feeling. • Include “An Interview with Moyer and Campbell” so the audience knows what the poster is about.
Winter Journal
25
FINAL
26
Typography II
Winter Journal
27
Project Three: The Elements of Style PROCESS
28
Typography II
Winter Journal
29
FINAL
30
Typography II
Photos by Joanne Mendoza
Winter Journal
31
Project Four: Typography Zine PROCESS
32
Typography II
Winter Journal
33
CRITIQUE NOTES • Make sure every component is accounted for. • Look out for hyphenation • Look out for folios and captions • There should be clear hierarchy to the spreads • Develop some sort of theme or flow throughout the document • Consider aspects that could further the feeling you are going for in your magazine. • Use color to communicate harmony and flow. • First, layout the magazine all the way through not thinking of refining every piece. Finish it to a mediocre level, and then go in after and refine everything. • Choose good photos or fine good photos for the articles. • If possible, make the TOC interactive.
34
Typography II
FINAL
Winter Journal
35
36
Typography II
Winter Journal
37
Ubi Kim Typography 2 Final Journal Winter Quarter 2017 Typefaces: Bodoni and Futura
38
Typography II