Futur(e)a by elee88

FUTUR[E]A

A Typographic Textbook Ezra Lee

Untitled (The Future Belongs to Those Who Can See It) Barbara Kruger â&#x20AC;&#x201C; 1997

TABLE OF CONTENTS Introduction: My Past and my Futur[e]a Page 7

A Brief History: Where the Past Meets the Futura Page 12

On the Grid: And Going Off the Grid Page 28

Terms of Agreement My Type of Dictionary Page 47

The Dating Game Pairing Your Fonts Page 61

The Lay of the Land Layout and You Page 91

Endnote I Hate This Font

Page 103

My Past and My Futur[e]a

My Typography I class started with an exercise that haunts me to this day. My type professor, an amazing woman and type expert Juliette Robbins, gave the class an exercise that started with a question: What is your favorite font? Some of the students in the class picked fonts like Didot or Helvetica. I picked Futura. There was no forethought to this answer, rather it was improvised on the spot and was the first thing that came to mind. My professor nodded and smiled and soon this became the font associated with me and my work. What was the exercise? To freehand draw my initials in the font that I chose. Ironically, this wasn’t that hard for me because Futura is geometric in nature and my initials (ECL) have a lot of straight lines. Imagine the poor girl that chose Didot, having to hand draw serifs on a piece of printer paper with nothing but a pencil and a ruler. I know for a fact that she was contemplating quitting halfway through and when she saw me with a ruler, some faint grid marks, and a smile on my face, she whispered to me, “Ezra I want to fucking kill you.”

Think Small Advertisement Volkswagen – 1960

My work for the class became so Futura driven after that day. I would look at the font and realize, “Huh, it is extremely versatile. It makes things look modern and clean.” After my third or so project with the font Futura in the limelight, my professor shook her head and said, “Ezra, I’m issuing a challenge for you: No. More. Futura. Use a Serif.” My world came tumbling down considering that my mind and my world operate around sans serif fonts. Why? They’re easier, modern, and beautiful. I texted my Dad a draft of this book and he said, “Why Futura? My favorite font is Garamond.” I responded with “My least favorite font is Garamond.” Introduction: My Past and My Futur[e]a

Let’s get lost in the font for a second, all of us. Close your eyes and imagine the words on an advertisement that changed our modern visual landscape for a second. Some of you can’t think of one, but the one that comes to mind, for me, is the “Think Small” advertisement from the 1960s (See Page 1). Art directed by the legendary Helmut Krone, who passed away in 1996, the advertisement ushered in a renaissance in modern advertisement design. The tagline is the exact opposite of what should be advertised, “Think big! Think outside the box! Think Loud,” but Krone broke up this one-track thinking, and thought big by thinking small. And the centerpiece of this design? A then underrated font called Futura. A geometric sans serif that made this advertisement seem modern and new. It’s influence? Let’s look at some advertisements in our modern-day visual landscape.

The Sneaker Make the Man Nike – 2017

Nike. One of the most famous athletic brands in the world, and the font in their logo and that makes the entire identity? Futura Condensed Extrabold. Now what does this mean? It means that fonts can stand the test of time. Looking from 1960 to 2019, Almost 60 years and the font Futura is still making headlines. One of the reasons why this is my favorite fonts. It is timeless in the sense that it always looks modern and new. Most people will look at this advertisement and not even draw it back to the humble grid it started on Geometric grid that Paul Renner made it on (more on that later), but nonetheless, this font has a history and every time it is used, a legacy is there. I got into typography haphazardly. In high school, I was pushed to join the Yearbook class because I knew the teacher and he needed more people in the class. The first day of class, the Editors in Chief asked the class, “How many of you want to be designers?” A few people raised their hands. “Photographers?” A scattered but strong group. “Writers?” The most of them all. “And how many of you just don’t know?” I raised my hand. They worried about this group first. Basically, how those first few weeks went was that we all tried our hand at different tasks. Taking photos of dances with shitty DSLR cameras. Getting quotes and writing fluff articles about the JV football games. And designing lifestyle spreads that would end up being time capsules for the year. By the end, I decided to be a writer and a designer because these were the things I liked the most. And two months into this class, I started designing entirely. Introduction: My Past and My Futur[e]a

I liked the fact that layout design was like putting a puzzle together. I was given these pieces, photos, articles, fonts, layout standards, and I had to fit them together into a page that made sense. I didn’t know what I was doing with the type, but I knew that I had to make it fit. What I know now is that we established a typographic hierarchy with a font called Bebas set in different weights and used a slab serif font called St. Marie to establish contrast. I don’t think they knew what they were doing either but by the end we made a book we were proud of.

Titanian Yearbook: SMall World San Marino High School – 2013

Later on in high school and in college, I fell in love with typography. I was curious about it’s mechanics. Why is comic sans a bad font? Why do teachers LOVE Times New Roman? What’s the difference between Helvetica and Arial? All of these questions I wanted answered and once I learned them, I wanted to know more. Now, typography is akin to a haunted lover. I love it, I want to know more. I want to absorb typographic knowledge and tattoo it onto my brain. But type surrounds us, and I can’t help but pick apart everything I see. Looking at the leading and the kearning to make sure it’s even. Making sure the hierarchy works. Critiquing the littlest thing like a diamond tittle on a lowercase j (these are still my least favorite things in typography – diamond tittles that is, not the lowercase j). Now I come to you. Who are you? You are curious. You want to learn typography and you want to figure out why some type works and why some don’t. The easiest way that I can teach you is with my favorite font: Futura. The grid is simple enough. The shapes are kindergarten shapes – circles and square. But what do I want you to learn? I want you to learn that you can do anything with type. Make it your own, break the rules, fuck up your grid. The possibilities are endless and you can usher in your own future. October 14, 2019

