Typography: The Art of the Letter

1-booksThe next installment of our ever expanding series of Graphic Design related blogs will focus on Typography! While there is enough to say about type to be its own website, this time we’ll be focusing on type in relation to logo design, but these same tips can be applied to most situations where there is a type choice that has to be made.

To describe typography simply, it would be the art of arranging type to be visually appealing. That would be the equivalent to explaining painting as “the art of putting paint on a surface to look nice,” as both painting and typography are actually pretty complex. Since the invention of the written word, type has been our window to our imagination and how it looks affects how we perceive it. Much like our earlier color related blog found HERE, typography has a myriad of variables that can determine whether a certain font is legible or illegible, classy or childish, antiquated or modern, etc. We will be looking at some of these distinctions so when you need to choose a font or make a decision about type, you will have a better idea of what is applicable and when.

2-metal-type
In the printing press days, type was laid out by setting out metal bits with letters on them. Every poster or book page was composed of a sea of little metal letters in blocks. The “font” of a typeface was the set of a certain typeface in a certain style.

*As a quick note, I will be using the term typeface to describe families of type instead of “font.” Fonts are technically more specific within a type family; for example, Helvetica is a typeface, but Helvetica Bold or Helvetica Italic are fonts within that family. Many people use them interchangeably, but so you know what I mean when I say typeface, I’m referring to the type family.

3-Wingdings

The first thing to discuss when it comes to typography is classifying them. There are many different ways to classify a typeface but there are three very distinct orders that a typeface can be sorted into. These three orders are serif, sans-serif, and script. Sadly, Wingdings does not fall into any of these categories.

4-serifsA serif typeface is any type that has small lines extending from the ends or corners of letters. These little marks are called serifs and really the only thing that distinguishes serif typefaces from other typefaces is that they have them and others do not. Serif typeface can be thin and elegant or the can be thick and bold, so this order of typefaces is pretty broad. A Sans-Serif typeface just means that the family of letters do 5-sans-serifnot have any serifs. That’s another really general category for type because like their serif cousins, sans-serif type can be thick or thin and have a wide variety of looks depending on the typeface chosen. If you want to read more about letter anatomy, check out Creative Bloq’s type terminology blog that breaks down every term related to type!

6-script

A script typeface is any type that is designed to be calligraphic or handwritten. Script type can vary from being sloppy handwriting to being immensely well crafted with numerous flourishes on the letters, especially on the capitals. This is another really wide category, but it is important to note that even with these flourishes, these do not count as serif typefaces because their visual intent is to look handmade.

7-Roman
This image is from the Wes Adams interview linked below!

So with a little terminology out of the way, we can start to discuss what these typefaces evoke in us and why. Often you’ll find that within a serif typeface family, you’ll find one of the options for it to be available as “Roman.” The Roman classification comes from the origin of the first real serifs, as Roman type often had serifs. There is debate on what purpose the serif served back then (my favorite theory is that when you’re carving things with chisels, serifs are going to happen eventually so they made them part of the aesthetic), but the modern interpretation of a serif typeface is that it has a sense of history attached to it. We identify many serif fonts with the time they were used and they evoke a feeling of antiquity from that era; is there anything that says “Old Timey Newspapers” more than American Typewriter or Courier which are based off of letterpress type?

8-Serif
Sharper serifs and more calligraphic letters are usually a sign of an older typeface design.

Some typefaces are designed to evoke the mood or tone of a time while being disconnected from that time. Iowan Old Style is a typeface that looks as classic Roman as you can get, with its letters resembling Roman pillars, but this typeface was designed in 1990 by American sign painter, John Downer. It should be noted that serif typefaces, like all of them, can have line variation without it changing the font category. Looking at Iowan, this typeface has variation in the stroke that adds to the elegance of the letters, whereas Courier has very little variation so it feels very mechanically made. This presentation will be of the utmost importance when it comes time to pick your typeface: What is the message you want the type to convey? If you’d like to read about serifs and Roman type from a modern type designer whom also carves out type, read this interview Medium.com conducted with designer, Wes Adams! 

