Type Exercise: Designing a Cliché

Published on April 30th, 2008 || 3 Excellent Comments

This is a type design exercise I did while I was attending the Art Institute of Phoenix. It proved to be one of my favorite projects, so I decided to share it with you here.

Project | Typographically Represent a Cliché

Purpose

To understand the expressive quality of words in a phrase and explore type as a graphical element.

Exercise

Choose a common cliché such as “keep a stiff upper lip,” “smoke like a chimney” or “between the devil and the deep blue sea.” (Keep in mind that I am in the U.S. and these may not be clichés in your country). Typographically represent the cliché. You can create illustrations from the letter forms and use color if you choose. Avoid introducing other graphical elements—limit yourself to type.

Format

500px x 300px

Typographical cliche design.

Here is the version I did for my designing with type class at the Art Institute of Phoenix. I later turned it into a magazine spread for a 10K run.

What do you think of it? Is there anything you would have done differently?

Type Exercise: Creative Type Alignment

Published on April 4th, 2008 || 3 Excellent Comments

After generating so much interest with my first type exercise, John at i Love Typography asked me to put together regular exercises for the readers of his blog. I believe he will be turning it into a contest, so if you would like to participate, visit iLT for contest rules. As for me, I’m really excited about it. Like I said before, I think doing these exercises will help me stretch how I think about type and I am curious to see what others will come up with for the same projects.

Since I have already been working on the exercises in the book Designing With Type I figured that would be a good place to start. The third exercise in the book is about understanding different ways to arrange type: justified; flush left, ragged right; flush right, ragged left; centered and random. I am modifying the project slightly to encourage creativity. Consequently, we won’t be investigating the first four mentioned arrangements. If you don’t already have a solid understanding of them, I highly encourage you to learn all that you can.

Project | Random Type Alignment

Purpose

To experiment with random type alignment and how that decision can effect design, legibility and communication.

Assignment

Choose the typeface from the options below and arrange the corresponding text using random alignment. Use black or shades of gray text on a white background. Set the name of the typeface at a display size of your choice and the corresponding text at normal body text size—usually 14-point or below. Before you start, take a look at these alignment concerns: what you should avoid. On top of those concerns, keep the text running on simple horizontal lines—avoid rotating it or running it along a curved path.

You can use any font or any combination of fonts offered within your chosen typeface. The goal is to create a design that enhances the message of the text and is visually appealing.

Typeface Options

Garamond: get the text here
Baskerville: get the text here
Bodoni: get the text here
Century Expanded: get the text here
Helvetica: get the text here

Format

500px × 500px

My Solution

Of course I wouldn’t ask you to do an assignment without providing you with an example. I chose Bodoni since I did not find a use for it in my last exercise and it is probably my least favorite font on the list. I have my reasons, but my main concern is how the high contrast between thick and thin strokes makes Bodoni harder to read than the other options. In any case, I am glad I chose it. I have a new appreciation for Bodoni as a display face and can see how it could benefit me in future projects.

Bodoni Random Type Arrangement

I spent quite a bit of time thinking about where I wanted line breaks to fall and how to randomly align without making it appear cluttered. The body text inspired a few of my decisions—like leaving additional leading around “between the thicks and thins” to enhance that contrast. The leading is loose throughout because the text told me to. I also chose to highlight a few of the words so the reader would understand their importance regarding Bodoni. What do you think of my design? Do you understand the flow of it?

Random alignment is only useful in specialized situations, however I feel it can really add personality to a design that the other text alignment options cannot. How do you feel about random text alignment? Do you think it has a place in design or would you rather see more traditional alignment options?

If you choose to participate in the exercise, please let me know where I can view your design with a trackback or by posting here.

What’s Your Logo Font?

Published on March 26th, 2008 || 9 Excellent Comments

Personal Logo
A few people have inquired about the font I chose for my personal logo. When I first chose the font, I selected it because it felt like me. Could I be any more ambiguous?

When I was searching for the perfect font for my logo, I wanted something inviting, somewhat feminine and dealt with the negative space between letters well — the k and y can cause problems in particular. I wanted a font with warmth — one that felt slightly personal. On the other hand, I did not want a script font. My personality is too structured for script.

I finally fell in love with Baker Signet. Its calligraphic influence combined with its roman structure spoke to me. Not surprising to see its handwritten quality when you note that it was designed by American calligrapher Arthur Baker. The serifs are small yet are the perfect finishing touch to the letterforms. The large openings on the a and e allude to my open nature and, when combined with the tight kerning, it helps represents my reserve to allow myself to be open to absolutely everyone. The sweeping descender on the y cradles the rest of karly and leads the eye back to the start of my name before moving on to my last name. The narrow set-width helps the overall shape of my name and keeps it from running too long.

Baker Signet Font from Logo Diagram

As far as I can tell it only comes in one font weight even though I have read in several different locations that the bold version of the font was used in the Coke logo.