Introduction: My Past and My Futur[e]a

A Brief History

[Where the Past Meets the Futura]

Nazi Propaganda Futura: The Typeface by Annette Ludwig and Isabel Naegele â&#x20AC;&#x201C; 2017 13

Paul Renner Portrait Renner was the designer and mind behind Futura. He was born on August 9, 1878 and died on April 25, 1956.

Where were you in 1924? I like to think that I was, in my past life, a penguin slipping and sliding gleefully on a glacier in Antartica, hopefully, that glacier is not melted. The reason why I bring it up is because that is where this whole journey begins. We start in Germany where type designer Paul Renner was making a font for the Bauer Type Foundry. His assignment was simple, he was tasked to make a font that would compete with Erbar Grotesque, a sans serif grotesque font made by the foundry Ludwig & Mayer (released in 1926). To begin, he started with a grid and geometric shapes inspired by the Bauhaus movement. In fact, when comparing the font of his original sketches to what eventually was produced, the end result is drastically different. As Douglas Thomas points out in his book Never Use Futura, the letterforms were “extreme” and highly geometric. To make a geometric sans serif font, Renner wanted to exaggerate and the shapes and push legibility to the furthest that it could go. As seen in the image on page 14, Renner used extreme geometric forms in his first draft of the font and even created ligatures to further articulate his ideas. The lowercase “a” for example is rough and jagged where you can clearly see the geometric influences of the circle on the bowl of the letterform, straight closed terminals, and a square-shaped shoulder. The font was extreme and polarizing.

Above: Bauhaus Poster Joost Schmidt, 1923 Left: Original Futura Sketches Paul Renner, 1924

Note: Notice the differences in the iterations of the font. What are the differences? Circle them with a red pen.

Compare Renner’s early sketches of Futura (upper left) with the Bauhaus poster on this page. You’ll notice that the letterforms are clearly inspired by the Bauhaus typography. Bauhaus typography was designed to push boundaries, which encapsulates the very idea behind the school itself. The letters are strong, bold, and legibility is pushed. The word “Bauhaus” on the top is curved along the design and it doesn’t look even. Renner in his creation of Futura sought to make a font that pushed these same boundaries and played with the way readers interact with type. As the font progresses, it becomes more clear to read until finally reaching it’s final form. By the end, the font was completely different. The apex of the capital A is pointed and sharp compared to the lack of a capital A in the original draft. The lowercase g, while still a two story letterform, is connected and more traditional to the roman alphabet. Compare that the the lowercase g above it and you’ll see that there isn’t even a link to connect the loop to the body of the letter. It went a full 180º. 17

Upon it’s release in 1927, these more conventional and mainly legible letterforms are what ended up being distributed, but the more avant-garde letters can be purchased. As Thomas points out: The final letterforms support a facade of strict geometry that masks the sophistication of the letterforms. Many of the changes are subtle deviations from mathematical purity that are essential for obtaining the right visual effect.

Quote: Never Use Futura by Douglas Thomas (2017) Page 29 Photo (Left): Futura Inline Secimen Sheet

These slight changes are what made Futura the font of the time, and later the font of the future. The only font that would usurp Futura’s reign as the king of fonts is a little known swiss font named Helvetica. Oh, you know that one? Cool. The attachment of the “future” with the font comes from the Americans. American advertisements embraced the font as one that feels modern and futuristic all at the same time. It was everywhere from advertisements to newspapers, to books, to signage. Futura was hailed as the font of “Today and Tomorrow.” It stood out among its contemporaries of the time. Times New Roman, which had its release in 1932, felt rooted in its old serif past and instead was a remade interpretation. The point of Times New Roman, however, is that the serifs make it legible, that’s why your professor likes it when you use Times New Roman. This attachment to the future, however, will soon not bode well for the font. In 1932, the world was on the precipice of war when Germany elected Adolf Hitler and later World War II would breakout. Originally, like most companies, movements, or parties, the Nazies needed an identity, which at its simplest form, is a logo and a font. They started with the now-iconic black Swastika on a white circle engulfed in a red flag. The font? A blackletter stemming from German tradition called Fraktur. The font was specifically chosen to tie Germany to traditions, a type of “back to basics” thinking that rejected modern typefaces like Futura. In fact, after penning an anti-Nazi essay, Renner was exiled from Germany to Switzerland and Fraktur became the face of Germany. 19

Fraktur Font Example

Left: Nazi Propaganda Poster Virgina Holocaust Museum â&#x20AC;&#x201C; 1932 Right: 1936 Olympic Games Poster Featuring Futura

Later, though, this traditionalist thinking changed and the Nazis rebranded to being the “party of this future.” What does this mean? Futura was put back in the spotlight. The Nazi party started using the font as a part of their identity system and Renner was brought back to Germany. In 1936 for the Olympics held in Nazi Germany, Futura was the font that branded that identity system. It was plastered all over signs and the official font for the government documents in Hannover. While this still put Futura all over Nazi Germany, they were still deeply tied to their blackletter, that is until 1941, when they made the problematic discovery that Fraktur had Jewish origins. So, after that, Fraktur was out and Futura was in. Paired with the fact that the Nazis were at their peak in 1941, Futura was easier to be read in different languages, like French or Polish, as opposed to the harsh Fraktur.

Supreme X Louis Vuitton 2017