9-headline

If serif type evokes a feeling of antiquity, then sans-serif typefaces appear very modern to our eyes. Sans-serifs have not been around as long as their serif cousins; they were originally created to be attention grabbing “headline” fonts. The first sans-serif typefaces were very blocky, so they used up more black ink than their serif counterparts and were considered much bolder. To this day, we use sans-serif type in our road signs to be as attention grabbing as possible. Helvetica is the most widely used typeface in the entire world and was originally created to be used as a very simple, easy to read type for signage; Helvetica is so famous, a documentary about it was made that you can watch here for a small fee, if you like documentaries about type. Sans-serif type can still be categorized by the era in which they were created. Because they were originally designed to be headline typefaces, classic sans-serif type tends to be more compressed horizontally, to fit as many letters as possible into a headline.

10-sans
How a typeface renders their “a” and “g” are indicators of the era in which it was designed!

More modern sans-serif typefaces tend to take up more horizontal space per letter and tend to be more geometrically designed. Futura, for example, the lower case o is a perfect circle while Helvetica’s lower case o is more of an oval. This focus on geometric design and freedom with space makes modern sans-serif typefaces feel more unlimited and futuristic (Futura has it built into its name after all). You want to use a sans-serif typeface if you are looking to convey a sense of sleek modernism, although there are levels and degrees to it.

11-calligraphy
Offset printing changed everything for the world of typography, allowing more typefaces to be usable in print, including handwritten and script typefaces.

 

Script typefaces are more widely varied than serif and sans-serif since they are often less easily determined by their letters but more on how they just feel. While we can describe the differences between Helvetica and Futura by the shape of their o’s, g’s, a’s, and x-heights (technical terms that mean a lot in classifying typography, but too technical to discuss here), really the main categories of script typefaces are casual or fancy. Casual typefaces are often just designed from someone’s actual handwriting. Most of the free script font files you’ll find online will be vectored versions of someone’s handwriting (learn more about vectors here), which make them less than ideal for logo or design usage unless you want to convey a feeling of singularity with it; for example, using Leonardo DaVinci’s handwriting on a brand of brushes or sketchbooks that are based on what he used, would be a great idea because it makes it feel more tied to the unique person that used or created the product.

12-script
Champignon does not look good in all caps…

This would give off a feeling of a personal touch, rather than a corporate one, which can be useful in a business’s image. A fancy script typeface has all of the flourishes you could expect to see on your typical wedding invitation. These precisely made typefaces are some of the hardest to wield in most situations; because they’re meant to look like they’re hand made by a master calligrapher, you couldn’t use them in ALL CAPS because they would just be hard to read. Script typefaces, invariably, are not great for body copy, so try to avoid using these as the typeface of the articles you write for your blog and save them for Headlines if you want them to have an elegant, albeit tricky to read, feel. Script typefaces do have their place in graphic design, but you will want to pair them with something more legible in most every case.

There are some universal aspects to typography that we must consider no matter what type categories are chosen for a given design. It is important to create a sense of balance in a work, whether it’s a logo or a website. When working with multiple typefaces, you want to examine and compare numerous fonts to get a sense for what looks good and what doesn’t. This portion of design is more up to the discretion of the designer or the beholder, but there are some good guidelines to keep in mind when you’re putting fonts together.

13-differences
Believe it or not, these are totally not the same typeface, so using them together isn’t helpful.

If you chose the font Helvetica Bold for your headline type and then chose Arial Bold for your body type or sub-title, you would be picking two bold, sans-serif fonts together that look very similar. In this example, having some variety of type would be helpful, like choosing a serif typeface that is not bold, or even going with a regular version of the same typeface for the body. Pick something that has a good balance of differences without being too radically different. Another example, Futura Bold (sans-serif, modern, wide) would look better with Avenir Book (sans-serif, also modern, thinner strokes) than with Baskerville (serif, old fashioned, very proper) or Impact (sans-serif, bold, compressed).

