338.03 Type Journal by Bianca Rosario by brosario

typography ii journal

BIANCA ROSARIO

table of contents

introductio readings. . . projects . . .

typesettin

a dialogue elements

type zine. .

on . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

ng: rules of typography . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

e. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 of style booklet. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

introduction

This journal is a summary of everything that I learned in Charmaineâ&#x20AC;&#x2122;s class this quarter. Inside there are notes from lectures, assigned readings and critiques as well as my process work and final versions for all of my projects. I intended for this journal to be a quick reference for myself, so all the information is very straightforward and concise. I also took that in consideration when designing this journal, as I find more minimalist designs easier to comprehend and faster to read.

readings

BUTTERICK’S PRACTICAL TYPOGRAPHY TYPOGRAPHY IN TEN MINUTES

This article summarizes good typography habits in five simple points. The five points are: Make sure your body text looks good before styling everything else. Appropriate body text sizes are 10–12pt for print and 15–25px for web/mobile. Leading should be set at 120–145% of the point size. Line length should be approximately 45–90 characters per line or 2–3 lowercase alphabets. Ignore system fonts. SUMMARY OF KEY RULES

This article also has a list of good type habits. The first five tips are the same as the ones stated above. Important tips include not using small caps, having only one space after a period, and using curly quotes. I thought these were all helpful, even though they’ve been constantly repeated to us every quarter since freshman year. FOREW0RD

Erik Spiekermann defines type as “mechanized” writing, a form of language that cannot exist without a relationship to to the page. He further states that without typography, it will still be legible, but communication might not be as clear. I agree with this article because I’ve seen a lot of typography online and in person that confuses a lot of people, like the Miss America pageant winner card. 3

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

This article shows a recreation of the butterfly ballot. The butterfly ballot is used as a horrible example of graphic design because the alignment for both sides of the page are too confusing. The redesigned version of the butterfly ballot features a linear setup that is easy to follow and ensure you have selected the correct candidates. TYPE COMPOSITION

This article is about typing the correct characters before even thinking of styling them. All the links are basically the more in-depth version of the Key Rules section. Some extra important things to remember are: Hyphens are used to connect two words. In PC InDesign, the shortcut is -. En dashes are used to indicate a range of values. In PC InDesign, the shortcut is alt+ -. Em dashes are used to make a break in a sentence. In PC InDesign, the shortcut is shift + alt + -.

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

This article talks about the more technical side of typography such as point size, leading, kerning, etc. According to the author, monospaced fonts are absolutely disgusting, especially for body text, because they are harder to read and take up more horizontal space. My biggest takeaway from this chapter is the part about mixing fonts. While mixing two fonts that are starkly different can be visually interesting, having low contrast between fonts can also be successful. It is also a good idea to use the same font for certain levels of hierarchy within one document, such as using a sans serif font for headings and a serif for body text. Most American newspapers use two different serif fonts for headers and body text. PAGE LAYOUT

This section talks about typography at a larger scope, like alignment and when to put in a page break. The author defines page layout as the relationship and positioning of the text relative to the other elements on the page. One of my biggest problems that is addressed in this chapter are widow and orphan control. I frequently try to fix them by adding line breaks right after the end of a paragraph, so the text in one paragraph stays in that wall of text.

FAMILY PLANNING

This article talks about the history of type families, dating back to letterpress typography. The most interesting part about this reading was learning that fonts used to exist in different point sizes as well as weights, but none belonging to the same family. USING LAYOUT GRIDS EFFECTIVELY

Grids can vary in size according to the size of your document. Having more columns in your grid can allow for more versatility in the layout. When creating a grid for a bound book, you absolutely have to take the gutter into consideration. The rule of thirds and Fibonacci spiral can also be helpful in composing the layout within your grid system. MY TYPE DESIGN PHILOSOPHY

This article recounts the history of typefaces and the authorâ&#x20AC;&#x2122;s views on mixing sans serif and serif typefaces. The author believes it is more logical to pair a sans serif and a serif font that are derived from the same skeleton, or made by the same designer. I personally think any two typefaces can be paried regardless of design, as long as they both look good and are appropriate to use for the targeted audience.

A VIEW OF LATIN TYPOGRAPHY IN RELATION TO THE WORLD