After the war ended and Hitler was defeated, the font was still around but it now had ties to the Nazis. Futura escaped and was able to reenter the modern visual landscape, but what about Fraktur? Now, when you look at Fraktur, it looks like an eyesore that will forever be tied to Nazism, but why Fraktur and not Futura? The main reason is that Fraktur is what started the visual identity of the Nazis. They used that font the longest and put it everywhere so it will forever be associated with the Nazis, whereas Futura escaped by the skin of its teeth. Futura, at the time, was already associated with being the modernistic font of the future. And later, after the war, Futura would be seen in things like the NASA material, Volkswagen, and Richard Nixon’s campaign. Let’s flashforward. Where is Futura now? It’s underneath your nose. I guarantee you that you have seen the font Futura today, if not in the past hour. It’s branded for popular companies like Forever 21, Nike, Adidas, and Supreme. It’s in popular culture like Wes Anderson films, Vampire Weekend, or even Stanley Kubrik movies. It influenced the work of many artists like Barbara Kruger and the Guerrilla Girls The fact remains though, that Futura barely escaped it’s horrific backstory and now has been engrained in the modern visual landscape.

Title card for the Royal Tenenbaums by Wes Anderson (2001)

Fun fact: Futura has been used in many of Andersonâ&#x20AC;&#x2122;s movies. For example, The Life Aquatic, Fantastic Mr. Fox, and Isle of Dogs. While Anderson has used other fonts in his movies, Futura makes a lot of appearances in his films.

Discussion Questions

Note: These questions are not supposed to be super stressful like homework or anything. Instead, I pose these questions for discussion purposes. If one of them triggers a response or an assignment posed on here produces some quality work, feel free to send them to me at ezradesignedthat@gmail.com. Questions: 1. What is the history that fuels the font Futura? Do you think the font should be separated from its history or do you think it should still be remembered? 2. What separates a font like Fracture from a font like Futura in regards to historical contexts versus modern usage? 3. What other font has a deep historical background? What is the background? Does the font still carry the burden of history? 4. Which sketch of Futura is more legible? Why? 5. What are the modern influences of Futura? Is it still seen today? Exercise: 1. Using a software of your choosing, design a timeline that features the font Futura in its original sketched version and with the current letterform model.

Scan for online material.

On The Grid

[And Going Off The Grid]

Joseph Müller Brockmann Portrait. Brockmann is highly regarded as being the “God of the Grid.” His design systems for typographic hierarchy are legendary and used to this very day.

Graphic designers operate on the grid. The grid is our god and we are her humble servants. Why am I stressing this so much? Because graphic design is like a puzzle. As designers, we are given the pieces: text, photos, headlines, colors, and our job is to assemble these pieces in a clear and legible way. Think of grid like it’s glue. Once you have this beautiful puzzle together, you want to glue it, or modge podge it, together so that way it is forever sealed and commemorated. Without the glue, once you hang the puzzle, it’ll fall apart, and that’s the grid. Without the grid, your design will fall apart.

Pages from Grid Systems in Graphic Design by Josef Müller-Brockmann

This entire book is made on a grid, and that consistency is key. Here, I’ve taken the liberty of outlining the grid for you so you can see what I’m working with. For the sake of consistency, most of this book operates on the same grid. That’s to make my life and your life as a reader easier. It’s easier for me to design with consistency: a consistent grid, a consistent type style and weight, and a consistent hierarchy. As a reader, you also love this consistency because you know what to expect and it makes this entire book easier to read. Consistency is key, and I’ll dive more into this in Chapter 6. For now, let’s back and focus on the grid. Grid becomes the most important aspect of a page when you are dealing with type. To quote another graphic design God, Eirk Spiekermann: Pages offer various levels of entry for readers, viewers, and occasional browsers. These books will have to look different than our time-honored tomes of linear reading, just as living rooms look different than bedrooms. Spiekerman uses the analogy of a room layout to map out his idea of a grid and that is perfect to describe what is really going on here. You are assembling furniture into your apartment. Chairs, couches, tables, and for the most part, you are organizing these into a grid. Putting the couch along one edge, two chairs at the end, and a coffee table in the middle and bam you have a grid. Type operates in the same way. You are aligning shapes, curves, and lines into a grid to form a letter. 33

First, I’m going to take you through the grid used in Futura. Later, I’m going to take you through different types of grids. And later in Chapter 6 we’ll talk about how to assemble these onto a page. Ready? Let’s go.

Specimen sheet of Futura Medium Barney Beauchamp

All fonts are built on a grid and Futura is no different. On the left of the page, you’ll see a specimen sheet for Futura. A specimen sheet is a document that outlines all of the letters for a font and has body text to show how the font interacts with itself. You’ll see the capital and lowercase letters as well as copy on the lower right side to show what the font looks like in paragraph form. Notice that there are also references to the different weights of Futura but these letterforms are not exactly on the specimen sheet. Some specimen sheets have all the weights but some only have the roman (or “normal”) weight. The lines represent the grid for Futura. Notice the points where the grid aligns with the font but more notably the points where the font doesn’t align with the grid. I have circled the perfect alignments of the font. See, for example, that the top crossbar of the F matches up with the crossbar of the T and they all alight to the top of the letters except the top of the A. Why is the point of an A taller than the rest of the other letters? These little bits of extra on the letter are called overshoots. Overshoots are optical corrections in a font in order to make it look even and aligned to the eye. Basically, it’s an optical illusion to make the font look like it is all one height. No font is going to be perfectly aligned on a grid. Why? Because then it looks weird and uneven. Take the letter V when compared to these other letters. Notice how I highlighted the fact that the V is actually a bit lower than the rest of the letters. This is an overshoot.

Now look at it when I make it all aligned. It looks shorter right? Geometrically, the point will look shorter to your eye than the rest of the letters. That’s why overshoots are important because they make the font look aligned.