14-Futura
The trick is finding a typefaces that echo your message but look nice together.

If you want to pair a serif with a sans-serif, which works well because serif fonts make for really easy reading in body copy, you can try to choose a pair that might convey the same feeling, or are designed to look like a very specific time that you want to establish. A type treatment that needs a Roarin’ Twenties feel, for example, would look great with AC Mountain as the headline (sans-serif, art deco, compressed) and Josefin Slab for the body copy (serif, simple shapes, easy to read). While this may seem like a lot to consider, ultimately you can boil down type balance to very simple terms: Does it look okay? If one typeface is too similar to another, if they clash too much, or if the fonts just aren’t really meant to co-exist, you’ll be able to feel it in the type. A good technique to use for picking out your typefaces is to look at other examples in the realm of what you’re looking for. If you’re designing something for a Victorian cafe, look up what typefaces were used in that era and pick something that they used or something that is appropriately close. Graphic Designers are often looking to the past for design inspiration, so when in Rome!

15-20s
These typefaces imply a lot about what the establishment is like, so choose your type wisely!

With design in mind, let’s look at times when one of these type categories would be preferred over another. We’ll look at some concepts for businesses and based on their feeling, prescribe a typeface category and narrow it down to an era or look that will make sense for each one.

Example 1: Pulp is a new juice & smoothie company being established in the heart of a big city. Their goal is provide their health conscious clientele with a hearty, organic beverage that will be both delicious and invigorating. Their interior would be smartly and forwardly designed: modern chairs and tables, simple tile floor, and their color scheme is something colorful and bright but not too busy.

Immediately, I wanted to use a sans-serif typeface for this company. They want to appeal to a modern set of customers, so that would immediately cross out the serif and script categories of type. Wanting to represent the fruit aspect of their business in their icon, I 16-pulpchose an orange because the shape is a simple circle (geometric shapes are common in modern design schemes) and picked out a sans-serif typeface that fit well within it. I went with a more compressed font so I could fill out the vertical space of the logo more easily. I also chose this shade orange because it has more yellow in it, which adds some more sunshine and happiness into the logo, while it still has very geometric divisions within it and a type treatment that is both modern and playful with the rounded corners. The typeface I went with is Sequel, which had all of the aspects that I needed to convey their message. This isn’t the only way to solve this example, but this is how I personally approached it. Let’s look at one more example.

Example 2: Ghost Coffee is a small coffee shop starting up by some serious horror movie buffs. They want to make a cafe themed around horror stories and their decor is set to resemble a haunted house. While the feeling is ghoulish, they don’t want to scare people away, so they want something that will feel friendly while at the same time let people passing by know what to expect.

Because Ghost Coffee has a classic feeling to it, I went to the serif category of typefaces. They want to have a horror movie feel, so I picked a typewriter-like type style to capture the feeling of old classic horror stories that might have been in a newspaper or a pulp novel. American Typewriter is the perfect typeface because it has the typewriter aspect while being a very fun font with it’s rounded corners and serifs. I could have picked a similar font with squared ends, but it would feel more modern and less playful, which I didn’t want in the design. To make something that complemented the type treatment, I created a simple ghost drinking coffee vector image.17-ghost I wanted to make something cute to get people’s attention while also letting passersby know that this is a friendly shop to walk into. I also chose to use a thinner, more uniform line for the ghost so it would contrast with the much thicker and larger strokes of the type. If the font were smaller or if I had chosen a thinner typeface, the ghost would match too much with the name and become less distinct.

Typography is often really a question of taste. Most people do not know why a certain type choice works and when the same type choice in another situation doesn’t, but they can definitely feel when something feels right or feels out of place. To truly get a handle on type, knowing the when and why of typefaces can make choosing them easier. Once you know more about why these letters came to be shaped the way that they are, you will have developed a taste for type that will help you convey your message with ease.


Newer Post