Diet Coke Logo with Baker Signet Bold

Not just bold but also oblique? I cannot find that version of the font anywhere, I guess I need to be Coke to be special enough to own it.

To help illustrate some of the concerns I ran into with my name in other fonts, let us take a look at it in the same fonts as my previous post.

Different font options for Karly Barrett

Notice the similarities between the shape of Baker Signet and Adobe Garamond. They both have those large openings on the e and a, small set-width and low contrast between the thick and thin strokes. Although, Garamond is one of my favorite fonts, I felt it was not personalized enough for this purpose. Baskerville gives my name a much lighter feel, but my logo mark called for a slightly bolder font to help balance the weight of it. Bodoni starts to feel more masculine. I am not a fan of how my name looks in Century — those slab serifs make me think of a typewriter and lose the personal feel. As for Helvetica, it does not even begin to hit the mark of what I was trying to achieve. It feels very corporate and somewhat sterile.

This is not to say these were the only fonts I explored. In fact, I cannot even remember looking at these in particular when I did my original search.

What do you think of my choice? What font did you choose for your own personal logo? Why did you choose it?

Designing Expressive Words

Published on March 20th, 2008 || 28 Excellent Comments

The fifth project in Designing with Type is to explore the expressive quality of words through typography. I remember doing this project on several occasions while I was attending the Art Institute of Phoenix, but this time around, I gave myself greater parameters.

  1. I limited myself to the five classic typefaces the book discussed in great length: Garamond (Old Style), Baskerville (Transitional), Bodoni (Modern), Century (Egyptian/Slab Serif) and Helvetica (Sans Serif). The idea was to challenge myself by avoiding the thousands of display typefaces that could easily express the word just through the style of the typeface. Plus, it is nice to study these specific typefaces more closely.
  2. I had my roommate choose the words for me. When I did this project in school, I got to select my own words. That often makes it easier, but as a graphic designer, I have found it is extremely rare that a company asks me to design a logo for them and lets me name their company whatever I like. Did I say rare? I meant that has never happened to me. Therefore, I felt I should practice with words someone else gave me.

Project | Expressive Words

Purpose

To typographically enhance the meaning of a single word.

Assignment

Select five words and explore their expressive quality by manipulating the letterforms. To achieve the desired effect, avoid simply repeating the words or creating an illustration from the letterforms. The best solutions not only enhance the word’s meaning but are clever and aesthetically pleasing. Sometimes an unexpected effect can be achieved when the typographic solution contradicts the meaning of the word, setting “big” with small type, for example.

Bright expressive word design

The first word she gave me was bright. This one proved to be the hardest for me. I started by thinking about the word and reading multiple definitions. I could have gone with bright light, a bright idea, bright color or bright in terms of intelligence. As far as I was concerned, bright color was out because I had no clue how to represent that typographically in black and white. After sketching a few ideas, I settled on this solution. I think it can represent bright light, bright idea and intelligent — depending on how you interpret it. FONTS: Helvetica Neue 55 Roman and 35 Thin

Charge expressive word design

My next challenge was charge. I really liked the idea of the letters working together to ram or charge at the “E” at the end of the word. I enhanced it more by playing with the weight of the letter to give an idea of greater force as you move across the word. Fonts: Helvetica Neue 37 Thin Condensed, 47 Light Condensed, 57 Condensed, 67 Medium Condensed, 77 Bold Condensed and 75 Bold

Bloom expressive word design

After my masculine battering through letters, she gave me bloom. I wanted this word to have a feminine quality to it. The type solution has actually given me a new love for Baskerville. Look at the beautiful shape of those letterforms. They feel taller than Garamond, which helps with the feeling of growth. They are also more feminine than both Century and Bodoni — Baskerville’s letters have a curvy nature, elegant brackets and beautiful balance between thick and thin strokes. Not to mention that asterisk looks almost like a floral dingbat. FONT: Baskerville Regular

Lost expressive word design

I then moved on to lost. I must not have thought much of the word when she originally gave it to me because I had to have her remind me what it was. It was lost in my memory. I played around with the idea of taking parts of the letters away as if they were lost. I ditched that idea for a more legible solution. I tried the word the opposite way with LOS and T floating by itself. However, I started to think I was trying to communicate in Spanish. This arrangement appealed to me the most. The L does not seem to know where it belongs. I wonder if the meaning would come across if the L were missing all together. FONT: Century Regular

Magic expressive word design

My final challenge was magic. My sketches included replacing letters with similar letter shapes — like two inverted Vs to make the M. However, I thought it would not be clear enough that the Vs were creating an illusion of the M. If the reader does not understand the point is the illusion, the concept is lost. I kept thinking magic makes me think of fanfare, wands, top hats and making things appear and disappear. However, I did not want to light the word up by surrounding it with asterisks. I finally came up with a solution where you might think the “agic” is appearing out of the M or disappearing into it. FONT: Adobe Garamond Regular