Golden Section Ratio The golden section ratio is a mathematical grid that is used for perfect page alignments. Such a ratio can be seen in famous texts like the Gutenberg Bible and other Medieval manuscripts. Mathematically, the ratio is a:b = b: (a+b), and numerically it is 1:1.168. For publishing, the golden section ratio is perfect for texts because it wonâ&#x20AC;&#x2122;t block the gutter. You can summon the grid on InDesign and on the left, youâ&#x20AC;&#x2122;ll see what the ratio looks like on an 8.5x11 page and an A4 page.

Diagram of the Golden Section Ratio by Ellen Lupton from Thinking With Type.

Multicolumn Grid Looking at the Golden Section Ratio, that is systematically a single column grid. A multicolumn grid is more popular when it comes to art books and magazines. It allows the designer to have more room to play and establish a viable hierarchy. Looking at the multicolumn grid, it is easier to integrate images with text and with this, you can also break your grid as well when it comes to certain elements. Looking at the image, the second page has a horizontal image that breaks the grid, but notice that the text still falls in line.

Multicolumn Grid Diagram by Ellen Lupton from Thinking With Type.

Modular Grid A modular grid has similarities to a multicolumn grid except it also contains rows as well as columns. When designing, I personally set up my document to be a Modular Grid in order to help structure my headlines and my hierarchy. These types of grids aren’t new, and actually, Mr. Müller-Brockmann helped establish the legacy of the modular grid. Using these grids, it’s easier to establish your hierarchy and align your type.

Modular Grid Diagram by Ellen Lupton from Thinking With Type.

Baseline Grid The rock of your grid. The baseline grid turns your page into something akin to notebook paper and cements all the elements of your page. In order to make one, you must have your type leading already established and set the increments to be the same number as your leading. The baseline grid is key for making sure your text is even, establish other elements like captions and bylines, and it anchors all other aspects like photos or illustrations on the page. A hint to making one is to shy away from the automatic number for the leading of your font in order to have a nice whole number to work with. These grids are the glue in layout design.

Baseline Grid Diagram by Ellen Lupton from Thinking With Type.

Discussion Questions

Questions: 1. Why is a grid important in graphic design? 2. What is an overshoot? Give an example of a letter that has one. 3. What are the four types of grids and what is the difference between them? Exercise: Create a small magazine that implements all four grids. Make two versions: one with an exposed grid and one without.

Scan for online material.

Terms of Agreement

[My Type of Dictionary]

X-Height The height of the lowercase x in a font. X is the chosen letter because of its lack of ascenders and descenders and is generally the size of lowercase letters. Letters with a large x-height are more legible.

Baseline The line that indicates where the letters sit. For the most part, letters will rest on this baseline, but some have exceptions. Namely, script fonts have a tendancy of having letters that break the baseline.

Cap Height The height of the capital letters of a font. This is different from an ascender, but generally capital letters in a typeface will hit this height.

Apex The peak of some letter forms. The Apex refers to the meeting points of two strokes in order to form an angle.

Vertex The lowest point of some letter forms. The vertex refers to the meeting points of two strokes in order to form an angle. Note that some letter forms have an Apex and a Vertex, like the letter M

Ascender The point of a letterform that goes above the x-axis. These are also called extenders and other examples are h, b, and k.

Descender The point of a letterform that goes below the baseline. Other letters that have these characteristics include the lowercase g, p, and q.

Stem The main vertical stroke of a letter. While usually the stem is vertical, it can sometimes be horizontal and called a stroke. 51

Leg The lower downward stroke of a letter. Other letters with a leg include a capital R. When referring to the letter Q, the downward stroke can also be referred to as a tail.

Arm Horizontal or diagonal strokes on a letterform that connect to the stem. Other letters with arms are F, T, and the upward stroke of the letter K.

Crossbar The horizontal stroke in a letterform. Another letter with a crossbar is the capital H. Note that a crossbar does not intersect with the stem of a letter.

Cross Stroke A horizontal stroke that either meets or intersects the stem of a letter.

Shoulder A curved stroke that extends from the stem of a letter and follows through the letterform. Other examples include a lower case h or m.

Tittle The dot on top of a lowercase i or j. Tittle is an outdated term so instead, designers refer to it as a dot. Tittles or dots can be different shapes like diamonds or boxes.

Hook A curved arch that terminates a letterform. It starts at the stem and will complete a letterform, but it can also go below the stem like a lowercase t in some fonts (i.e. Garamond). Hooks are important because they can define ligatures.

Ligature The combination of two letterforms. Ligatures are imperative when establishing legibility in typesetting. The combination of letters like fi can sometimes be automatically corrected by your wordprocessor, but othertimes it has to be done manually. 55

Spine: The curved portion of a capital and lowercase s. The spine is key in font identification seeing that some fonts have a high contrast spine or a low contrast spine. A font like futura has a relatively flat spine.

Eye The enclosed space in a lowercase e. Sometimes this can be referred to as a closed counter, but the term eye exclusively applies to the lowercase e.

Closed Counter The enclosed space of a letterform. This space is fully enclosed and can be seen in letters like p, q, a, b, and d.

Open Counter The open space of a letterform. This space exists between the strokes of a letter and arenâ&#x20AC;&#x2122;t necessarily round. Letters with open counters include h, x, y, z, and v.

Discussion Questions

Questions: 1. What does it mean when a letter has a high x-height compared to a low x-height? 2. What is the difference between a crossbar and a cross stroke? 3. What is a ligature what why is it important in typography? Name other letter combinations that form a ligature. 4. What is the difference between an eye versus a closed counter? Exercise: You are designing signage for a hospital. Choose a font that would make good signage for it and explain why you chose those fonts using the type anatomy.

