338 journal Rose Shrewsbury by Rose Shrewsbury

TYPOGRAPHY

LECTURE

Journal Art 388

Jan.26, 2017

TYPE II JOURNAL Rose Shrewsbury Art 338, Winter 2017

Type II Journal

INTRODUCTION This Journal was created in Typography II at California Polytechnic University during Winter 2017. The contents of the journal include notes taken during lectures, summaries of key points from assigned readings, images of and notes about your design process for each class project and recaps of project critiques.

LECTURES

LECTURE

WEEK 1 January 10-12, 2017

LECTURE

TYPOGRAPHIC REFINEMENT: THE DETAILS Point Size » Imaginary space around the handset metal type. Pica » 1 pica: 12 pt » 1p6: 1 pica 6 points » 6 pica: 1 inch. Traditional Sizes » 5 pt. - 72 pt. » Lead can’t go bigger because it would bend. » For bigger pt size wood has to be used. Factors to Consider » Type portions and height » Length of text » Content of text » Format for viewing » Audience/ Reader Leading » 120-145% of point size

Type II Journal

LECTURE

Kerning » Kern type at display sizes » Apply Metric settings Line Length » Too wide- hard to focus » Too narrow- breaks the rhythm Optimal Line Length » 45-90 characters to line » 8-13 words/characters per line Lettering spacing/ Tracking » Small caps can have more spacing » Watch/be careful with the extremes Screen vs. Print » Screen: Type size needs to be larger (14 pt or more) » Print: Body text ranges from 9 to 12 pt depending on the typeface. Hard Working Typeface » Regular weight » Robust Proportions » At least one bold weight » Italic version

Jan.12, 2017

LECTURE

» Legible numbers » Should be narrow enough to fit a good amount of characters/words to a line. Hyphenations Paragraph Menu Settings » 6: words » 3: after » 3: before » 2: limit Other tips for setting up a document: » Turn on Optical Margin Alignment under Story » Mark sure to use the correct prime marks » Turn on dynamic spell check (Command I) » Do not style text as small caps.

Type II Journal

LECTURE

WEEK 3 January 26, 2017

Jan.26, 2017

LECTURE

CHOOSING TYPEFACES AND UNDERSTANDING FONTS The right typefaces depends on the content » How long is the text? » What is it about? » What is the tone? Audience » What is the age/ demographic of the reader? Format/ Context » What is the size of the pace/screen? » Is the size set or will it vary? » At what distance will the text be read? Technical Factors to Consider » Ask yourself does the font have: a full character set with punctuation, glyphs, foreign accented characters, multiple weights and styles, small caps, lining, old style numbers, web font version Buying fonts » Purchase a license » Ask yourself: Can I use this for commercial work? What is the cost? Can it be used online and print? Can it be used on apps and ebooks? 10 Type II Journal

LECTURE