This article talks about how in current society, typography is more Eurocentric as Latin letters are more commonly used than characters in different languages. The author also brings up an interesting point about how the use of “roman” and “italic” are sometimes problematic as they suggest that an alphabet has been Latinised. I agree with this article because while my native language is more commonly read and written using Latin letters, the indigenous way to read and write in Tagalog has been getting more and more scarce. I think it is also a sad way to see the extinction of a written language due to centuries of colonialism, because there is an abundance of typefaces already in Latin letters, and close to nothing in Baybayin. While the implications are sad, I think it is a good opportunity for type designers to revive a fading written language by creating fonts for that language.

LAVA—VOICE OF A MAGAZINE

This article is about the process behind the development of Lava, a typeface used in Works That Work. I thought it was interesting to see the logic behind all the decisions the designer made to create a typeface that would be successful on both web and print formats. THE FIRST THING I EVER DESIGNED

I found this article very inspiring. I’ve always been terrified to do freelance work and independent projects because of so many factors that can go wrong. This story gives me belief that others can also appreciate and support work that you are confident about, no matter how small the publication. A RE-EVALUATION OF GILL SANS

I personally never liked Gill Sans or any of its related fonts, so criticism of the typeface didn’t really bother me that much. I think that being critical of type and seeing possible miscommunications (such as 1, I, and l) should be a factor in choosing an appropriate typeface for a project anyway. BEAUTY AND UGLINESS IN TYPE DESIGN

I think that the juxtaposition of beauty and ugliness in type is an interesting concept behind a typeface, especially in an industry focused only on the beauty of typography. While considered the “ugly” font, I believe that it is more visually interesting and would be a unique display font.

7 STRIKING DESIGN PAIRINGS WE DIDNâ&#x20AC;&#x2122;T EXPECT TO SEE

I liked seeing all the different comparisons and noticing how they were related. I also liked how some of the works were not in Latin letters, showing how typography in different languages comes into play. A TYPEFACE DESIGNED TO REVIVE THE ENDANGERED CHEROKEE LANGUAGE

I thought this article was really cool because of all the different people working together for a common cause. After watching this I felt inspired to design my own typeface for my native language in the future.

projects

TYPESETTING: RULES OF TYPOGRAPHY

What does typography mean? Typography requires composition according to: (1) harmonious or opposing elements of representation between the conceptual content and its pictorial equivalent, and (2) the harmonious or discordant construction of bodies of text and bodies of images within the space of the page and their reciprocal equilibration by points of attraction. RAOUL HAUSMANN | Typography | 1998 | pg 72–73

The capital letter is a monumental inscription: constant, imposing, sometimes dominating, and authoritarian. The cursive lowercase letter is supple, homely, more legible— one is tempted to say more democratic. ROXANE JUBERT | The Bauhaus Context: Typography and Graphic Design in France | 2006 | pg 74

Typography functions “interpersonally”: it says something about the nature or emotional state of the writer, anticipates the aesthetic inclination of the addresses or indicates the nature of the communicative contact between writer and reader. HARTMUT STÖCKL | Typography, Body and Dress of a Text, a Signing Mode Between Language and Image | 2005 | pg 212

Contemporary typography creates meaning, not just with letter forms, but also with colour, three-dimensionality, material texture, and in kinetic typography, movement. THEO VAN LEEUWEN | Typographical Meaning | 2005 | pg 141

FIRST DRAFT

I thought that my first draft’s problems mainly were that the quotes were too long to actually style them in a way that would be appealing. I also thought that my quotes didn’t relate conceptually, so I had to do more research.

The capital letter is a monumental inscription: constant, imposing, sometimes dominating, and authoritarian. The cursive lowercase letter is supple, homely, more legible— one is tempted to say more democratic. ROXANE JUBERT The Bauhaus Context: Typography and Graphic Design in France | 2006 | pg 74

The making of a mark, such as a letter, and creating entire character sets are considered an important form of authorship. SIBYLLE HAGMANN Non-Existent Design: Women and the Creation of Type | 2005 | pg 190

TYPOGRAPHY… 1

is essentially the study of how letterforms interact on a surface, directly relating to how the type will be set when it eventually goes to press. JOSEPH ALESSIO Understanding the Difference Between Type and Lettering | 2015 | Web Journal

functions “interpersonally”: it says something about the nature or emotional state of the writer, anticipates the aesthetic inclination of the addresses or indicates the nature of the communicative contact between writer and reader. HARTMUT STÖCKL Typography, Body and Dress of a Text, a Signing Mode Between Language and Image | 2005 | pg 212