Scan for online material.

The Dating Game

[Pairing Your Fonts]

By no means is font pairing an exact science, I equate it to being a skill that either you are good at or you aren’t. Oftentimes, I get asked how I go through the process of pairing my fonts, and what I tell people is that I keep in mind 3 things: What is the project? Who is the project for? Why am I making this? A project that is a brand identity for a capsule collection for Chanel is going to look different than a poster for a band’s tour. You have to keep in mind the limits of your client but don’t be afraid to push the boundaries a little. A more indepth example is let’s say you’re doing a project for the New York Public Library because they have a new acquisition of Shakespere plays. The traditionalist in you would say, “go for a serif font, old style, something that matches the time.” This I would say you should push. Pitch a Grotesque sans serif. Go beyond and think abstractly because part of your job is the ability to push your client. This chapter is designed to teach you the different types of fonts out there and their classifications. Futura is considered to be a Geometric Sans Serif font. I’ll tell you more about what that means later, but this is something to keep in mind when you’re pairing your fonts. There are some essential classifications when it comes to fonts but what matters is how you pair them and use them together. Picture them as members of a team and you are the coach, all you’re doing is putting your best players forward. With that being said, here are some fonts.

TITLING GOTHIC Baskerville Italic

ABCDEFGHIJKL MNOPQRSTUVW XYZ abcdefghijklmnopq rstuvwxyz The quick brown fox jumped over the lazy dog.

Old London Alternate

Blackletter Blackletter fonts originally appeared in the fifteenth century and are commonly seen in Medieval Manuscripts or illuminated manuscripts from that time (Gutenberg Bible anyone?). These fonts usually give a feeling of traditional aesthetics, but in a modern context, these types of fonts have made a comeback and are seen as foils to modern ideas (see for example the skatewear brand Wasted Paris). Broken down, there are two types of blackletter fonts: Texturas which usually have more straight strokes and Fraktur typefaces which have straight and curved strokes and letter forms. A good indicator is the capital O or lowercase O to distinguish between these types of Blackletters. Suggested Font Pairings: Gemoetric Sans Serif, Transitional Sans Serif

ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklmnopq rstuvwxyz The quick brown fox jumped over the lazy dog.

Garamond

Old Style Serif Another style of type originating in the fifteenth century, Old Style Serifs are identified by a larger x-height and a slightly stressed axis on the capital and lowercase o. These fonts were originally for manuscripts, the oldest of which can be seen in the 1490s. These fonts are a good choice for typesetting and body copy seeing that they are incredibly legible and can be styled easily. Fun Fact. Claude Garamond is a French type designer from the 1400s that is famous for originating the italic letterform. Italics were helpful in this time in order to fit more letters on one line so less paper was used. Suggested Font Pairings: Any sans serif fonts, or maybe even a display font.These types of fonts are good for typesetting.

ABCDEFGHIJKL MNOPQRSTUVW XYZ abcdef ghijklmnop qrstuvwxyz The quick brown fox jumped over the lazy dog.

Baskerville

Transitional Serif Transitional Serifs exist in a more modern era, typically after the 1800s. These fonts have characteristics that can be considered calligraphic in nature. Identifying factors are a higher contrast between thick and thin forms, an upright axis on the letter o, and sharp details when it comes to things like the bowl of the letter g or the serifs on the font. These fonts are also seen as legible because of their exaggerated forms. Other examples include Times New Roman. Suggested Font Pairings: Like an Old Style Serif, these fonts are good for typesetting, I suggest pairing it with a grotesque sans serif.

ABCDEFGHIJKL M N O P Q R ST UVW XY Z abcdefghijklmno pqrstuvwxyz The quick brown fox jumped over the lazy dog.

Didot

Modern Serif Modern serifs date from the late 1800s onward and reflect the advances in technology when it comes to typography and type design. Modern serifs have an upright stress and a high axis and extreme differences between thick and thin strokes and forms. A lot of these letters (i.e. the lowercase y) end with a ball terminal and the serifs are usually bracketed. In the modern sense these fonts have been associated with high fashion thanks to magazines like Vogue. Suggested Font Pairing: Donâ&#x20AC;&#x2122;t use these fonts in your body copy, these are meant to be headline fonts. I suggest a transitional Sans Serif.

ABCDEFGHIJKL MNOPQRSTUVW XYZ abcdefghijklmnopqrs tuvwxyz The quick brown fox jumped over the lazy dog.

Snell Roundhand

Formal Script Formal script typefaces are designed to mimic calligraphy and cursive handwriting. Before, they presented a problem because they are extremely difficult to typeset, but now with OpenType features, they are more popular. Itâ&#x20AC;&#x2122;s important to note the ligatures of formal script fonts and always be cautious of legibility. The rule of thumb is to not use all cap settings on formal script fonts. Suggested Font Pairing: These fonts are tricky. I would suggest maybe using a simple transitional serif.

ABCDEFGHIJ KLMNOPQRST UVWXYZ abcdefghijklmno pqrstuvwxyz The quick brown fox jumped over the lazy dog. Lust Script

Casual Script Casual script fonts are the kidns of fonts you would see in the 50s for advertisements or headlines. They are designed to look they were handlettered by a brush. There really arenâ&#x20AC;&#x2122;t any rules with casual script fonts, they exist with varying x-heights and they can be connected or disconnected. The key difference between these and formal scripts is the brush nature of the font. Suggested Font Pairing: Another tricky font to use. Iâ&#x20AC;&#x2122;ve seen these types of fonts pulled off with a geometric or transitional sans serif. If you are feeling a bit risky, try a slab serif and see how that looks.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z The quick brown fox jumped over the lazy dog.