The only font I was not able to use was Bodoni. I did not like the feel it gave to any of the words she chose for me. That is not to say I think Bodoni does not have a purpose, I just did not find a use for it in this exercise.

What do you think of my solutions? How would you express the words differently?

Designing with Type

Published on March 18th, 2008 || 2 Excellent Comments

Designing With Type Book Cover
I have been feeling sick for about a week and a half now. Over the weekend my immune system finally said, “You win!” Consequently, the couch became my constant companion except for my short trip to the bookstore for some new design books.

I could probably vent for an entire blog entry about how poorly designed most graphic design books are, but I will just say: yikes! I cannot be the only designer that has a hard time reading a design book that is full of clutter and has little flow.

After rejecting book after book based on poor design, I finally settled on two typography books. As a graphic designer, I can never know enough about typography. Almost every design I do includes type in some way. On Saturday, I poured through the first of the books — Designing with Type: The Essential Guide to Typography Fifth Edition.

This book stood out among the other design books because of the ease and simplicity of its design. Moreover, it has been nine years since I took a basic typography class. I firmly believe that to excel in anything you have to have a solid grip on the basics. I feel that includes periodically relearning them. As it turns out, with my experience and knowledge, reading a basic typography book now offered me a chance to better understand what they were talking about when I originally learned about type classification and what to look for when seeking a “well-designed font.” It has never been any clearer.

They wrote the book to teach the fundamentals of typography. I figure many design programs across the country use it as one of their textbooks. There is even a chapter full of projects/exercises to help you understand legibility, creativity, and design expressions through type. I am doing each exercise myself — not because the ideas are new to me, but because it stretches my thinking and may lead to fresh ideas.

I also really enjoyed Designing with Type’s take on the history of type, especially the formation of the western alphabet. It is so easy to take the symbols that we call letters for granted. It makes you look at the alphabet differently when you have a sense of why the letters have the shapes they do.

I think anyone who uses type in their designs should read this book. If this review does not convince you, stay tuned for future blog entries that will give you a bit more insight into the book and the basics of typography.

Have you read Designing with Type? Would you recommend a similar book to me?

Wicked Humanist Type Face

Published on November 13th, 2007 || 10 Excellent Comments

A good friend of mine recently bought me a first edition of Wicked by Gregory Maguire. Several times now, I have curled up with it, but cannot seem to make it past page 14. Unfortunately, the font they chose for the body copy keeps distracting me from the story.

I often run into this. Walking down the street I will find myself pondering the font choice on a sign or billboard. Sometimes I will see a font on TV and remember a time when I used the same font in a design. This often diverts me from the real purpose of the message.

The particular font used in Wicked is so unique that I found myself distracted by the shapes — especially the lowercase “e” which features a sloping bar and an extra little nub. The font’s x-height is short with tall ascenders and descenders. The dot on the “i” looks like calligraphy. The caps seem large compared to the lowercase and the serif on the bottom bar of the capital “E” seemed a little bizarre to me. Here is an excerpt for you:

Excerpt from page 107 of Wicked

While surfing the Internet, I came across an article about Humanist Type Faces. It included an example of Centaur. I took one glance at that and immediately wondered if it was the same font used in Wicked. It was very close, but not quite right. The capital “E” and “R” are definitely different. However, there is no doubt in my mind the unknown font belongs to the Humanist category.

I ran and got one of my typography books and read about the font style. Here are a few things to look for when identifying the style:

  • Sloping bar on the lowercase “e”
  • Heavy weight to the font
  • Poor contrast between the thick and thin strokes
  • A wide set in the capitals
  • Oblique, steeply sloped, heavy serifs
  • Oblique stress
  • Small x-height
  • Long descenders

Here is a diagram I made for you:

Humanist Type Face Diagram

Humanist is the first font style developed after Blackletter (think Old English). Due to the early development and the lack of knowledge about readability at the time, Humanist fonts are not as readable as Old Style faces like Garamond, Goudy, Palatino or Times New Roman which were not developed until later. The Complete Typographer by Christopher Perfect and Jeremy Austen had this to say about it:

Shortly after Gutenberg’s invention of movable type in 1455, the first group of roman types, called Humanist, appeared in Italy during the 1460s and 1470s. […] The term “Humanist” derives from the 15th-century Italian humanistic handwriting on which these types were closely modeled. […]

Humanist designs are not frequently used today for continuous text setting. Their heavy weight, wide set, and obtrusively large capitals considerably impair their legibility. In addition, the strong calligraphic influence make the letter shapes too irregular for continuous text reading. However, they are used extensively in advertisements and for small amounts of brochure copy.

Whew! At least now, I feel justified in letting this font distract from getting into the story. Unfortunately, I went through my entire font library searching for the actual font, but I do not seem to have it. Maybe you know the name of it. If so, please let me know what it is.

Now that I’ve written this post, maybe I’ll finally be able to read this book.