creates meaning, not just with letter forms, but also with colour, three-dimensionality, material texture, and in kinetic typography, movement. THEO VAN LEEUWEN Typographical Meaning | 2005 | pg 141

SECOND DRAFT

My biggest critique was resolving the issue with my three quotes that all started with “typography,” which Charmaine thought having both the ellipsis and numbered list was too redundant. I then fixed it by having the ellipsis be the related element in the layout, and treating the quotes according to their content for more visual and conceptual interest.

THE CAPITAL LETTER IS A MONUMENTAL INSCRIPTION: CONSTANT, IMPOSING, SOMETIMES DOMINATING, AND AUTHORITARIAN. the lowercase letter is supple, homely, more legible— one is tempted to say more democratic. ROXANE JUBERT The Bauhaus Context: Typography and Graphic Design in France | 2006 | pg 74

TYPOGRAPHY … … …

The making of a mark, such as a letter, and creating entire character sets are considered an important form of authorship. SIBYLLE HAGMANN Non-Existent Design: Women and the Creation

creates meaning, not just with letter forms, but also with colour, three-dimensionality, material texture, and in kinetic typography, movement.

of Type | 2005 | pg 190

THEO VAN LEEUWEN Typographical Meaning | 2005 | pg 141

FINAL VERSION 13

A DIALOGUE

YOUR INNER LABYRINTH

AND HOW TO ESCAPE IT with Bill Moyers and 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 So-and-so is doing.” 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. 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. 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.

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

My entire concept for this project was to show the content in a way that would not give away what the dialogue was about, and was not overdone by previous students. I was really excited for this project because I would have a chance to do illustration. I went for a more conservative layout because of the length of the text and I didnâ&#x20AC;&#x2122;t want to sacrifice the impact of the illustration to break up the text into two pages.

ELEMENTS OF STYLE BOOKLET

THE

ELEMENTS OF

STYLE section one

FIRST VERSION (SOLO)

My main critiques for the first booklet were that I spread my text out too thin and had too little content per page. I also didnâ&#x20AC;&#x2122;t have a very innovative cover design, so I scrapped it when it was time to form groups. I think I lucked out by having only two people working on the same series because everyone else had an extra person to argue with.

Form the possessive singular of nouns with ’s. Follow this rule whatever the final consonant. Thus write, Charles’s friend Burns’s poem the witch’s malice

In a series of three or more terms with a single conjunction, use a comma after each term except the last. Thus write, red, white, and blue honest, energetic, but headstrong He opened the letter, read it, and made a note of its contents.

This is the usage of the United States Government Printing Office and of the Oxford University Press.

This is also the usage of the Government Printing Office and of the Oxford University Press.

Exceptions are the possessives of ancient proper names in -es and -is, the possessive Jesus’, and such forms as for conscience’ sake, for righteousness’ sake. But such forms as Achilles’ heel, Moses’ laws, Isis’ temple are commonly replaced by

In the names of business firms the last comma is omitted, as Brown, Shipley and Company The abbreviation etc., even if only a single term comes before it, is always preceded by a comma.

the heel of Achilles the laws of Moses the temple of Isis The pronominal possessives hers, its, theirs, yours, and oneself have no apostrophe.

THE ELEMENTS OF STYLE

SECTION I: ELEMENTARY RULES OF USAGE

Elements of Style Style Guide

Big Header Acier BAT (Text Solid) Size: 50pt Leading: 43pt

Number Acier BAT (Text Noir) Size: 76pt Leading: 43pt

Zack Spanier Bianca Rosario

INTRO

Rule Title Proxima Nova (Black) Size: 20pt Leading: 23pt

Enclose parenthetic expressions between commas.

Rule Subtitle Proxima Nova (Light) Size: 17pt Leading: 19pt

One paragraph to each topic.

Body Proxima Nova (Regular) Size: 10pt Leading: 14pt Space Before: 0p6

Similar in principle to the enclosing of parenthetic expressions between commas is the setting off by commas of phrases or dependent clauses preceding or following the main clause of a sentence. The sentences quoted in this section and under Rules 4, 5, 6, 7, 16, and 18 should afford sufficient guidance.

Example Proxima Nova (Semibold) Size: 10pt Leading: 14pt Space Before: 0p3 Left Indent: 1p5

Charles’s friend Burns’s poem the witch’s malice