Znikomit

Slab Serif Slab serif fonts exist in a relm between a serif and a sans serif fonts. Notably, slab serifs have some letters that lack slab serifs or letters that do have slab serifs. Slab serifs are the straight terminals that end a letter form. These fonts were popular for stereotypical wanted posters in the wild west. Suggested Font Pairing: A really tall sans serif font or a casual script.

ABCDEFGHIJ KLMNOPQRS TUVWXYZ abcdefghijk lmnopqrstu vwxyz The quick brown fox jumped over the lazy dog.

Antique Olive Nord

Grotesque Sans Serif Grotesque sans serif fonts are the first types of sans serif fonts to be designed and produced. Upon their release, people thought they were hideous but they soon grew into fashion. Key identifying factors of a grotesque sans serif are little quirks in the letter forms (look at the closed counter form of the a), dramatic ink traps (like in the lowercase q), and exaggerated features. Suggested Font Pairing: Very versatile and goes with everything except scripts or a modern serif.

ABCDEFGHIJKLM NOPQRSTUVWX YZ abcdefghijklmno pqrstuvwxyz The quick brown fox jumped over the lazy dog.

Futura

Geometric Sans Serif Geometric sans serif fonts are sans serif fonts that are constructed with perfect geometric shapes. Many letter forms utilize circles, triangles, and squares. Futura, being the most famous of these fonts, is the reason why weâ&#x20AC;&#x2122;re right in the first place. A note about these fonts is that they often have legibility issues so they have a lot of overshoots and optical corrections. Suggested Font Pairing: Go wild, these fonts go with everything but be wary.

ABCDEFGHIJKLM N O P Q R ST UVW XY Z abcdefghijklmnop qrstuvwxyz The quick brown fox jumped over the lazy dog.

Gill Sans

Humanist Sans Serif Humanist sans serif fonts are in a league of their own. They are extreme calligraphic and are identified by their stroke contrast but itâ&#x20AC;&#x2122;s not as much as serif fonts. These fonts are a bit more high-key and are the star of the show when it comes to typography. Pairing wise, pair these typefaces with a more subdued font for the contrast. Suggested Font Pairing: Use these as headline fonts so pair it with a good body copy font like a transitional serif.

ABCDEFGHIJKL MNOPQRSTUVW XYZ abcdefghijklmno pqrstuvwxyz The quick brown fox jumped over the lazy dog.

Helvetica

Transitional Sans Serif The stars of the show. Transitional sans serif fonts are the fashion font right now (see off-white and their constant use of Helvetica). Transitional sans serif fonts are perfect for body copy because of their high x-height and vertical stress, making reading easy and fun. Use these fonts at your own risk because they are massively overused. Suggested Font Pairing: Suitable for all fonts.

ABCDEFGHIJK LMNOPQRSTU VWXYZ abcdefghijklm nopqrstuvwxy z The quick brown fox jumped over the lazy dog.

Golia Golia Sharp

Display Display fonts are Ezra’s favorite. They are fonts that break the rules and can’t be classified in the previously defined terms. They are weird and out there, some of them you can’t even read, but that’s okay. Display fonts are where art and typography come together to make something weird and cool. There are no hallmarks to a display font, the only characteristic is that they don’t fit in. Suggested Pairing: Display fonts work in contrast with simple fonts. I always like the look of a display font with a sans serif font, but nothing too complicated.

Discussion Questions

Questions: 1. What is the difference between an old style serif and a modern serif font? 2. What context would you use a formal script font for? 3. How many different types of sans serif fonts are there? Name them and explain their differences. 4. Why is a slab serif not a serif font? Exercise: Do a font pairing exercise using two different types of fonts. Pretend that you are making a poster and you limited to two types of fonts for a headline and body copy.

Scan for online material.

The Lay Of the Land

[Layout and You]

Women Make Art History Guerrilla Girls March 30, 2018 Art and Object Magazine 91

In 1985, the Museum of Modern Art (MOMA) in New York City opened an exhibit called An International Survey of Recent Painting and Sculpture. The exhibit featured 165 artists, 13 of which being women. As a response, seven women anonymously formed the group called Guerrilla Girls, and protested the exhibition by pasting posters around the East Village and neighboring areas. The result was a group of badass women protesting sexism and racism in the art world. Their work would later influence the work of many artists and activists in the future.

The Advantages of being A Woman Artist The Guerrilla Girls, 1988 The Tate

Why I bring this up is because as much as a typeface is just a typeface, what matters is how you use it. A lot of what to consider too is the implications of using a typeface and asking questions like: who designed it? What time period did they design it? How is it used today? Taking into account that Futura was designed by a man in the pre-World War 2 era and that it was a common font used in advertising, the Guerrilla Girls made protest art and reappropriated a font typically associated with capitalism and men in design. A clever and powerful statement. Layout itself, though, is about legibility and manipulation. What you are doing is assembling a careful puzzle that manipulates how a reader views and interprets key pieces of information. Bad layout is where you don’t know what information is being emphasized and what you are looking at, and we’ll go into that. For now, look at the Guerrilla Girls poster. It’s very clear what they are saying “The Advantages of Being A Woman Artist” is large and in the front while all the other pieces of information are secondary. While still important, it’s secondary in nature. Finally, they credited themselves at the bottom. What I’m saying is consider the reader.

Hierarchy is You Read This First

Then you would read this piece of information.

Finally, you read this. By the way, did you do something different with your hair? I love it.

