Work in * Progress Type II Journal
* With sarcastic comments by yours truly * Work in Progress
1
Intro
*
Hello. This is my Type Journal. It is an accurate representation of my thought process. This journal is a compilation of lecture notes, reading notes, and critique notes from ART 338. Along with these notes, I have added my own genuine sarcastic comments and even threw in a few puns here and there. Because it’s my journal and I do what I want with it.
Tiffanie Tran
Table of Contents
4
*
* Work in Progress
* * *
6
Lecture Notes
12
Reading Notes
26
Projects
* Work in Progress
5
Lecture 6
*
* Work in Progress
Do you actually
e Notes learn stuff in Graphic Design? No, we just color all day. * Work in Progress
7
Typographic Refinement Point size ›› Measuring system for typography ›› 2 basic units: points and picas ›› 12 points=1 pica Factors to consider when choosing a typeface ›› Typeface proportions and weight ›› Length of text ›› Format of viewing ›› Audience/reader of text ›› Content of text A “workhorse” typeface has: ›› A good regular weight ›› Robust proportions ›› At least one bold weight with noticeable contrast ›› Italics ›› Very legible numbers ›› Good economy Other Stuff ›› Leading is usually 125–145% of the point size ›› Optimal line length is 8–13 words per line on average ›› Fix rags when practical ›› Avoid widows and orphans 8
* Work in Progress
*
I hate widows…
Choosing Typefaces and Understanding Fonts Design factors to consider: ›› Content: How long is the text? What is it about? ›› Audience: Age? Demographic? ›› Format/context: setting where it will be placed Technical factors to consider: ›› Multiple styles ›› Large family ›› Full character set When you buy a font, you get a license ›› Always read the license to be sure you can use it
*
Sometimes you just have to be
BOLD
Places to get fonts: ›› Google Fonts (free) ›› Font Squirrel (commercial use) ›› Font Spring (commercial use) ›› MyFonts (wide range of fonts) Other Stuff ›› Have the minimum number of fonts installed to keep it clean ›› Use sets to organize your fonts
* Work in Progress
9
Typography on Screen Attributes to consider when choosing type for the screen ›› TYPEFACE CONTRAST The amount of contrast between thick and thin strokes of characters in a typeface impacts legibility ›› X-HEIGHT When choosing a typeface for text, a high x-height is ideal, especially for use on interfaces or on wayfinding ›› BEWARE OF EXTREMES If the x-height is too high, there is less room for other distinctive characteristics. ›› CHARACTER DISTINCTION Differentiating between different characters is essential for on screen legibility ›› SPECIAL CHARACTERS Strive to use typefaces that support different types of numbers, correct punctuation, and special characters, especially if your text will be set in a variety of languages. ›› SMALL CAPS AND LIGATURES Use the real stuff
10
* Work in Progress
Strategies for pairing typefaces ›› LOOK FOR DISTINCTION Avoid pairing typefaces that are too similar ›› LOOK FOR HARMONY Find typefaces with inherent visual relationships in their structure ›› USE A FAMILY Some typefaces have both serif and sans serif versions, which are built on the same structure ›› BUILD OUTWARD Lock in one typeface and build upon it, then try something different Other Stuff ›› Evaluate typefaces critically ›› Learn to trust your instincts ›› Experiment ›› Look and see.
*
I’m not even sure if I got all the notes from the lectures…
* Work in Progress
11
Reading 12
*
* Work in Progress
g Notes Get to the point already. * Work in Progress
13
Butterick’s Practical Typography Typography in Ten Minutes, Summary of Key Rules, and Forward
Summary of the Summary of Key Rules ›› Main typographic choices: point size, line spacing, line length, and font ›› Point size is different for print vs. web. The most comfortable range for body text for print is 10–12 point, while 15–25 pixels is ideal for the web ›› The easiest, most visible improvement you can make is choosing the right typeface ›› Always use curly quotation marks ›› Use centered text, bold or italic as little as possible ›› Use proper punctuation marks
“If your argument is easy to follow, it will be a winning one.” — Erik Spiekermann 14
* Work in Progress
Butterick’s Practical Typography Why Typography Matters
The biggest issue with the Butterfly Ballot is the information is not clearly organized with the bubbles so it is very confusing which bubble is associated with which box. The hierarchy is also very minimal which makes it harder for people to read or even easy for them to misunderstand. The line length of Trixie’s resume is shorter, making it easier to read. Her resume also has more hierarchy which gives more distinction between levels of information. Trixie’s resume also does not use unnecessary flourishes in her resume, Violet’s resume has gray boxes around her headers and decorative bullet points. Beatrice Ward’s argument is that typography should be invisible; like the crystal goblet, the typography is the vessel that contains the wine, which should not hide the wine. Butterick disagrees with Ward and believes that the written word is a combination of both text and typography, so you can’t have one without the other; the typography is an important part of the text.
* Work in Progress
15
Butterick’s Practical Typography Type Composition Optional hyphens/soft hyphens ›› The optional hyphen marks where a word should be hyphenated. This is good for words that are not in the standard hyphenation dictionary such as jargon words or unusual proper names. White-space characters ›› Keyboard characters that put blank space between two points. There are six whitespace characters: word space, nonbreaking space, tab, hard line break, carriage return, and hard age break. Signature lines ›› a horizontal line aligned with adjacent text.
Text Formatting There’s so much more to typography than just choosing what font to use. Text formatting is everything that affects the appearance of the characters such as point size, letter spacing, kerning, or styles like bold or italic. There are no clear rules on what not to do when it comes to text formatting however there are some general ideas when it comes to point sizes, all caps, small caps, types of fonts and color.
16
* Work in Progress
Butterick’s Practical Typography Page Layout Page layout determines how the text will feel to the viewer when they look at the content on a page or spread. Some ways to think about how the text interacts with page includes centered or justified text, indents and tabs, margins, space above and below, line spacing and length, and columns.
Type composition was about picking the right characters. Text formatting was about the visual appearance of those characters. Page layout is about the positioning and relationship of text and other elements on the page.
* Work in Progress
17
Family Planning, or how type families work by Peter Bil’ak Type families of today benefit from typographic innovations from the past and build upon those innovations to make new typefaces. Technology allowed typographers to use different techniques like pantographic reproduction which scales a master drawing to many different sizes, or photocomposition and digital type which allows typographers to work from a single master design regardless of the size of the final application. Typefaces made between the 1960s–1990s almost entirely ignored optical sizes because photocomposition made it easier to scale typefaces to different sizes. A functional typeface family has many different styles that make it versatile and able to be used in a variety of ways. With that said, larger type families are good, however, if the family is too large, it becomes impractical to use all of the styles. Common guidelines that link members of a type family together include: optical size, weight, width, stylistic differences, and construction differences (formal and informal). 18
* Work in Progress
Using Layout Grids Effectively by Designer Insights Using a grid to organize your layout will allow you to repeat your look consistently and have visual harmony. It is important to pay attention to your binding method when designing a publication so you can adjust your grid to add gutters to accommodate the space. The Rule of Thirds, the Golden Ratio, and the Fibonacci Sequence are all good compositional tools for grid layouts.
7 Striking Design Pairings by Perrin Drumm Even though these pieces are created at different times, we can see that inspiration is drawn from past works and then transformed into something different that is current with the time.
* Work in Progress
19
Typographica Mea Culpa, Unethical Downloading by Steven Heller Design is an honorable profession; designers tend to respect one another’s intellectual property. Font licensing is something that is very important but not emphasized enough. Some people engage in copyright infringement without realizing it.
Why do we feel we have a right to unlimited access to digital fonts? Is it because in the digital realm ownership is still fuzzy?
20
* Work in Progress
A View of Latin Typography in Relationship to the World by Peter Bil’ak The term “Roman” is traditionally used to describe serif typefaces of the early Italian Renaissance period. Roman and Italic suggest that the Greek version has been Latinized and ignoring the Greek traditions of typography. New possibilities are open for designers to work with “non-Latin” type. The English and Latin alphabet account for only one segment of global communications today.
My Type Design Philosophy by Martin Majoor Akzidenz Grotesk published in 1898 by German Berthold type foundry in Berlin was a sans serif that immediately became a great success. The first sans serif typeface was based off of seriffed typefaces in use at the time. The last 15 years have been revolutionary for sans serifs because typeface designers have become aware of the basis of sans serifs instead of imitating serifs. * Work in Progress
21
Lava—Voice of a Magazine by Peter Bil’ak Making a single-purpose font is a fairly quick process, but making a versatile font is much more complicated. A versatile font would work across different platforms, languages, sizes and styles. Lava was created to be used in a magazine called Works That Work, which required a font that was versatile.
The First Thing I ever Designed: Elena Schenker and “Gratuitous Type” Magazine by Madeleine Morley Magazines are good portfolio pieces for young designers because it showcases a range of skills.
It’s important to trust in yourself and your abilities. 22
* Work in Progress
Eric Gill got it wrong; a re-evaluation of Gill Sans by Ben Archer Gill Sans is the Helvetica of England. It is important to examine typefaces that are popular to make sure it isn’t poorly designed. Especially when that typeface is free. Gill Sans has inconsistencies in weights as well as changes in proportions between capital height, stroke width, and character width.
Beauty and Ugliness in Type Design by Peter Bil’ak Type design is a disciple defined by its ability to execute an outcome. Four principles for beauty were laid down by Bodoni: regularity, clarity, good taste, and charm. The typeface Italian has provoked negative reactions to their reversed-contrast design where strokes that were thick in classical models were thin, and vice versa. It was intended to capture the audience’s attention because it wasn’t what they expected. * Work in Progress
23
An Idea of a Typeface by Kai Bernau Neutral typeface explores how the absence of stylistic associations can help the reader to engage with the content of the text. Bernau did lots of research and studies to find out what “neutral” meant and what characterized “neutral”. The typeface went through many stages and revisions/adjustments.
A Typeface Designed to Revive the Endangered Cherokee Language by Angela Riechers The Cherokee only had a few existing fonts that were poor quality and lacking bold or italics. Designer Mark Jamra wanted to create a typeface that would help preserve a nation’s language and culture. The serif typeface is a harmonious mix of closed and open shapes, straight strokes, and playful curves. 24
* Work in Progress
*
I did all of the readings on time. Okay, most of them. Okay, some of them.
* Work in Progress
25
Proje 26
*
* Work in Progress
ects Tracking my progress. * Work in Progress
27
Typesettings: Rules of Typography Project #1
Description For this project, you will research and document as many rules, ideas, or principles about typography as possible. 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.
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
28
* Work in Progress
* Work in Progress
29
30
* Work in Progress
Critique Notes ›› Pay lots of attention to details! ›› Kern, track ›› Highlight a quote for emphasis ›› Peak the viewer’s interest ›› Experiment, lots of room for creativity ›› Interesting layout ›› More fun with the header ›› Effective use of white space
* Work in Progress
31
A Dialogue Project #2
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. Everything matters. Think about and utilize typographic hierarchy. You can use color, and images to help support your design, but care must be taken to make sure your typography is intentional and refined.
Objectives ›› to use typography to create a distinction between two different voices ›› to consider content when make decisions about typeface selection and imagery ›› to demonstrate an understanding of good typographic practice when setting text
32
* Work in Progress
* Work in Progress
33
34
* Work in Progress
Critique Notes ›› More experimental with the type treatment ›› Better title, type as illustration ›› Colors! Try patterns ›› Use the vertical space ›› Typography as graphic elements ›› Experiment/have fun with the title and pull quotes ›› Smaller body text
* Work in Progress
35
Elements of Style Booklet Project #3 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. Your job is to develop a design that would appeal to high school and college-aged students. 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 second phase of the project will require you to work in teams to create a single related series of booklets. Objectives ›› to use typography to create a distinction to develop a grid structure that ensures consistency in a multiple page document ›› to design for 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 36
* Work in Progress
* Work in Progress
37
38
* Work in Progress
Critique Notes ›› Too many visual styles will mess with clear hierarchy ›› Style different examples differently ›› Careful attention to details such as spacing and emphasis ›› Make it look intentional
* Work in Progress
39
Zine Project Project #4 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. 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 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
40
* Work in Progress
* Work in Progress
41
42
* Work in Progress
Critique Notes ›› Italicize book titles in a couple articles ›› Change cover design ›› Date on the Front cover ›› Handlettering titles ›› Check your leading ›› Rearrange layout for some spreads
* Work in Progress
43
44
*
* Work in Progress
Tiffanie Tran Typefaces Used
Roboto and Program March 2017