Where to get fonts Google Fonts » Free for print and web but some are not so good. Lost Type Co-op » Pay what you want (could be zero) League of Moveable Type » Type movement that provides well-made fonts free of charge Font Squirrel » Free fonts for commercial use (can be unreliable Fontspring » All fonts can be used for commercial use House Industries » Fonts based on American vernacular » Ex: Brush painting, old style, mid-century, retro » They are expensive $$$ My Fonts » Wide range of fonts » Newsletter on font trends and design » Occasionally they release a free font

Jan.26, 2017

LECTURE

Fonts.com » Huge collection » Good Blog Where fonts live » User/ Library/ Fonts Managing Fonts » Use a font manager to avoid damaging fonts moving them around » Have the minimum number of fonts installed » Use sets to keep fonts organized and categorized » Care for your fonts and know where they came from. Font Book » Ability to create font sets » Fix font conflicts » Deactivate fonts in the /Library/Fonts/ and folders to prevent any application from seeing them » Can create Library sets to open fonts in place » Automatic activation feature Other font managment programs: » FontExplorerXPr » Suitcase Fusion 6

12 Type II Journal

LECTURE

WEEK 4 January 31-February 2, 2017

Feb. 2, 2017 13

LECTURE

TYPESETTING IN INDESIGN: TOOLS AND TECHNIQUES Paragraph Styles » Most styles will be in Paragraph styles Paragraph level attributes: » Leadings » Tabes » Indents » Space before and after » Hyphenation and justification settings » Rules above and below Paragraph styles option menu: » Turn on Apply style to selection » Indents and Space » Defines alignment, indents, and space before and after paragraph returns. Tabs » Show all tabs and leaders (a chracter that fills the negative space before the tab). Paragraph Rules » Show rules (lines) that can appear above or below the paragraph 14 Type II Journal

LECTURE

Paragraph Shading » Text highlight and Spacing can be customized. Hyphenations » Turn hyphenation on or off and customizes word hyphenation settings Drop Caps and Nested Styles » Large initial caps and styles within other styles. Bullets and Numbering » Set up lists with auto bullet points or numbers Export Tagging » Turn styles into CSS. For Ehubs and websites created in InDesign. Character Styles » Are used for styling text within a paragraph Paragraph level attributes: » Bold text » Italic Text » Run-in subheads » Custom bullets or numbers » Shows style name and if the character style is based on a pre-existing style.

Feb. 2, 2017 15

LECTURE

Tables Styles » Used for styling multiple tables in 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 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 Cell Styles » Use for styling individual cells or rectangular divisions of the table.

16 Type II Journal

LECTURE

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 Collaborating improves » Sensitivity to type » Understanding of content » Willingness to experiment » Craft and attention to details » Technical typesetting skills

Feb. 2, 2017 17

LECTURE

WEEK 8 February 28, 2017

Jan.26, 2017 19

LECTURE

TYPOGRAPHY ON SCREEN FILE » To check/choose typefaces for screen review the typefaces Verdana and Georgia designed by Matthew Carter for the screen for comparison. Typeface Contrast » The amount of contrast between thick and thin strokes of characters in a typeface impacts legibility. » Higher contrast typefaces can be useful in small amounts or as headlines X-height » A typeface with a high x-height is ideal, especially for use on interfaces or on way finding Beware of extremes » 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. Character distinction » Recognizing differences between the characters is essential for on screen legibility

20 Type II Journal

LECTURE

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 & Ligatures » Use the real deal. Optical Sizes » Proportions are created larger for some typeface designs for headers and captions, or small if it was going to be used for smaller typefaces. Finding Alternatives » A lot of typefaces are over used/ very prevalent on the web/print. » It’s good to find alternatives typefaces from the mainstream/ over used and replace them with a similar typefaces that is less generic. Pairing typeface » Look for distinction and void pairing typefaces that are too similar » Take advantage of display type, but be critical

Jan.26, 2017 21

LECTURE

about free fonts to make sure they’re well designed (and don’t look cheap and tacky) Look for Harmony » Typefaces that don’t look the same but have some type of harmony based on their proportions. » Ex. Bauer Bodoni & Helvetica Neue (they share the same skeleton) Use a Family » Some typefaces built with the same structure have both serif and sans serif versions, which makes it easier to work with those typefaces. » Ex. Officina Sans Bold, Officina Serif Bold Build outward » Finalize one typeface and build on it. » Pretty italic type combinations » Ex: Sentinel Light/ Medium italic with Droid Sans » Friendly Sans Serif combinations » Ex: Meta Bold and Droid Sans Evaluate typefaces critically. » Learn to trust your instincts. » Experiment. » Look and see.

22 Type II Journal

LECTURE

Jan.26, 2017 23

READINGS

LECTURE

24 Type II Journal

READING

WEEK 1 January 10-12, 2017

Jan.12, 2017 25

READING

Butterick’s Practical Typography:

TYPOGRAPHY IN TEN MINUTES »Body text is the first priority of a document; it determines the quality of your document because the body text is the most text. »The 4 most important typography choices to improve the body text are: Point size: the size of letters. » Print: 10-12 pt. » Web: 15-25 pt. Line spacing: the vertical distance between lines. » Should be 120-145% Line length: the horizontal length of text box. » Should be average 45-90 characters’ » Printed documents: Pg. Margin larger than 1 inch » Web documents: text should not go to the edge of the browser window Font choice: use professional fonts » Try to avoid using Arial or Times New Roman, Monospaced fonts or system fonts.

26 Type II Journal

READING

Butterick’s Practical Typography:

SUMMARY OF KEY RULES » Use curly quotation marks, not straight ones such as inch marks. EX: “

”,"

» Sparingly use center text, bold, italic, ampersands » Use proper trademark ™ » Use proper copyright symbols © » Always have kerning turned on. » Always put a non breaking space after paragraph. (ctrl, shift space b) » Paragraph mark key command (Opt 7) ¶ » Section Marks keyboard command (Opt 6) § » Turn on hyphenations when using justified text. » Don’t use multiple word spaces or other whitespace characters in a row. » Only underline hyperlinks » Only use all caps for one line of text, and only use small caps if you have them. » Only use one space between sentences.

Jan.12, 2017 27

READING

Butterick’s Practical Typography:

FOWARD »Typography is the arrangement of prefabricated elements on a page. » Type is mechanized writing » Printed type exist and interacts with the page it’s presented on Elements of Typography: » Images, Words, Sentences, even the spaces between elements » These elements create hierarchy » Typography communicates a message rather than displays information. » If no consideration or care was taken to typography, than viewers may get perception that you don’t care how the message is perceived.

“Good typography is measured by how well it reinforces the meaning of the text, not by some abstract scale of merit.”

28 Type II Journal

READING

WEEK 2 January 17-19, 2017

Jan.17, 2017 29

READING

Butterick’s Practical Typography:

WHY TYPOGRAPHY MATTERS What is Typography? » “Visual component of written words” » Text is a “sequence of words” » Aesthetic component of type is separate » Typography performs a utilitarian function » Effective typography is about good skills, not taste. Who is Typography for? »“Benefit of the reader, not the writer” » Typographers job is to create visual component of text and reinforce meaning. » Always ask: what does my reader want? » Orient your type to your reader Why does Typography matter? » To “conserves the reader’s attention” » The reader’s attention is necessary for the writing to matter » Readers are looking for reasons to stop reading » Good type helps devote readers attention to the message

30 Type II Journal

READING

» Bad typography is distracting to the reader and takes away from the main message in the text. What is good Typography? 1. Good typography is measured by how good it reinforces the meaning of the text. 2. Type isn't a math problem with one answer. 3. Your ability to create good typography depends on how well you understand the goal of the text. Other Facts/ Information: » Type that reinforces the meaning of the text is still successful even if aesthetically unpleasant » For good typeface choices consider the context and purpose of the type. » Legibility is largely a matter of acclimation, empirics. Where do the rules come from? » Professional typography (type practices in American English) are used as a benchmark for quality, not as an all or nothing decision.

"The more you appreciate what typography can do, the better typographer you become."

Jan.17, 2017 31

READING

Beatrice Warde's The Crystal Goblet

Discussion Questions Why is the design of the butterfly ballot problematic? The butterfly ballot for Palm Beach County, Florida, 2000 presidential election was problematic because the alternating voting choices made the alignment difficult to follow and distinguish which arrow and bubble goes with the chosen nominee. The 2 page layout with the voting bubbles in the center also adds to the confusion as to which bubble should be filled for each candidate. The centered and stacked arrangement of the party name over the candidate’s name also creates organizational issues that made it hard to distinguish who you’re voting for, or how to vote for your chosen candidate. The redesign corrects the odd alignment by moving all the candidates to one page, with all the text aligned to the left margin. The redesign also adds clarification by putting the candidate’s name in bold with the party name indicated clearly above.

In what ways is Trixie’s resume better than Violets? The first thing that I found appealing about Trixie’s resume compared to Violets is her larger margins. The small margins on Violet’s resume create large gaps between the information, making it harder for the reader to organize the information. The large margins on Trixie’s bring the focus to the in-

32 Type II Journal

READING

formation in the center of the page. It also creates less space in between the text, making it easier to connect the information, such as dates and headings. The thin small lines on Trixie’s resume create subtle organization that doesn’t distract the reader from the information, as the large grey boxes on Violet’s resume do. The serif typeface for the job titles also creates contrast against the smaller all cap headings.

What is the main argument in Beatrice Warde’s essay The Crystal Goblet? Why does Matthew Butterick disagree with this? The main argument in “The Crystal Goblet” is that the best typography is “invisible”. Beatrice uses a metaphor that compares typography to a fine wine goblet and the wine as the content. Matthew disagrees with her argument because it’s poorly reasoned. He argues that typography is the visual component of the written word, and without type a text has no visual characteristics. He also explains that typography is how we choose to present words and give them meaning. He explains that Beatrice’s argument is problematic because she places the substance and presentation of writing to be on two separate layers. When he believes that substance and presentation are a “fusion” of the text and typography.

Jan.19, 2017 33

READING

WEEK 3 January 24- 26, 2017

34 Type II Journal

READING

Butterick’s Practical Typography:

TYPE COMPOSITION Type Composition » Choose the right characters Computer keyboard characters » Accented characters » Math symbols » White-space characters Straight and Curly Quotes » Opening single quote: option +] » Opening double quote: option +[ » Closing single quote: option + shift + ] » Closing double quote: option + shift + [ White space » Use one space between sentences » Question mark / Exclamation Points » Avoid exclamations, it’s overused. Semicolons/ Colons » Semicolons: Used to combine two sentences and separate list elements with internal commas » Colons: connects the introduction of an idea Jan.24, 2017 35

READING

Parentheses, Brackets, and Braces » Parentheses: separate citations or other asides » from the body text » Brackets: show changes within quoted material » Braces/ Curly Brackets: used in technical and mathematical writing Hyphen, En Dash, and Em Dash » Hyphen: on keyboard » En Dash shortcut: (option + hyphen) » Em Dash: (option + shift + hyphen » An en dash makes an acceptable minus sign in spreadsheets or mathematical expressions Apostrophes » Indicates the possessive case » Takes the place of letters or numbers that have been removed in contractions. » Make sure to use apostrophes and not opening single quotes. » Shortcut: (option + shift) Accented Characters » Used in proper names that are foreign or in loanwords used in American English (ex. naïve) » Proper names are not italicized, check dictionary or usage guide for loanwords. 36 Type II Journal

READING

Discussion Questions What are three new things you learned from the chapter on type composition? 1. The keyboard shortcuts for en dash, em dash and correct apostrophes. 2. How to use brackets/braces 3. There are math symbols in the glyphs palette that are the correct versions to use.

Do you think you will use any of the keyboard combinations you learned to create different symbols? Yes, absolutely. Iâ&#x20AC;&#x2122;ve found the em and en dash, as well as the text frame shortcut to be very helpful.

Jan.24, 2017 37

READING

Butterick’s Practical Typography:

TEXT FORMATTING Text Formatting » Involves more than what font to use. » Affects the appearance of the characters on the page and hierarchy of information. » Affects: the point size, bold or Italic styles, small caps, letter-spacing, and kerning. Underlining » Never underline, it doesn’t help legibility. » Instead use bold or italic » For headings: try all caps, small caps, or a change in point size. Goofy fonts » For most serious applications, do not use. (ex. Resume, portfolio, reports) » Use when appropriate (such as themed poster) Monospaced fonts » Don’t use them System fonts » Problems with them: Fonts are not very good.

38 Type II Journal

READING

» Fonts have been optimized for screen legibility, not print. » Because they’re included on all computers, they’re overused. Headings » The best way to emphasize a heading is by putting space ABOVE and BELOW Bold and Italic » Use bold, not italic for headings. » Bold or italic, not both. Kerning » Avoid optical settings, stick to metric. Letter-spacing » Add 5-12% extra letter-spacing to text in all caps or small caps » Setting spacing in CSS: .05em - .12em Color » Contrast between light and dark colors » Bold font creates more emphasis » Color intensity depends on color, size, weight. » Avoid color type on color background

Jan.26, 2017 39

READING

Small Caps » Use real small caps, not fakes. » Don’t use CSS property font-variant: small-cap » Use them sparingly » Turn on kerning Mixing Fonts » Two typefaces is plenty » Adding typefaces gives you more elements to worry about » Ask yourself: What it’s doing to help or why you have it OpenType Features » Allow fonts to specify alternative letter-forms and rules for how they should be applied to the text. Websites for fonts » Fonts in use

40 Type II Journal

READING

WEEK 4 January 31- February 2, 2017

Jan.31, 2017 41

READING

Butterick’s Practical Typography:

PAGE LAYOUT Page layout » the positioning and relationship of text and other elements on the page. Centered Text » Avoid using it » Never set entire body paragraph centered. » Acceptable to use for short phrases or titles (names on business card). Justified Text/ Left Aligned Text » Make sure hyphenation settings are turned on and set when using justified text. » Don’t believe that justified text creates/ signifies professional typography. » When using justified text, manually adjust text. First line Indent » Signifies the start of a new paragraph. » Indenting is optional when using space or another new paragraph signifier. » Indent should be no larger than four times the point size. (Ex. 12 pt should have 12 - 48 points) 42 Type II Journal

READING

» Don’t use word spaces or tab for indenting . » Use white-space characters (such as text-indent in the paragraph menu) Space between paragraphs » Alternative to first-line indent » Space equal to 50-100% of body text » Larger point sizes need more space » Use the margin-top and margin-bottom properties in paragraph setup » Space between should be half the size the leading Line Spacing/ Leading » Vertical distance between lines of text » Significantly effects the length of a document » Optimal line space is between 120% and 145% » Use the line-height property without units to set line spacing Line Length » The distance between the left and right edges of a text block. » Significantly Impacts reading » Aim for 45-90 characters, including space » Shorter lines and chunks of text are easier/ more comfortable to read than longer lines/ paragraphs.

Jan.31, 2017 43

READING

» Adjust the point size and page margins to correct line lengths. Page Margins » Sets the space your text occupies » One inch is not enough » Give breathing room to the text and the edge » Smaller point size will have larger page margins » Don’t fear the whitespace » The golden ratio is 1.618:1 Body Text » Most common/ pronounced effect in a document » Set the body text FIRST » Begin w/ font, point size, line spacing, line length Hyphenation » Breaks words between lines to create more consistency in a text block » Mandatory for justified text » Aren’t necessary but can make line lengths shorter and irregular How to format Block Quotations: » Reduce the point size and line spacing slightly. Indent the text block between half an inch and a

44 Type II Journal

READING

full inch on the left side and right (if you want) » As with first-line indents, make the side indents large enough to be noticed, but not so large that the line length is too short. » Don’t put quotation marks at the ends—they’re redundant. Bulleted and Numbered Lists » Manually format with correct characters » Asterisks are too small » Dingbats may be used as bullets Tables » Useful tool for grid or complex layouts such as: » Spreadsheet-style grids for numbers or data » For layouts where text needs to be side-by-side Rules and Borders » Rule is a line and a border is a box » Use sparingly » Border thickness: set at half a point to one point » Thick grid lines are a common kind of “chartjunk” Chartjunk » Markings unnecessary to communicate visual information

Jan.31, 2017 45

READING

» To edit: Use the borders property. » To get borders only between columns, set the border-left property on the td+td selector. » To get borders only between rows, set the bor der-top property on the tr+tr selector. Space Above and Below » Use liberally » Works the same way as a dramatic pause. » To create distinction in paragraphs: the space / kerning around a heading should be larger, if using space between paragraphs. » To set spacing on the page layout: use the margin-top and margin-bottom property Widow and Orphan Control » Don’t use a hard line break/ carriage return to fix » Be aware of empty space Columns » Easy way to get shorter and more legible line lengths. (For print, not web) » Align rows of text vertically between column.

46 Type II Journal

READING

Paragraph and Character Styles » Create typographic success » Allow you to define sets of formatting attributes that get applied together » Allows you to change formatting across a class of related elements » Allows inherit formatting from other styles. (a change to the substyle will only affect that specific substyle) » Saves time for reformatting » Define styles in terms of what each paragraph is used for (Ex. Pull quote) Maxims of Page Layout » Principles of balance and consistency when laying out a document » Decide first how the body text will look » Divide the page into foreground and background (main text and margins) to define hierarchy » Make adjustments with the smallest fine details » When in doubt, try it both ways » Be consistent- Typography informs the reader of the structure and hierarchy and without consistent treatment the page will confuse the reader and feel random.

Jan.31, 2017 47

READING

» Relate new elements to existing elements » Keep it Simple. » Imitate what you like. » Don’t fear whitespace. Everything doesn’t have to go to the edges or have an equal margin all the way around.

48 Type II Journal

READING

Peter Bil’ak’s

FAMILY PLANNING OR HOW TYPE FAMILIES WORK

The history and definition of type families, and type design parameters. Pierre Simon Fournier » Published a table of graded sizes of printing types, created the first standardized system for producing and using type, as well as systematized the body sizes of printing types, and suggested names for the most commonly-used sizes. » He was the first to organize typefaces into their “families”. Pantographic Reproduction Type » scaling a master drawing to many different sizes Photo composition and Digital type » gave the ability to work from a single master design regardless of the size of the final application. Industrial revolution and commercial pressures » inspired different weights of typefaces

Feb.2, 2017 49

READING

WEEK 5 February 7-9, 2017

50 Type II Journal

READING

Steven Heller

TYPOGRAPHICA MEA CULPA, UNETHICAL DOWNLOADING » About ethical downloading/ copyrights and how to be an ethical design/ keep design an “honorable profession” » Explains use of illegally obtained licenses and speaks of the consequence, such as prosecution from the FBI. » ”Typesharing is akin to tapping into cable” which made me think about how often, and without thought, people in this day and age do such things. For example: using an establishments “free” WIFI when it’s meant for customers. Or tapping into a neighbors wifi that’s not protected. » Good to know many typographers allow more than a single usage of copyrighted designs with adherence to guidelines set forth in the original agreement » Interesting to learn his history of stealing licensed work and how he now feels about losing income from colleagues who do this to him. Feb.7, 2017 51

READING

Martin Majoor

MY TYPE DESIGN PHILOSOPHY » Designed Scala and Seria as an experienced book typographer » Discusses confusion in mixing types » Concentrates on typography using italics and different types of paper » Discusses historical usage of times new roman, from which most versions originate » Original italics were slanting the the letters » Provides history of both Gutenberg press in 1436, and the lesser-known chinese press which predates by several hundred years » Philosophy is “shake hands and work together“

52 Type II Journal

READING

WEEK 6 February 14-16, 2017

Feb.14, 2017 53

READING

Peter Bil’ak’s

A VIEW OF LATIN TYPOGRAPHY IN RELATIONSHIP TO THE WORLD » Latin typography believed to have originated with invention of the Gutenberg movable type printing press in 1436 » Interesting to find out that the Chinese press was created so much earlier; in 1040 by Bi Sheng, which uses thousands of characters (hence, far more difficult) on wood ,and later on baked clay. » Discusses Korean minister Choe Yun-ui’s transition from wood to movable metal type in 1230 » States according to Hadrianus Junius, Coster of Haarlam “could’ve” been first European to invent movable metal type which later spread West during the Mongol empire » Believes current typography is “plagued by Euro-centric bias” » “existing typographic classification systems also apply exclusively to Latin typography”

54 Type II Journal

READING

WEEK 7 February 21-23, 2017

Feb.21, 2017 55

READING

Peter Bil’ak’s

LAVA —VOICE OF A MAGAZINE » Designed to “bridge the digital and print editions of a newly-designed magazine” » Uses “modified” versions of Gill Sans, Plantin and Trade Gothic » Work is concentrated on using multiple platforms i.E. Online, ebook, pdf and print. » Uses typeface as the one constant characteristic across platforms to make his magazine Works that Work easily identifiable when launched in 2013. » His lava font is designed to be optimal both on-screen and in print uses. » Uses “refined details, finely turned proportions and meticulous spacing”.

56 Type II Journal

READING

Madeleine Morley

THE FIRST THING I EVER DESIGNED » Article is about Elana Schlenkler and her magazine Gratuitous Type » Schlenkler describes her journal as “typographic smut” and talks about the growing pains of an ambitious first issue » Launched her career with her magazine and describes her passion and confusion » Concentrates on connecting with other designers to “steal their secrets” » The popularity of Gratuitous Type led to her current work with Condé Nast,working under an art director there » Loves big type; created the first issue of Gratuitous Type with a large A on the cover » Aimed to have the typeface on her magazine to evolve with each issue » Believes in “trust in yourself and your abilities”

Feb.23, 2017 57

READING

WEEK 8 February 28 -March 2, 2017

58 Type II Journal

READING

Ben Archer

ERIC GILL GOT IT WRONG; A RE-EVALUATION OF GILL SANS » Explains mid-century British typographic culture » Critiques Gill sans typeface and discusses his impressions on Gill’s mentor, Edward Johnston, as being superior to Gill’s works. » Calls Gill’s works “the Helvetica of England” » Used across nearly all design prints, i.e. posters, signs, railways etc. » In early 1990’s, was known as Monotype Gill Sans then just Gill Sans. » Typeface has a “humanistic structure”and is “good for a variety of tasks”. » Gill Sans style is used more commonly than Johnston’s » He believes lettering should be as foolproof as possible. » Gill sans stilled used for publication assignments » In March 2016, Monotype released Gill Sans Nova, to address issues in previous versions.

Feb.28, 2017 59

READING

Peter Bil’ak

BEAUTY AND UGLINESS IN TYPE DESIGN » Spoke at a design conference in Copenhagen in 2010 on Conceptual Type » His presentation, at the behest of the organizers, was about examples of typefaces whose principal design feature was not related to aesthetic considerations or legibility” » Experimented with different designs of opposite extremes » Believes that ugliness plus beauty equals neutral » Believes Bodoni and Didot are “two of the most beautiful typefaces in existence” » Particularly likes to use high-contrast media

60 Type II Journal

READING

WEEK 9 March 7- 9, 2017

Mar.7, 2017 61

READING

Kai Bernau

AN IDEA OF A TYPEFACE » Defines neutral as her aesthetic and goes on to say that "there is no such thing as total neutrality." asserts that other serifs are "little more than a distraction." » believes certain typeface "ages better," and gives as example Times or Univers. » further believes they remain "fresh" and timeless after several decades. » uses Plato's doctrine of Ideas, as her belief,is"original,perfect and unalterable." » believes artists look first to the meaning of the text before the actual typeface design. » concedes that Neutral "is not always neutral." » states that Neutral affords the reader the best reading experience, especially as it pertains to text.

62 Type II Journal

READING

Mar.7, 2017 63

PROJECTS

LECTURE

64 Type II Journal

PROJECTS

Legibility & readability study

PROJECTS

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

PROJECT OBJECTIVES » to examine how small changes in point size, leading, and typeface selection impact legibility » to set up an InDesign document according to given measurements and instructions » to use tools in InDesign to refine your text » to demonstrate attention to detail

66 Type II Journal

PROJECTS

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.

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.

ADOBE CASLON PRO, 9/13 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.

ADOBE CASLON PRO, 9/12

Without typography, one could argue, messages will still be leg-

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

ible, 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.

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

PALATINO LT STD, 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 would

communicate that you do not care how your message may be received.

AVENIR, 9/14

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

Without typography, one could argue, messages will still

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

than simply display a heap of alphanumeric data, some

message may be received.

iom of communication—“one cannot not communicate”—

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

be legible, but if one really wants to communicate rather

may inadvertently communicate that you do not care how your

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

ADOBE CASLON PRO, 9/15

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.

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 Watzlaw-

AVENIR, 9/15

ick’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.

ADOBE CASLON PRO, 8/13

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.

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. ADOBE CASLON PRO, 10/13

AVENIR, 8/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.

AVENIR, 10/13

J. Rose Shrewsbury

Legibility & Readability Study 67

PROJECTS

CRITIQUE Âť Avenir std adds space above the text making the alignment inconsistent with Adobe Caslon Pro

LEGIBILITY EXERCISE Type size and leading effect readability when the type is too small that it makes it difficult to see and read, or when the leading is too high it makes words appear too far apart and causes interruptions in reading. When the leading is too low it makes the type appear overcrowded and difficult to read. I used Adobe Caslon Pro for my serif typeface and I felt the best point size was 9 pt with 13 pt leading. Adobe Caslon Pro at 10 pt type size with 13 point leading was also nice but I felt the smaller type size was easier to read because you could scan more words at once. Sans serif typefaces appear to have more leading and take up more vertical space on the page than the serif typeface. The best type size for my sans serif typeface Avenir was 9 pt with 15 pt leading. The sans serif typeface was more difficult to read at a smaller type size of 8 pt than the serif typeface displayed at the same size.

68 Type II Journal

PROJECTS

Legibility & Readability Study 69

PROJECTS

Typesetting: Rules of Typography

70 Type II Journal

PROJECTS

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.5” × 11” 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.

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

Typesetting: Rules of Typography 71

PROJECTS

TYPOGRAPHY “ Type can be a tool, a toy, and a teacher; it can provide a means of livelihood, a hobby for relaxation, an intellectual stimulant— and a spiritual satisfaction.” Type Form and Function: A Handbook on the Fundamentals of Typography, 2011 Page 163

ADRIAN FRUTIGER

MARGO BERMAN

BRADBURY THOMPSON

Words of Wisdom

“Becoming creative with type means learning as much as you can about different typographic treatments.” Street-Smart Advertising: How to Win the Battle of the Buzz, 2010 Page 59

“On my career path I learned to understand that beauty and readability – and up to a certain point, banality – are close bedfellows: the best typeface is the one that impinges least on the reader’s consciousness, becoming the sole tool that communicates the meaning of the writer to the understanding of the reader.” Adrian Frutiger – Typefaces : The Complete Works, 2009

ELLEN LUPIN

DAVID JURY

Page 21

“One of the designer’s most important tasks is to give information an order that allows the viewer to navigate it.” Design Elements : Understanding the Rules and Knowing When to Break Them, 2014

“Letters are the throbbing heart of visual communication. For all the talk of the death of print and the dominance of the image, written words remain the engine of information exchange. Text is everywhere. It is a medium and a message.” Lettering and Type: Creating Letters and Designing Typefaces, 2009 Page 6

72 Type II Journal

PROJECTS

CRITIQUE » Are required elements there? » Are they styled correctly? » Does hierarchy and composition make sense?

CRITIQUE 1 » Change the typeface combination for titles. » Improve the composition to create more visual interest and hierarchy. » Decrease type size for quotes to 10 pt. In order to increase white space. » Add more elements of color (background color) » Try increasing the type size of some quotes to stand out and create more visual interest.

Typesetting: Rules of Typography 73

PROJECTS

T YPOGRAPHY

WORDS OF WISDOM

ADRIAN FRUTIGER Adrian Frutiger –Typefaces : The Complete Works, 2009, Page 21

“One of the designer’s most important tasks is to give information an order that allows the viewer to navigate it.”

DAVID JURY Design Elements : Understanding the Rules and Knowing When to Break Them, 2014, Page 11

“Becoming creative with type means learning as much as you can about different typographic treatments.”

MARGO BERMAN Street-Smart Advertising: How to Win the

“Type can be a tool, a toy, and a teacher; it can provide a means of livelihood, a hobby for relaxation, an intellectual stimulant— and a spiritual satisfaction.” BRADBURY THOMPSON Type Form and Function: A Handbook on the Fundamentals of Typography, 2011, Page 163

74 Type II Journal

Battle of the Buzz, 2010, Page 59

ELLEN LUPIN

Lettering and Type: Creating Letters and Designing Typefaces, 2009, Page 6

PROJECTS

CRITIQUE 2 » Change quotes to hang quotes » Change page numbers to be consistent styling » Increase leading under “typography” » Add author/ book source for the quotes for Ellen Lupton and Adrian Frutiger

Typesetting: Rules of Typography 75

PROJECTS

A Dialogue

76 Type II Journal

PROJECTS

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 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. 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

PROJECT 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

A Dialogue 77

The Power of the Myth— a discussion by

Bill Moyer & Joseph Campbell Why are there so many stories of the hero in mythology?

Because that’s what’s worth writing about. Even in popular novels, the main character is a hero or heroine who has found or done something beyond the normal range of achievement and experience. A hero is someone who has given his or her life to something bigger than oneself.

So in all of these cultures, whatever the local costume the hero might be wearing, what is the deed?

Well, there are two types of deed. One is the physical deed, in which the hero performs a courageous act in battle or saves a life. The other kind is the spiritual deed, in which the hero learns to experience the supernormal range of human spiritual life and then comes back with a message.

Does your study of mythology lead you to conclude that a single human quest, a standard pattern of human aspiration and thought, constitutes for all mankind something that we have in common, whether we lived a million years ago or will live a thousand years from now?

There’s a certain type of myth which one might call the vision quest, going in quest of a boon, a vision, which has the same form in every mythology. That is the thing that I tried to present in the first book I wrote, The Hero With a Thousand Faces. All these different mythologies give us the same essential quest. You leave the world that you’re in and go into a depth or into a distance or up to a height. There you come to what was missing in your consciousness in the world you formerly inhabited. Then comes the problem either of staying with that, and letting the world drop off, or returning with that boon and trying to hold on to it as you move back into your social world again.

How do I slay that dragon in me? What’s the journey each of us has to make, what you call “the soul’s high adventure”?

My general formula for my students is “Follow your bliss.” Find where it is, and don’t be afraid to follow it.

Is it my work or my life?

If the work that you’re doing is the work that you chose to do because you are enjoying it, that’s it. But if you think, “Oh, no! I couldn’t do that!” that’s the dragon locking you in. “No, no, I couldn’t be a writer,” or “No, no, I couldn’t possibly do what Soand-so is doing.”

The Power of the Myth— a discussion by

Bill Moyer & Joseph Campbell Why are there so many stories of the hero in mythology?

So in all of these cultures, whatever the local costume the hero might be wearing, what is the deed?

How do I slay that dragon in me? What’s the journey each of us has to make, what you call “the soul’s high adventure”?

My general formula for my students is “Follow your bliss.” Find where it is, and don’t be afraid to follow it.

Is it my work or my life?

If the work that you’re doing is the work that you chose to do because you are enjoying it, that’s it. But if you think, “Oh, no! I couldn’t do that! ” that’s the dragon locking you in. “No, no, I couldn’t be a writer,” or “wNo, no, I couldn’t possibly do what So-and-so is doing .”

78 Type II Journal

HE THE

PROJECTS

When I take that journey and go down there and slay those dragons, do I have to go alone?

If you have someone who can help you, that’s fine, too. But, ultimately, the last deed has to be done by oneself. Psychologically, the dragon is one’s own binding of oneself to one’s ego. We’re captured in our own dragon cage. The problem of the psychiatrist is to disintegrate that dragon, break him up, so that you may expand to a larger field of relationships. The ultimate dragon is within you, it is your ego clamping you down.

I like what you say about the old myth of Theseus and Ariadne. Theseus says to Ariadne, “I’ll love you forever if you can show me a way to come out of the labyrinth.” So she gives him a ball of string, which he unwinds as he goes into the labyrinth, and then follows to find the way out. You say, “All he had was the string. That’s all you need.”

That’s all you need—an Ariadne thread.

THE

THE PLACE

TO FIND

IS WITHIN

YOURSELF

PROJECTS

ERO IN YOU

When I take that journey and go down there and slay those dragons, do I have to go alone?

That’s all you need—an Ariadne thread.

Like all heroes, the Buddha doesn’t show you the truth itself, he shows you the way to truth.

That’s not always easy to find. But it’s nice to have someone who can give you a clue. That’s the teacher’s job, to help you find your Ariadne thread.

Sometimes we look for great wealth to save us, a great power to save us, or great ideas to save us, when all we need is that piece of string.

But it’s got to be your way, not his. The Buddha can’t tell you exactly how to get rid of your particular fears, for example. Different teachers may suggest exercises, but they may not be the ones to work for you. All a teacher can do is suggest. He is like a lighthouse that says, “There are rocks over here, steer clear. There is a channel, however, out there”.

In all of these journeys of mythology, there’s a place everyone wishes to find. The Buddhists talk of Nirvana, and Jesus talks of peace, of the mansion with many rooms. Is that typical of the hero’s journey —that there’s a place to find?

The place to find is within yourself. I learned a little about this in athletics. The athlete who is in top form has a quiet place within himself, and it’s around this, somehow, that his action occurs…. There’s a center of quietness within, which has to be known and held. If you lose that center, you are in tension and begin to fall apart.

Like all heroes, the Buddha doesn’t show you the truth itself, he shows you the way to truth.

That’s not always easy to find. But it’s nice to have someone who can give you a clue. That’s the teacher’s job, to help you find your Ariadne thread.

Sometimes we look for great wealth to save us, a great power to save us, or great ideas to save us, when all we need is that piece of string.

THE PLACE TO FIND

IS WITHIN

YOURSELF

HERO IN YOU A Dialogue 79

PROJECTS

The Power of the Myth— a discussion by

Bill Moyer & Joseph Campbell Why are there so many stories of the hero in mythology?

So in all of these cultures, whatever the local costume the hero might be wearing, what is the deed?

How do I slay that dragon in me? What’s the journey each of us has to make, what you call “the soul’s high adventure”?

My general formula for my students is “Follow your bliss.” Find where it is, and don’t be afraid to follow it.

Is it my work or my life?

If the work that you’re doing is the work that you chose to do because you are enjoying it, that’s it. But if you think, “Oh, no! I couldn’t do that! ” that’s the dragon locking you in. “No, no, I couldn’t be a writer,” or “No, no, I couldn’t possibly do what So-and-so is doing .”

When I take that journey and go down there and slay those dragons, do I have to go alone?

That’s all you need—an Ariadne thread.

THE

THE PLACE

TO FIND

IS WITHIN

YOURSELF

GENERAL CLASS CRITIQUE » Use photography to tell a story (Take advantage of the photo studio!) » Create a graphic that will interact with the type » Choose colors that create contrast and extend to the meaning/concept of the design. » Use type as a graphic element

80 Type II Journal

PROJECTS

Like all heroes, the Buddha doesn’t show you the truth itself, he shows you the way to truth.

That’s not always easy to find. But it’s nice to have someone who can give you a clue. That’s the teacher’s job, to help you find your Ariadne thread.

Sometimes we look for great wealth to save us, a great power to save us, or great ideas to save us, when all we need is that piece of string.

HERO IN YOU CRITIQUE » For more unity in the type, try using the condensed face for the pull quote and subtitle » Decrease the space after the quotes and answers » Try bringing the title down to the bottom edge of the page. » Improve illustration to fit content better (make it a silhouette or not a recognizable superhero)

A Dialogue 81

PROJECTS

The Elements of Style

82 Type II Journal

PROJECTS

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 typographic 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 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.

PROJECT OBJECTIVES » 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 hier-

The Elements of Style 83

PROJECTS

archy and clarity in a given text » to evaluate each other’s work and modify one’s design based on the strongest solution.

PRE CRITIQUE (Things to Avoid) » Tight Leading » Large X-height » No mono or big spaced typefaces » Not too rounded or thin typefaces

CRITIQUE VERSION 1 » A few inconsistency in text styling

84 Type II Journal

PROJECTS

THE ELEMENTS OF Style

2 The Elements of Style 85

PROJECTS

COLLABORATIVE CRITIQUE VERSION 2 » Increase the text size for examples » Change leading and type size to be consistent

86 Type II Journal

PROJECTS

The Elements of Style 87

PROJECTS

Zine

88 Type II Journal

PROJECTS

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.

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 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

Zine 89

PROJECTS

ETHICS

FONT COVER M AR C H

2017

DEZINE ACTIVISM March 2017

90 Type II Journal

PROJECTS

INSIDE SPREADS

Zine 91

PROJECTS

INSIDE SPREADS

92 Type II Journal

PROJECTS

INSIDE SPREADS

Zine 93

TYPEFACES: Univers LT std & Mrs Eaves OT

94 Type II Journal

LECTURE

Jan.26, 2017 95