All Graphic Designers are expert manipulators. We use text and image to trick your brain into reading something first rather than something else. The way we do this is something called hierarchy. Hierarchy is the deliberate ranking of information on a page that allows the reader to prioritize some pieces of information rather than others. It seems simple, but it can be rather tricky. The more pieces of information you are given, say for a poster, the graphic designer has to deduce which pieces of information are more important than others and emphasize or prioritize those pieces over others. How you could do that varies. Text size is a good start, making important chunks of information bigger than others. Color, or having important text be in a certain color. Lastly, having objects like lines divide important pieces of information. These are all good ways to do this, and fairly simple. Font pairings can also be used to do this and using certain fonts to distinguish between information, but this comes with a catch. Oftentimes, more than two fonts on a page starts to look cluttered and disorganized. Take this hierarchy for example: If you don’t drink water

YOU WILL DIE Graphic designers do this to manipulate a reader. You see “You will die” first which sparks an immediate reaction and causes you to read the rest of the text. Hierarchy and layout is manipulation in the finest degree. It causes people to analyze what they’re reading and graphic designers to focus on how to grab a person’s attention. Use this power wisely and carefully.

Word word word Word word word Leading

Leading is the space between two lines of text. The smaller gets the closer the two lines of text are to the point where they can overlap on top of each other. Typically when leadding, you have to be careful about ascenders and descenders.

Kerning is the space between two individual letters. It is important to make sure the space is even across all letters, but because of the way some letters are shaped, an illusion is created that they are closer or farther apart then they actually seem.

Tracking is the space between each letter of the word. Whereas kerning is the space between two individual letters, tracking looks at the word as a whole and the space between each letter. This is also called letterspacing sometimes. When tracking look at the word as a whole.

This is a paragraph of text about something. paragraph of text about something. This is a of text about something. This is a paragraph something. This is a paragraph of text about is a paragraph of text about something. This of text about something. This is a paragraph something. This is a paragraph of text about is a paragraph of text about something. This of text about something. This is a paragraph something. This is a paragraph of text about is a paragraph of text about something. This of text about something. This is a paragraph something. This is a paragraph of text about is a paragraph of text about something.

This is a paragraph of text about something. This is a paragraph of text about something. This is a paragraph of text about something. This is a paragraph of text about something. This

Justified left text, or flush left, is text where the paragraph lines up on the left side and the right side has the rag of the text. Typically, flush left text is easier to read than flush right.

This is a paragraph of text about something. This is a paragraph of text about something. This is a paragraph of text about something. This is a paragraph of text about something. This

paragraph of text about something. This is a of text about something. This is a paragraph something. This is a paragraph of text about is a paragraph of text about something. This of text about something. This is a paragraph something. This is a paragraph of text about is a paragraph of text about something. This of text about something. This is a paragraph something. This is a paragraph of text about is a paragraph of text about something. This of text about something. This is a paragraph something. This is a paragraph of text about is a paragraph of text about something. This is a paragraph of text about something.

Justified right text, or flush right, is text where the paragraph lines up on the right side and the rag is on the left. This text is harder to read because it goes against the way we typically read from left to right.

This is a paragraph of text about something. This is a paragraph of text about something. This is a paragraph of text about something. This is a paragraph of text about something. This is a paragraph of text about something. This is a paragraph of text about something. This is a paragraph of text about something. This is a paragraph of text about something. This is a paragraph of text about something. This is a paragraph of text about something. This is a paragraph of text about something. This is a paragraph of text about something. This is a paragraph of text about something. This is a paragraph of text about something. This is a paragraph of text about something. This is a paragraph of text about something. This is a paragraph of text about something. This is a paragraph of text about something.

Justified text is when there is no rag and the text is a straight line throughout the block of text. This is extremely hard to typeset. 97

This is a paragraph of text about something. This is a paragraph of text about something. This is a paragraph of text about something. This is a paragraph of text about something. This

The rag is the unjustified part of the text. Typically speaking, the rag is supposed to be as even as possible and your goal when typesetting is to make it look as even and uniform as possible.

This is a paragraph of text about something. This is a paragraph of text about something. This is a paragraph of text about something. This is a paragraph of text about

An orphan is a single word or syllable that ends up on its own line of text in a paragraph. This is a big no-no and should be avoided.

This is a paragraph of text about something. This of text about something. This is a paragraph something. This is a paragraph of text about is a paragraph of text about something. This of text about something. This is a paragraph something. This is a paragraph of text about is a paragraph of text about something. This of text about something. This is a paragraph something. This is a paragraph of text about is a paragraph of text about something. This of text about something. This is a paragraph something. This is a paragraph of text about

is a paragraph of text about something. This is a paragraph of text about something. This is a paragraph of text about something. This is a paragraph of text about something.

A widow occurs when a single word or syllable begins a column of text. This also should be avoided.

A paragraph is a collection of words that form sentences. Think about it . Right? I know I’m amazing. A paragraph is a collection of words that form sentences. Think about it . Right? I know I’m amazing. I love typography don’t you? A paragraph is a collection of words that form sentences. Think about it . Right? I know I’m amazing. A paragraph is a collection of words that form sentences. Think about it . Right? I know I’m amazing. I love typography don’t you? A paragraph is a collection of words that form sentences. Think about it . Right? I know I’m amazing. A paragraph is a collection of words that form sentences. Think about it . Right? I know I’m amazing. I love typography don’t you?

A pond (or river) is a gap in between words or punctuation in justified text. These need to be avoided when working with justified text. Good luck.