Example Revised Proxima Nova (Bold) Size: 10pt Leading: 14pt Space After: 0p3 Left Indent: 1p5

When he arrived (or, On his arrival) in Chicago, his friends met him at the station.

Example Description Proxima Nova (Bold) Size: 10pt Leading: 14pt Right Aligned

The meaning made clearer by denial of the contrary.

Example Label Proxima Nova (Light) Size: 10pt Leading: 14pt All Caps Right Aligned

A B C

Page Number Proxima Nova (Bold) Size: 9pt Align according to page

Folio Proxima Nova (Light) Size: 7pt All Caps Align according to page

THE ELEMENTS OF STYLE

STYLE GUIDE

My partner and I decided to keep his typeface choices and my layouts. We ended up using a display font for our section numbers. To make processing the information easier, we agreed to get rid of all the tables and just use plain text with ample space around them to mimic tables. I was very happy about this decision.

THE ELEMENTS OF STYLE

} FINAL VERSION (GROUP)

The concept behind our cover was to give a sneak peek on what the contents of the section entail. We also decided to use very hot colors reversed out on black to give the design more impact and visual interest.

Form the possessive singular of nouns with ’s. Follow this rule whatever the final consonant. Thus write, Charles’s friend Burns’s poem the witch’s malice

Use a comma after each term except the last, in a series of three or more terms with a single conjunction. Thus write, red, white, and blue honest, energetic, but headstrong He opened the letter, read it, and made a note of its contents.

This is the usage of the United States Government Printing Office and of the Oxford University Press.

This is also the usage of the Government Printing Office and of the Oxford University Press.

In the names of business firms the last comma is omitted, as

the heel of Achilles

Brown, Shipley and Company The abbreviation etc., even if only a single term comes before it, is always preceded by a comma.

the laws of Moses the temple of Isis The pronominal possessives hers, its, theirs, yours, and oneself have no apostrophe.

THE ELEMENTS OF STYLE

ELEMENTARY RULES OF USAGE

TYPE ZINE

MADELEINE MORLEY; NOVEMBER 2016

PUNK YET PEACEFUL POSITIVITY—

THE SECRET TO ETHICAL DESIGN? Art director and graphic designer Marius Jopen’s work first came to me in the form of a quote from H. G. Wells, written in an off-kilter, cursive style with thick black Sharpie. It was hung on the door of my co-working studio, where he was set up for a brief stint. “More than machinery, we need humanity, more than cleverness, we need kindness and gentleness,” it read. This hand-written style is a signature of his, appearing across the board on identities and posters that he penned throughout his time working for Mirko Borsche and Stefan Sagmeister. It continues to be a staple, featuring throughout the continual scroll of the young designer’s website and on his work for cultural clients in Berlin and Amsterdam. Having worked for two of Germany’s most in-demand designers and having recently garnered attention as a finalist for the Dutch Design Awards’ young designer category, starting his own studio is the logical next step for the 2014 Rietveld Academy graduate. 12

G LY P H

My concept for this zine was to break u much as possible. I accomplished that pull quotes I had as well as their length spreads of an image as opposed to sing

STEPHY CHUNG, CNN; JANUARY 19, 2017 ART WORKS BY SHEPARD FAIREY

‘HOPE’ ARTIST SHEPARD FAIREY

REVEALS NEW POSTERS TO PROTEST TRUMP

Shepard Fairey—the artist behind the 2008 “Hope” poster depicting then presidential candidate Barack Obama—has produced a new set of images in time for President-elect Donald Trump’s inauguration this Friday. The three posters feature Muslim, Latino, and African-American women. “We thought (they) were the three groups that had been maybe criticized by Trump and maybe were going to be most, if not necessarily vulnerable in a literal sense, most feeling that their needs would be neglected in a Trump administration,” Fairey told CNN. Fairey, along with artists Jessica Sabogal and Ernesto Yerena, teamed up with the non-profit Amplifier Foundation—a self-described “art machine for social change”—to produce works for the organization’s We the People campaign.

G LY P H

up all the texts with imagery as by having variation in the style of h, and varying when I had full page gle spreads and collages.

₲L¥₽H ISSUE 1 WINTER 2017

T Y P E M A G A Z I N E

I wanted the cover to showcase imagery from one of the articles since it is an image heavy publication. I chose the name GLYPH because glyphs are inherently images that are also typographic elements, which relates nicely to my intents when designing this zine and its content.