TYPOGRAPHY II:
HOW TO SWEAT THE DETAILS
TYPOGR
HOW TO SWEA
2
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
RAPHY II:
AT THE DETAILS
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
3
INTRODUCT
This booklet is a comprehensive journal of all the notes, readings, exercises, and projects done as a part of my ART 338 Typography II class. Throughout this quarter, this class has taught me to sweat the details, not be afraid of experimentation with type, and wholeheartedly embrace white space. This manual covers everything from typography basics, analyses of popular typefaces, advice from acclaimed typographers and designers, inDesign tips and tricks, and useful feedback I’ve gotten on projects throughout the quarter. I hope this booklet serves as a useful manual for myself and others, who like me, have cultivated a great fascination for typography and design.
TION
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
5
LECTURE
BASIC TYPOGRA
6
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
E NOTES:
APHIC PRACTICE
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
7
TYPOGRAPHIC REFINEM THE DETAILS
POINT SIZE Handset metal type was invented by Johann Gutenberg around 1450. There were no standards for typographic measurement until French type designer Pierre Simon Fournier le Jeune introduced the point system in 1737. The contemporary American measurement system, adopted in the 1870s, has two basic units: points and picas.
POINTS AND PICAS There are 12 points in 1 pica and 6 picas in 1 inch. Proper notation for points and picas is 1p6 (1 pica and 6 points). Some traditional point sizes are 5, 6, 7, 8, 9, 10, 11, 12, 14, 18, 24, 30, 36, 42, 48, 54, 60, and 72.
MENT:
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
9
HOW TO CHOOSE POINT SIZE Things to consider: • Typeface proportions and width • Look at length of text • Viewing format • Audience/reader • Content of text Body text point size should be larger when the text will be read on screen (laptop, tablet, e-reader, etc.). Body text on screen should be 14pt or larger. Body text sizes in print will typically range from 9pt to 12pt.
LOOKING FOR A HARDWORKING TYPEFACE A workhorse typeface has: • A good regular weight. • Robust proportions. • At least one bold weight, with noticeable contrast to compliment the text weight. • An italic version. • Very legible numerals. • It should be narrow enough to fit large amounts of copy into the available space.
10
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
HOW TO MAKE YOUR TYPE LOOK BETTER Kern type at display sizes. Customize leading—it should be 120–145% of the point size. Line length shouldn’t be too long or too short—optimal length is about 8–13 words per line. Letterspacing is important. Tracking should never go under -10. All caps should be tracked out by at least 25. Don’t use fake small caps. Know your hyphens and dashes: • Hyphen: use if word is too long to be on same line • En dash: use for durations of time or numbers • Em dash: use to break flow of a sentence Customize hyphenation in Paragraph > Hyphenation. Use smart quotation marks. Fix rags with soft returns (shift + enter). Avoid widows and orphans by reducing tracking to -10 or using soft returns. Always check spelling (Command + I).
TYPOGRAPHIC REFINEMENT: THE DETAILS
11
CHOOSING AND UNDERSTANDING FO
HOW TO CHOOSE THE RIGHT FONT? Design factors to consider: • Content: length of text and what it’s about • Audience: demographic and age • Format/Context: size of page or screen and at what distance text will be read Technical factors to consider • Does the font have a full character set, including all punctuation and glyphs necessary for the job? • Does the font have foreign accented characters and glyphs? • Does the font have multiple weights and styles? • Does the font have small caps? • Does the font have lining and old style numerals? • What is the format of the font? OpenType fonts are cross-platform. • Does the font have a Web Font version?
ONTS
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
13
WHERE DO YOU GET FONTS AND WHY ARE THEY SO EXPENSIVE? Typefaces can take years to develop, and often require huge teams, especially in thecase of typefaces released in multiple scripts with support for multiple languages. Contemporary fonts are software applications that handlemany conditional states, such as swapping out ligatures and swashes throughout the text. When you buy a font you purchase a license. Licenses outline outline if the designer can use the font for commercial work, how much the font costs, if it can be used online and/or in print, and if it can be used for apps and/or ebooks.
PLACES TO BUY FONTS • Google fonts • Lost-Type Co. • League of Movable Type • Font Squirrel • Fontspring • House Industries • My Fonts • Fonts.com
14
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
HOW DO I INSTALL NEW FONTS AND WHERE DO THEY LIVE ON MY COMPUTER? Fonts can live in different places in your computer: • User : ~/Library/Fonts/ • Local: /Library/Fonts • Network: /Network/Library/Fonts/ • System: /System/Library/Fonts/
DO I NEED A FONT MANAGER? Fontbook is an option: • Free and easy to use • Creates font sets • Resolves font problems, but this can sometimes lead to it deleting fonts from your Library • Deactivates fonts, but cannot deactivate system fonts • Can create Library sets • Has an automatic activation feature Try FontExplorer X Pro and Suitcase Fusion 6 for more.
HAVE A LIMITED NUMBER OF FONTS INSTALLED Use sets to keep your fonts organized and categorized.
CHOOSING AND UNDERSTANDING FONTS
15
TYPESETTING IN INDE TOOLS AND TECHNIQ
PARAGRAPH STYLES Allows you to control: • Leading • Tabs • Indents • Space before and after • Hyphenation and justification settings • Rules above and below General Settings • Overview of the style settings • If the style was based on an existing style Basic Character Formats: • Font • Font style • Size • Leading
ESIGN: QUES
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
17
• Kerning • Tracking • Case Advanced Character Formats • Baseline Shift Indents and Spacing • Alignment • Indents • Space before or after paragraph returns Tabs • Shows all tabs • Shows leaders (a character that fills the negative space before the tab) Paragraph Rules • Shows rules (lines) that can appear above or below the paragraph Paragraph Shading • Text highlighting • Spacing can be customized Keep Options • If you want to keep all or a certain number of lines together in one paragraph • Avoids orphans
18
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
Hyphenation • Turns hyphenation on or off and customizes word hyphenation settings Justification • Customizes justified type spacing Span Columns • If you want to switch from a single column to multiple columns in the same text box Drop Caps and Nested Styles • Large initial caps and styles within other styles GREP Style • Means Globally search a Regular Expression and Print • Allows you to use code to find and edit or style text through the Find/Change dialog box or via Paragraph Styles Bullets and Numbering • Set up lists with auto bullet points or numbers Character Color • Color of text • Percentage of tint • Stroke alignment can also be defined here OpenType Features • Chose Titling and/or Swash alternative characters • Specify figure (number) style
TYPESETTING IN INDESIGN: TOOLS AND TECHNIQUES
19
Underline Options • Underline weight and color Strikethrough Options • Strikethrough weight and color Export Tagging • Turns styles into CSS • For Epubs and websites created in InDesign
CHARACTER STYLES Allows you to control: • Bold text • Italic text • Run-in subheads • Custom bullets or numbers General • Shows style name and if the character style is based on a pre-existing style Basic Character Formats: • Font • Font style • Size • Leading • Kerning • Tracking • Case
20
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
Advanced Character Formats • Baseline Shift • Do not scale or skew your type Character Color • Color of text • Percentage of tint • Stroke alignment OpenType Features • Chose Titling and/or Swash alternative characters • Specify figure (number) style Underline Options • Mainly to set up hyperlink style Strikethrough Options • Same as paragraph style strikethrough options Export Tagging • Turns styles into CSS • For Epubs and websites
TYPESETTING IN INDESIGN: TOOLS AND TECHNIQUES
21
TABLE STYLES Tables are a great tool for positioning text. The table itself can be invisible. Allows you to control: • Outside border of the table • Dividing lines in the table • Space above and below the table • Fills of fields in the table General • Shows if the table style is based on a pre-existing style in the document 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 Fills • Color(s) of fields within the table
22
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
CELL STYLES 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 • If the cell is x-ed out General • Shows if the cell style is based on a pre-existing style in the document • Defines the paragraph style of the text within the cell Text • Alignment and text insets (space around the text within the cell) Graphic • Inset, or space around, a graphic that is placed within a table cell Strokes and Fills • Stroke around the cell and fill color of the cell Diagonal Lines • When you want a diagonal line across a cell or an x-ed out cell
TYPESETTING IN INDESIGN: TOOLS AND TECHNIQUES
23
TYPOGRAPHY ON SCR
TYPEFACE CONTRAST The amount of contrast between the thick and thin strokes of characters in a typeface impacts legibility. Higher contrast typefaces can be useful in small amounts or as headlines. (E.g. Officina Serif, Core Rhino)
X-HEIGHT When choosing a typeface for text, a high x-height is ideal, especially for use on interfaces or on wayfinding. 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 difficultto distinguish as the x-height increases. (E.g. Century Gothic, ITC Garamond)
CHARACTER DISTINCTION Differentiating between different characters is essential for on screen legibility.
REEN
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
25
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.
OPTICAL SIZES A typeface with individual designs for different types of content. (E.g. Adobe Jenson Pro, Semibold Display vs. Adobe Jenson Pro, Semibold)
FINDING ALTERNATIVES Classic typefaces are sometimes so overused that they begin to look like generic defaults. (E.g. Museo Sans instead of Helvetica and Droid Serif instead of Georgia)
26
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
STRATEGIES FOR PAIRING TYPEFACES Look for distinction • Avoid pairing two that are too similar • E.g. Museo Sans and Adobe Garamond Pair display display and text faces • Take advantage of display type • E.g. Woodkit Print and Adobe Garamond; ITC Century Ultra and Adobe Garamond Look for Harmony • Typefaces with inherent visual relationships in their structure and proportion • E.g. Bauer Bodoni and Helvetica Neue Use a Family • Some have both serif and sans serif • E.g. Officina Sans and Officina Serif Build outwards • Lock in one typeface and build upon it • Identify the x-height of the body type you have chosen and pick a font that compliments that • Play with differing display type
TYPOGRAPHY ON SCREEN
27
READING
INSIGHT EXPERIENCED T
28
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
G NOTES:
TS FROM TYPOGRAPHERS
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
29
KEY COMMANDS
˚
OPTION + K
©
OPTION + G
®
OPTION + R
™
OPTION + 2
…
OPTION + ;
Å
OPTION + E, THEN LETTER
¶
OPTION + 7
§
OPTION + 6
–
OPTION + HYPHEN
—
OPTION + SHIFT + HYPHEN
S
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
31
BUTTERICK’S PRACTI TYPOGRAPHY
TYPOGRAPHY IN TEN MINUTES • 10 to 12 pt for print and 15 to 25 px for web • Line spacing should be 120 to 145% of point size • Line length should be 45 to 90 characters per line or 2 to 3 lowercase alphabets • never choose Times New Roman or Arial and try to use professional fonts
SUMMARY OF KEY RULES • Point size, line spacing, line length and font are the four most important typographic choices you make because they dictate how the body text looks • All caps is fine for less than a full line of text, but use 5 to 12% extra letter spacing for all caps • Kerning should be turned on • To separate paragraphs either use first line indents that are one to four times the text point size or use 4–10 points of space between paragraphs
ICAL
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
33
• Turn hyphenation on for justified text • Don’t confuse hyphens and dashes • In a document larger than three pages, one exclamation point is enough
FOREWORD BY ERIK SPIEKERMANN • Printed type does not exist without a relationship to the page that it is presented on • Typography is the arrangement of prefabricated element on a page—this can include words, sentences, images, and most importantly the space in between • Good type and bad type both communicate things whether or not you want them to
WHY TYPOGRAPHY MATTERS • The visual component of the written word • All visually displayed text involves typography • As a designer, it’s your job to create the visual component of the text so it reinforces the meaning • You have to read it like the reader—the text should teach or persuade • Must take attention span, interest, and openness of reader into account • Good typography can help your reading dedicate less attention to the mechanics of reading and focus them more on your message while bad typography can do the opposite
34
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
• Ability to produce good typography depends on your understanding of text and not your design ability • Rules come from professional typographers and authorities on the matter
TYPE COMPOSITION • Curly quotes are used in good typography, don’t use straight quotes • Question marks are underused and exclamation points are overused • Paragraph marks used when citing documents with sequentially numbered paragraphs • Section marks used when citing documents with numbered or lettered sections • These marks shouldn’t be affected by the formatting within them other than italicized words
TEXT FORMATTING • Use bold or italics instead of underlining because those are specifically designed for a typeface • Monospaced font takes up more horizontal space • With a serif, use italic for gentle emphasis and bold for heavy emphasis • If you’re using the san serif, don’t use italic to emphasize and stick to bold • Black and ultrabold is not intended for body text sizes and mostly to be used on larger text
BUTTERICK’S PRACTICAL TYPOGRAPHY
35
• Web point sizes can be larger because we read them at a greater distance than we read print materials • Multiple levels of headings present two sets of problems: structural and typographic • Readers should be able to orient themselves through the headings • Nothing draws your eye more than color contrast between light and dark lettering • Lining figures are the most common kind, the top and bottom of the figures align—they come close to cap height • Oldstyle figures are designed to look more like lowercase figures • Tabular and proportional figures are set on a fixed width, every figure occupies the same amount of horizontal space
PAGE LAYOUT • Have to turn on hyphenation for justified type • First line indents should be no bigger than 4x the point size • For space between paragraphs, you want the space to 50-100% of the body text size • One inch margins are too small for 8.5 by 11 inches • Shorter line length makes hyphenation essential • Pay attention to length of the block quote and indent on both sides
36
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
• Dingbats can be useful for finding the perfect bullet point • Greater margins within table cells makes things easier to read • Rules and borders are best used sparingly • Space is a judgement call—for headings, space after should be less than space before because the information after is related to the heading Maxims of Page Layout • First decide how the body text will look • Make adjustments with the smallest possible increments • Be consistent • Relate each new element to existing elements • Keep it simple • Imitate what you like • Don’t fear white space
BUTTERICK’S PRACTICAL TYPOGRAPHY
37
PETER BIL’AK
FAMILY PLANNING OR HOW TYPE FAMILIES WORK • Pierre Simon Fournier was the first to try and standardize type sizes • Type families tend to various weights, until the mid-19th century heavily weighted type was seen as it’s own thing and not a part of a type family • By the early 20th century, slanted, condensed and extended versions of typefaces were included in their families • Adrian Frutiger designed an entire type system based on weight and width—Univers was designed with a numbering system that helped designers pick weight and width • Each style in a type family must be recognizably different to be functional, yet each must remain consistent to the common principles of the family • A family must share one or more attribute: optical size, weight, width, stylistic differences, construction differences
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
39
A VIEW OF LATIN TYPOGRAPHY IN RELATION TO THE WORLD • 1436, Johannes Gutenberg invented movable type printing—but only in Europe—in China this already existed long ago (1040 AD thanks to Bi Sheng) • There’s a huge Euro-centric bias in typography— most books about type mainly only acknowledge Latin typography • Those that are not Latin typography are referred to as “Orientales” or “Non-Latin”—which sounds colonial • Referring to typefaces as “Greek Roman” or “Greek Italic” is a contradiction and ignores the long tradition of Greek typography • Traditions of typography from Greece, the Middle East, India, and elsewhere can help us rediscover Latin type
LAVA—VOICE OF A MAGAZINE • Lava, designed to bridge digital and print versions of a newly designed magazine • Bil’ak and Stuart Bradley created a magazine called Dot, Dot, Dot and commissioned Radim Pesko to produce the typeface Mitim • For magazines that stretch across multiple platforms like online, eBook, pdf, and print, finding a typeface that is suitable is hard
40
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
• In his magazine, Works That Work, Bil’ak created the typeface Lava to work across various formats • Inspired by Times New Roman and Georgia • In print it has refined details, finely tuned proportions, and meticulous spacing which fonts for the web tend to lack on paper
BEAUTY AND UGLINESS IN TYPE • High contrast typefaces like Didot and Bodoni are considered some of the most beautiful • Bodoni believed beauty came from the principles of regularity, clarity, good taste, and charm • Rare to find examples of skilled and deliberate ugliness (E.g. the Italian) • Bil’ak discusses how closely related beauty and ugliness are • Karloff, the result of combining Didots with the Italian, creates a totally neutral, low contrast typeface
PETER BIL’AK
41
USING LAYOUT GRIDS EFFECTIVEL DESIGNER’S INSIGHTS
• Grids can have various numbers of columns • Grids help create visual harmony and consistency • Grids help your work look cohesive • In print, take binding into account when forming your grid • Rule of thirds and the golden ratio are common tools for a good composition • Use graphic elements or imagery to break the grid in order to make your layout more dynamic
LY
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
43
TYPOGRAPHIC MEA CU UNETHICAL DOWNLOA STEVEN HELLER
• It’s not okay to ignore type licenses • It is easy to get fonts without paying for them • There are limitations that come with fonts that you buy (or don’t buy) • Technically violating license agreements is copyright infringement • All typefaces are for a specific number of CPUs • Many designers don’t even know that sharing fonts is wrong • The legal way of passing along fonts is that you embed them within your file
ULPA, ADING
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
45
MY TYPE DESIGN PHILOSOPHY MARTIN MAJOOR
• Can’t be a good typography without being a good type designer and book designer; must know how a typeface behaves with different printing techniques • Many mix typefaces without knowing the history behind the fonts • First sans serif published by the WIlliam Caslon iv English type foundry which originally only contained capitals • 1989 Akzidenz Grotesk published by the German Berthold type foundry in Berlin • Only based on the serifed typefaces in use at that time—probably based off popular typefaces at the time like Walbaum or Didot • 1928, Paul Renner designed Futura—he started his drawings from scratch • Only makes sense to mix serif and sans when both are designed with the same skeleton
N
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
47
THE FIRST THING I E DESIGNED: ELENA SCHE AND “GRATUITOUS TY ELENA SCHENKER
VER ENKER YPE”
• Elena Schenker created Gratuitous Type, an independent magazine • For her the magazine was an integral launch to her career, she’s gone on to work at Condé Nast and Princeton Architectural Press • Wanted to make a graphic design focused magazine with an international perspective • Nice excuse to connect with other artists she admired and learn from them under the guise of gathering information for her publication • There was a lot of sketching and trial and error in order to get a good interior • Wanted to make a design magazine whose design is inspiring and changes with each issue • It was hard to determine a profitable rate for the magazines, but that could be resolved later • Nice to make something for yourself that others respond to • “Trust in your instincts and give yourself time to get it right”
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
49
ERIC GILL GOT IT WRO RE-EVALUATION OF GILL BEN ARCHER
• Edward Johnston’s typeface that Gill Sans was based off of was actually better designed than Gill Sans • Gills Sans deleted the lowercase Ls foot serif which allows it to be distinguished from the number one, uppercase i and lowercase L • It also got rid of the terminal strokes in b, d, p, and, q—the terminal strokes are only visible in the lightest weight of the typeface • The y is drawn with a straight descending tail that makes the letterform look unbalanced and rigid • Changed proportions between capital height, stroke width, and character width • N and T are so broad that they create large gaps of white space requiring extra kerning and dominating a page • ITC Johnson and P22’s London Underground are good alternatives
ONG; A L SANS
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
51
7 STRIKING DESIGN PAIRINGS KAI BERNAU
7 STRIKING DESIGN PAIRINGS • Phaidon Archive of Graphic Design is known as the ultimate reference book • It has design references from every time period • Some spreads create an interesting juxtaposition of designs from various places and points in time • This article is about their 7 favorites
AN IDEA OF A TYPEFACE • Neautral is an attempt to create a typeface free of connotations • It uses design principles to examine timelessness • Neutralitiy differs by people’s backgrounds • Sought to distill all typefaces into an average • Being a graphic designer and a type designer allows you to make typefaces you actually want to use • Neutrality is determined by the expectations and norms of a group of people
S
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
53
A TYPEFACE DESIGN REVIVE THE ENDANGE CHEROKEE LANGUA
• Two Cherokee representatives came to a type conference in 2011 with a plea for new digital Cherokee typefaces • The few that existed were poor quality and lacked italics or bold • Designer, Mark Jamra, began by adapting a Latin typeface he already had in progress • He studied manuscripts and a syllabary provided by the Cherokee nation and the Smithsonian • Created typeface called Phoreus • Designed for use in the Cherokee language, but with a few English phrases here or there • News Gothic, New Century Schoolbook, and Forza are all good pairings
N TO ERED AGE
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
55
PROJECTS &
OBJECTIV CRITIQUE
56
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
EXERCISES:
VES AND E NOTES
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
57
EXCERCISE #1 LEGIBILITY
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 details
WHAT I LEARNED • It’s important to gain an eye for the details • Leading does not always apply consistently across a paragraph, but there’s a feature in inDesign to fix that • Some typefaces set smaller than others and that can great affect leading
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
59
PROJECT #1 TYPESETTING: RULES TYPOGRAPHY
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
CRITIQUE NOTES • Create contrast with the title • Pick an accent color to bring some life to your layout, but be careful of legibility for color on text • Work on heirarchy • Experiment with scaling, make some quotes bigger than others • Use type as a textural or design element
S OF
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
61
• Use the meaning of the text to work on layout • Work on composition • Be experimental, but be practical • Embrace white space
WHAT I LEARNED • White space is really important to the composition of the layout • Be reasonable with experimentation • Make sure text is legible when working with color • Heirarchy is key • Don’t get carried away with different weights, it will only confuse the reader • It’s important to properly cite quotes
62
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
SOMETHI SOMETHING TO BEATRICE WARDE in the essay On The Choice of Typeface for The Crystal Goblet: Sixteen Essays on Typography by Henry Jacob, 1956
“There are bad types and there are good types, and the whole science and art of typography begins after the first category has been set aside.” page 3
ROBERT BRINGHURST in The Elements of Typographic Style, 1992
“Typography at its best is a visual form of language linking timelessness and time.” page 107
ELLEN LUPTON in the Foreward for Lettering and Type: Creating Letters and Designing Typefaces by Bruce Willen and Nolan Strals, 2009
JAN TSCHICHOLD in The Form of the Book: Essays on the Morality of Good Design, 1991
“
Immaculate typography is certainly the most brittle of all the arts. To create a whole from many petrified, disconnected and given parts, to make this whole appear alive and of a piece—only sculpture in stone approaches the unyielding stiffness of perfect typography.
”
page 23
“Letters are the throbbing heart of visual communication.” page vi
KRISTEN CULLEN in Design Elements, Typography Fundamentals: A Graphic Style Manual for Understanding How Typography Affects Design, 2012
“Typography is a process, a refined craft making language visible. Designers shape language with type and give words life and power to speak text fluently.” page 94
TYPE ABOUT.
SOMETHING TO “
BEATRICE WARDE “There are bad types and there are good types, and the whole science and art of typography begins after the first category has been set aside.” On The Choice of Typeface for The Crystal Goblet: Sixteen Essays on Typography by Henry Jacob, 1956, page 3
ROBERT BRINGHURST “Typography at its best is a visual form of language linking timelessness and time.” The Elements of Typographic Style, 1992, page 107
ELLEN LUPTON “Letters are the throbbing heart of visual communication.”
JAN TSCHICHOLD “Immaculate typography is certainly the most brittle of all the arts. To create a whole from many petrified, disconnected and given parts, to make this whole appear alive and of a piece — only sculpture in stone approaches the unyielding stiffness of perfect typography.” The Form of the Book: Essays on the Morality of Good Design, 1991, page 23
Foreward for Lettering and Type: Creating Letters and Designing Typefaces by Bruce Willen and Nolan Strals, 2009, page vi
KRISTEN CULLEN “Typography is a process, a refined craft making language visible. Designers shape language with type and give words life and power to speak text fluently.” Design Elements, Typography Fundamentals: A Graphic Style Manual for Understanding How Typography Affects Design, 2012, page 94
TYPE ABOUT. TYPESETTING: RULES OF TYPOGRAPHY
63
PROJECT #2 A DIALOGUE
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
CRITIQUE NOTES • Strength of the image or illustration really adds to the final layout • Two sides of an editorial can be conceptually similar and not visually similar sometimes • Keep color values in mind while designing with color—make sure you can see it • Too much big type • Figure out what needs to emphasized
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
65
• Opening line has too much visual weight • Unclear illustration, perhaps clean up and make larger
WHAT I LEARNED • It’s easy to get carried away and make type too big • Once again, whitespace is very important • If you’re going to use an image or illustration, make sure it’s strong and relates well to the information in your text • There are many different ways of typographically creating two distinct voices
ES IN
WITH B
W SO O
66
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
HOW DO I SLAY THE DRAGON IN ME? WHAT’S THE JOURNEY EACH OF US HAS TO MAKE…
SCAPING YOUR NNER LABYRINTH
BILL MOYERS AND JOSEPH CAMPBELL
WHY ARE THERE MANY STORIES OF THE HERO IN MYTHOLOGY?
Campbell: 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. Moyers: So in all of these cultures, whatever the local costume the hero might be wearing, what is the deed? Campbell: 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.
Moyers: 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? Campbell: 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. Moyers: 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”? Campbell: My general formula for my students is “Follow your bliss.” Find where it is, and don’t be afraid to follow it.
Moyers: Is it my work or my life? Campbell: 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.” Moyers: When I take that journey and go down there and slay those dragons, do I have to go alone? Campbell: 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. Moyers: 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.” Campbell: That’s all you need— an Ariadne thread. Moyers: 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. Campbell: 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. Moyers: Like all heroes, the Buddha doesn’t show you the truth itself, he shows you the way to truth. Campbell: 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”.
THERE’S A CENTER OF QUIETNESS WITHIN, WHICH HAS TO BE KNOWN AND HELD. Moyers: 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? Campbell: 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.
A DIALOGUE
67
PROJECT #3 ELEMENTS OF STYLE BOOKLET
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 hierarchy and clarity in a given text • To evaluate each other’s work and modify one’s design based on the strongest solution
CRITIQUE NOTES • No author or location on the front cover • Print with blank pages for Print Booklet • Work with patterns • Header and footer don’t need to be very prominent • Start numbering pages from introduction onward • Names of books must be italicized
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
69
• Don’t always need tables to represent examples • Be careful with spacing, use it to properly group elements
WHAT I LEARNED • Working with other people is fun and very helpful • What belongs on the front cover and the inside front cover • Adding folios can really make a booklet feel more complete, even if it isn’t • Everyone used inDesign differently • Tables is confusing, but we must all try our best with it
70
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
ELEMENTS OF STYLE BOOKLET
71
EXERCISE #2 GRID ANALYSIS
OBJECTIVES • To analyze the structure of two different pages or spreads in the same magazine • To gain an understanding of how underlying grids are utilized to organize visual elements
WHAT I LEARNED • It’s hard to identify a grid • Sometimes designers don’t stick to their grid • Grids make a page look for organized and consistent • Grids can be modular • Images can break the grid, but sometimes to keep them more organized designers fit their images to the grid as well • Titles tend to break the grid
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
73
PROJECT #4 TYPE ZINE
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
CRITIQUE NOTES • Hairline parts of title typeface get lost when point size is not large enough • Make different parts of title larger for emphasis
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
75
• Push sizes of image, sometimes even allow image to take up the whole spread • Add patterns or color to make zine more compelling • Crossing gutterspace can be a risky move because viewer has to read as spreads • Add captions
WHAT I LEARNED • Typography for web is complete different • It’s hard to work with different kinds of content and create something that feels conhesive • Gathering content for zines can be difficult, but rewarding • Pushing image size and type size for web-based documents is a good idea • Big images or surprising treatments keep the reader engaged through long articles
76
TYPOGRAPHY II: A COMPREHENSIVE JOURNAL
TYPE ZINE
77
COLOPHON Swasti Mittal Typefaces used were FrieghtSans Condensed Pro and FreightText Pro March 2017