h me oh my. I wanna make you mine. Oh me oh my. Oh me oh my. What’s your favorite fruit? I like grapes. Oh me oh my. Oh me oh my. What’s your favorite fruit? I like grapes. Oh me oh my. Oh me oh my. What’s your favorite fruit? I like grapes. Oh me oh my. Oh me oh my. What’s your favorite fruit? I like grapes. Oh me oh my. Oh me oh my. What’s your favorite fruit? I like grapes. Oh me oh my. Oh me oh my. What’s your favorite fruit? I like grapes. Oh me oh my. Oh me oh my. What’s your favorite fruit? I like grapes. Oh me oh my. Oh me oh my. What’s your favorite fruit? I like grapes. Oh me oh my. Oh me oh my. What’s your favorite fruit? I like grapes. Oh me oh my. Oh me oh my. What’s your favorite fruit? I like grapes. Oh me oh my. Oh me oh my. What’s your favorite fruit? I like grapes. I like grapes.

A drop cap is a visual lead in into a paragraph or block of text that happens when a letter is larger than the rest of the text. This is a good way to ease your reader into a chunk of text.

Hyphenation is when a word is cut off by the syllable in order to start a new line of text. These aren’t bad, and are actually really good tools to fix a rag. There are some rules, however. Never use a hyphenated word to start a sentence. Hyphenated words can not come in two consecutive lines. No more than 3 hyphenated words in a paragraph (depending on the length of the paragraph but this is the general rule).

Discussion Questions

Questions: 1. What is hierarchy? 2. Is it important to look into the background of a typeface (i.e. designer, time period, usage) before deciding on a typeface? Why or why not? 3. What is the difference between kearning and tracking? 4. Explain the difference between flush left, flush right, and justified text. Exercise: Type set a New York Times article using flush left, flush right, and justified text. Bonus points if you use a drop cap.

Scan for online material.

101

I Hate This Font I love Futura, it’s a world within a typeface, but with that being said, I rarely use it. This project marks the first time in a year and a half when I used this font. Why? Because I consider it to be a crutch, a go to that yes looks clean and modern, but at the end of the day, it makes all my work look the same. Part of what I set out to do is make sure that my work looks distinct and different from each other and yet I want it to exist in its own little world, but having one font rule my entire portfolio is not sustainable.

Forever Barbara Kruger Sprüth Magers, Berlin

On a broader spectrum, I think typography is a beautiful thing. It is so overlooked it’s almost criminal. Everyone focuses on the message rather than how it’s communicated. A famous example of this concept is the Palm Beach ballot for the Bush V. Gore election in 2000. The designer of that ballot was faced with a challenge in that the residents of Palm Beach, Florida are old and would have a hard time reading the font of the ballot. The solution? A butterfly ballot where the nominees are staggard. Logically, you would think that Bush, being the Republican candidate, would be number 1 and Gore, being the Democratic candidate, would be directly underneath at number 2. In actuality, because it was staggard, beneath Bush was Pat Buchanan and Gore was number 3. What does this mean? Typography dictated an election and rewrote history. Once you learn the mechanics of this, you can’t really unsee it. Imagine me, walking up 9th avenue trying to get a haircut or go to the movies. All I see around me is type. Type on signs, type on the ground, type on people’s clothing. Sometimes, I’ll say to myself, “Oh that’s cool. I wonder how they did that?” Oftentimes, however, I say, “I hate that font.” As pretentious as that sounds, I can’t unsee type. A bad font is burned into my head, but a good font is like staring into the gates of heaven. I hope that one day, you will be able to see this too. What I want you to learn is that typography is useful. Type can make or break you, your project, your company. Think of it as a tool that when utilized makes all the difference. That being said, I’ve seen type be the judge, jury, and executioner. Love your type and it will love you back, I promise. 103

Acknowledgments This book is a labor of love. I made it to express how much I love typography and how much I love this fucking font. With that being said, I didnâ&#x20AC;&#x2122;t do this all by myself:

Thinking of You Barbara Kruger Los Angeles Museum of Contemporary Art, 1999

Firstly, Catherine Katsafouros, thank you from the bottom of my heart for helping me spearhead this project. This book is as much my creation as it is yours and I could not have done it without you and your guidance. You created such a nurturing and supportive creative environment for me to make this book and to not feel judged and honestly without this class and your guidance, this book would never have gotten made. Secondly, Amy Aronson and the New Media and Digital Design department at Fordham University, thank you for being my home for four years. And Professor Aronson thank you for hearing me complain about everything from my schedule to my general overall academic anxiety that has plagued me for four years. To Juliette Robbins and Lucrezia Russo at the Paris College of Art you both helped ignite my love for typography and this is a testament to everything you have taught me. I just hope that I did you proud. Lastly this book is heavily inspired by the work of Paul Renner and Barbara Kruger. Mr. Renner thank you for your font, I am in awe of you. And Miss Kruger, I have never met you but I hope to one day discuss art and design with you over coffee in Central Park. Thank you all, Ezra Lee

105

Works Cited & Resources Lupton, Ellen. Thinking with Type: a Critical Guide for Designers, Writers, Editors, &amp; Students. Princeton Architectural Press, 2010.

Plaque on the Moon (1969) Digital Arts Online

Seddon, Tony. Let’s Talk Type: an Essential Lexicon of Type Terms. Thames &amp; Hudson, 2016. Spiekermann, Erik. Stop Stealing Sheep &amp; Find out How Type Works. AdobePress, 2014. Thomas, Douglas, and Ellen Lupton. Never Use Futura. Princeton Architectural Press, 2017. Resources: Type Director’s Club (https://www.tdc.org/) Thinking With Type Online (http://thinkingwithtype.com/) Typegeist (http://typegeist.org/) Adobe Fonts (https://fonts.adobe.com/)

107