Communicating with Typography

May 23rd in Designing by Iris Chamberlain

Type is always communicative, even if it wasn't designed with that goal in mind, but there are some great ways to really make it shout. In this tutorial, we'll explore some basic as well as some more clever ways to use type to communicate a feeling, message or idea.

PG

Author: Iris Chamberlain

I'm a web designer, developer and wannabe political activist currently living in Seattle, WA, USA. I'm interested in deviant subcultures, how the internet is changing democracy, and creating positive social change with my art and design work.

There are a variety of characteristics that can influence what type communicates, including but definitely not limited to: typeface & font, size, kerning, leading, capitalization, and color.

Typeface & Font

Perhaps the most important decision in setting an appropriate tone is choosing a typeface or font. A typeface is a family of fonts, each font being a different style (for example, Arial is a typeface, Arial Bold, Arial Narrow and Arial Regular are all fonts of the Arial typeface). I'll use the more specific term “font” for the rest of this tutorial unless I really am talking about a font family.

Font choice can really impact the feel of a piece. Check out these pages from the Gutenberg Bible and the Book of Kells:

They look pretty important and regal, right? Today it would be considered a barrier to communication to lay out a book in such a fancy font, but it certainly sends a powerful message.

There are a number of categories of font including Roman (serif, sans-serif, script and ornamental), Blackletter, Monospaced, Symbol and others in between. Each of these will give a fairly distinct feel to a piece, however as always, it depends on how you use it.

There is a lot of variety within each of these categories, but you can already see that they each express a fairly distinct feeling. Serif is a bit more formal, sans-serif is clean, script is elegant, ornamental can be anything, blackletter is antique, monospaced feels geeky and symbol – well, symbol has limited uses unless you're David Carson, in which case you use this font for boring articles – how's that for communication?

Serif and sans-serif fonts tend to be used for body text, while the rest are most often used for headlines, but depending on your goals, as this tutorial explains, anything goes and you can imbue any font with your own meaning.

Size

Size can communicate a great, but speaks the loudest when used with contrast. For example, these two posters use size in contrast with the size of the poster itself in order to draw the eye:

You can imagine passing these on a wall – one makes its point immediately and one makes its point by peaking your curiosity, urging you to take a closer look. The following example shows how contrast in size can indicate a hierarchy, making text easier to read:

Using size contrast in your work can create a real feeling of dynamism, depending on how far you take things, or it can simply make the piece easier to read.

Kerning

Kerning is adjusting the space between individual letters and is often used in detail-oriented projects such as logo design to make the spaces between letters look even. In our case, we're going to concentrate on the feel that can be communicated with kerning in general. Take a look at the next example – which one better expresses the message?

The example on the right obviously conveys the idea of breathing quite a bit better than the restricted version on the left. Adjusting your kerning can have the effect of making the feel of the piece more light, open or clean.

Leading

Leading is adjusting the space between lines of text. There is usually a healthy medium which will make large blocks of text most readable, but again, we'll concentrate on the feel that can be communicated by leading in general. Compare the feeling you get from looking at these two blocks of text:

They example on the left is a bit rebellious, and this technique could be used for a punk-style piece or something similar. The example on the right reflects a kind of elegance and cleanliness, and the technique could be found in a wedding invitation or jewelry ad.

Capitalization

Capitalized and lowercase letters can make a statement as well. Lowercase letters tend to seem more friendly, so if you want to design a friendly logo, you can consider using all lowercase letters:

We could use capitalization (or color, or style) to say more with less:

We can also capitalize whole phrases or blocks of text, which can be used for emphasis or to add a regal or official feel – I'd recommend trying out small caps:

Color

Using color in design is a class in and of itself, but we can touch upon some general techniques here. We make psychological connections to colors on at least three levels – the first is how we relate colors to real-life experiences (such as equating blue with the sky or water), the second is color psychology which is how color affects us subconsciously (blue is thought to be calming and increases productivity), and the third is cultural color symbolism (in ancient Germanic pagan cultures, blue symbolized emotions, and in today's Western world we might equate it with business or sadness).

The above examples show how a word or phrase can be emphasized by using colors that relate to real-life experiences, and that a piece can be made more cheerful by using bright colors.

Kicking it up a notch

We've already explored ways that type can communicate while still being basically readable. Now we can take a look at slightly more bold ways of communicating with type and occasionally pushing it to the edge of readability. If you have the opportunity (as in, if you're not working on a roadside billboard), offering your viewer a puzzle and letting them solve it can be a really rewarding experience for them.

Readable or not so much?

This is where the line between design and art begins to blur. Both design and art are forms of communication, but design is generally intended to be more functional and more intentional. Even as I say this though, you can see the lines blurring. If you use typography in a piece with no real message or goal – is it art or is it design? I'll let you mull on that while I continue the tutorial.

Being Literal

There are no rules that say you can't alter a typeface when designing a piece. There are probably millions of ways to change actual letter forms in order to communicate a message. I'll give a couple basic examples and you can let your imagination run wild on them:

I think these are pretty self explanatory.

Using Metaphors

Some of the best and most well-loved examples of using type expressively, particularly for logos, are these examples by Herb Lubalin, which do a great job of communicating the message through clever visual metaphors:

The brilliance in Lubalin's designs stems from the fact that these messages are immediately readable even though he rearranged the order of words and altered the letter forms.

Creating an Experience

There are some designs I would call “experiential” designs, in which by viewing the design, you directly experience the feeling it's attempting to convey. Remember how exhausted you felt after watching Castaway? Kind of like that. Here are some not-very-clever examples from yours truly:

You might find yourself raising an eyebrow at the example on the left – if so, good! It's meant to confuse. I see you feeling that confusion right now. The example on the right is meant to feel a little painful, rushed, harder to read, because if you don't experience the pain of the piece, you may not fully grasp the message.

Typographic Art

Type can be used for a lot of creative purposes besides sending a direct message. Typographic portraits are a great example, many of them using words or phrases relating to the topic to give the portrait more meaning. The following portrait of Steve Jobs, CEO of Apple, uses text from an Apple ad campaign and uses Apple fonts:

“Steven Paul Jobs” by Dylan Roscover

Even though it would be excruciating to try to read all of the text in this piece, certain phrases and words stick out to help create the feel. To me it says corporate, serious, power, but also accomplishment and thinking outside the box. And not only is this a great piece of art and design, it also has semi-hidden meanings which further express a story.

Conclusions

If you really want to be able to communicate messages with brilliant typographic designs, my suggestion would be to research as much as possible and see what other people have done. I've listed some type-related resources at the end of the tutorial.

I hope you come away from this tutorial with an understanding that even small decisions about type can make an impact, and type doesn't necessarily have to be readable to communicate (although there's definitely a sweet spot at the edge of readability). The decisions you make about type design for each piece will always depend on your goals. Remember that “content is king”, that is, unless you don't want it to be.

To conclude, I'd like to share a piece by legendary type designer, David Carson (previously mentioned as the Dingbat guy):

Image Credit: David Carson

Resources

I've compiled a short list of type resources to get you started:

Free Font Websites:
Dafont

Paid Font Websites:
MyFonts

Font Tools:
What The Font
Typetester

Typography Blogs:
I Love Typography
The Font Feed
Type For You
Typophile

Articles:
The Power of Typography in Design
Vandelay Design's 101 Typography Resources for Web Designers

Please comment and tell us about your favorite type resources, typography design tricks and links to brilliant type designers and their work.

Graphic Design Week

To celebrate the launch of GraphicRiver's new Print Design Templates category we're putting on a whole week of graphic design tutorials on both Psdtuts+ and Vectortuts+. The new category means you can now sell your design work to make extra cash On the flip side if you're coming up short on inspiration, you can get a kickstart by grabbing a Photoshop, Illustrator or InDesign template via GraphicRiver. So to give the new category the launch it deserves, all this week we'll be bringing you articles and tutorials just like this one, on graphic design as part of our Tuts+ Graphic Design Week.

Enjoy this Post?

We'd love your vote!

Plus Members

Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.

Join Now

User Comments

( ADD YOURS )
  1. PG

    imsraaia May 23rd

    Awesome…

    ( Reply )
  2. PG

    NBK May 23rd

    I love typography!

    ( Reply )
  3. PG

    Cuby May 23rd

    Great article thanks!
    Really interesting to read, and great examples. The image of Steve Jobs is amazing!

    ( Reply )
  4. PG

    Irinei May 23rd

    Very interesting, thanks!

    Visit http://dailytype.ru , it’s a creative project run by several russian type designers. They have an enormous archive of their typography works.

    ( Reply )
  5. PG

    Sportlogoday May 23rd

    Thanks for this article. I made a list of free type sites at one of my blogs and this also may be helpful:
    http://tinyurl.com/p72e35

    ( Reply )
  6. PG

    Constantine May 23rd

    Thanks so much.
    I love typography!

    ( Reply )
  7. PG

    Kieran May 23rd

    This is my favorite article on vector tuts+. I love it, great article.

    ( Reply )
  8. PG

    Josh May 23rd

    This is horrible.

    Your kerning description, possibly the most important aspect of type for some applications falls totally flat. Not to mention you would not “kern” to acheive the spacing in your example.

    This is the problem with the internet and typography, everything is simple “this does this” and not “this does this and how you use it/best practices/whatnot”

    Fail article is fail.

    ( Reply )
    1. PG

      Arnór Bogason May 24th

      Josh is completely right.

      To increase the letter spacing of a word or sentence as a whole you would have to adjust the tracking, while kerning is used to even the spacing between two letters to make the words look better, or so to speak (my english is not perfect, i know…).

      ( Reply )
      1. PG

        Iris Chamberlain May 26th

        Oops, you guys caught me! Thanks for making this differentiation. I had to cut out a lot of specifics talk in order to keep things simple for absolute beginners. In Photoshop for example, you can use the same tool to adjust “tracking” as you would to adjust “kerning”, so I didn’t bother going into the difference.

        I’m definitely kind of fail at being a formal graphic designer though – I’m much more interested in creating provocative and useful designs than in using proper terminology. That’s what I have you guys for! :)

  9. PG

    Arnór Bogason May 23rd

    Discussing font categories you fail to mention one of the most common categorizations, as follows:

    Old Style (serif)
    Transitional (serif)
    Modern (serif)
    Slab-serif
    Sans-serif
    (script fonts falls out of this list though, as it’s not a part of evolution of movable type)

    ( Reply )
    1. PG

      Iris Chamberlain May 26th

      Thanks Arnór!

      ( Reply )
  10. PG

    Mikah Sargent May 23rd

    Gorgeous examples, great and memorable instruction. I’d like for you to write a book, your communication is really intriguing.

    ( Reply )
  11. PG

    DanteV May 23rd

    Thanks a lot, I’m really a typography lover, and is very impressive how you get to explain the basic things about it in such a simple way, once more, thank you very much.

    ( Reply )
  12. PG

    Cody May 24th

    @Josh You should understand this is simply a guest post on a blog. This is by no means an extensive lesson in typography. I feel this article executes the basics of good typography very well and is a great introduction for your average reader. Just because you may or may not have been educated in the field of typography in the past, does not give your anonymous opinion validity.
    Very nice post, I look forward to more like it.

    ( Reply )
    1. PG

      Josh May 24th

      Wait.. what? Because this is not an extensive lesson in typography it can be flatout wrong?

      I’ll keep that in mind when I read other blogs and make sure to comment and congratulate the author simply because they are trying.

      Lets not mention that one of vectortuts sister sites has a similar article by another author who explains things differently. That is the icing on the cake, nail in the coffin, whatever.

      ( Reply )
      1. PG

        Iris Chamberlain May 26th

        Thanks Cody for the defense, I am just a guest poster. On the other hand I really am glad that Josh spoke up – any extra information that can be given in the comments section is awesome – that’s what comments are for and why social software is so awesome. Being kind is always great too, but that’s not for everyone.

  13. Awesome typography!

    ( Reply )
  14. PG

    Fyre Vortex May 24th

    Actually the artwork/design “Steven Paul Jobs” is repetition of the words that were in an Apple campaign a long time ago.

    “Here’s to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently. They’re not fond of rules. And they have no respect for the status quo. You can praise them, disagree with them, quote them, disbelieve them, glorify or vilify them. About the only thing you can’t do is ignore them. Because they change things.”

    (Yep, I typed it all out.)

    ( Reply )
  15. I have a certain weakness for posts like this. Thanks.

    ( Reply )
  16. PG

    Mdeleon88 May 25th

    HA! Cant believe Rosco’s Steve Jobs is featured! I go to school with him lol

    GO FULL SAIL

    ( Reply )
  17. PG

    rory May 25th

    Great article, you really explained typography well.
    Nice examples too.

    —- —-
    0 0
    J
    -

    ( Reply )
  18. PG

    javiinthezone May 26th

    awesome!

    ( Reply )
  19. PG

    Iris Chamberlain May 26th

    Hey thanks everyone for the kind and constructive comments! I’m pretty new to writing articles (yes, I’m all about transparency), so I’ll make sure to take any criticisms and work on them for next time! You should definitely research Typography further if you’re interested, this is just a very basic introduction to some ideas. Thanks again, and thanks to Vectortuts for posting me.

    ( Reply )
  20. PG

    Trish May 26th

    so I got an education the other day complaining about kerning. a font creator was in the audience. kerning is the spacing between letters of a font when made by the font creator. tracking is the spacing between letters that an artist manipulates by hand.

    but anyway, I’m really not sure how important that is really. love the article. please keep it up!

    ( Reply )
  21. PG

    Tobias Fendt June 1st

    really great. I love typography. nice tut.

    ( Reply )
  22. PG

    e11world June 1st

    Great article. Very informative!

    ( Reply )
  23. PG

    Matt June 2nd

    Great article, thanks for sharing! No matter whether you’re only a guest poster or not that’s still something to be happy with, and it’s good that people such as yourself are willing to share their knowledge with others that may not be as knowledgeable in particular areas.

    Thanks for a great article and I hope you continue to write more posts to come. It’s got me into Photoshop now messing around with text!

    ( Reply )
  24. PG

    bav July 18th

    Decent tutorial I guess but for those wanting a tutorial on tyographic art this does nothing.

    I am yet to see a half decent tutorial on an actual piece anywhere. There is a basic on on adbudeezo that’s it.

    ( Reply )
  25. PG

    djgraphics July 27th

    I like the way she thinks

    ( Reply )
  26. PG

    marc July 29th

    i like the article, but i would have like it develop a bit more specially on how to create the different mood, well done keep at it.
    who i my to say something and how many articles did i write (0)

    ( Reply )
  27. PG

    Diane August 3rd

    Hi, Iris, I think your article is very interesting, and clever

    ( Reply )
  28. PG

    Gern Blanston August 19th

    What you are demonstrating as ‘kerning’ is actually called letterspacing or tracking when the spacing of entire words or blocks of text are adjusted consistently. Kerning refers only to repairing spacing problems between 2 individual characters that would otherwise not look correctly spaced relative to nearby characters.

    Modern fonts (since the ’90s) have basic kerning pairs built in, so we rarely see the problems that used to plague non-digital type. Kerning is now a lost art, as is most true typography.

    True, most kerning now is mainly only required for logo type design.

    ( Reply )
  29. PG

    banhbaofs September 4th

    wow, ha ha

    ( Reply )
  30. PG

    Winnie Shek September 19th

    Very insightful! Thanks very much for posting this, it was very helpful! ^_^

    ( Reply )
  31. PG

    Johny September 25th

    Kind of off topic but, how does this site have the smooth text at the top and everywhere “Communicating with Typography” specificly. Im a beginning web designer and i was just wondering how its done :) any help would be greatly appreciated thanks guys

    ( Reply )
  32. PG

    Jackson October 9th

    sweet jam! made for a good read.

    ( Reply )
  33. PG

    Tommy November 16th

    great post! the kearning-tracking thing might be a slitgh mix-up, but it’s hardly the focus of the article, so i don’t see why people are going to such lengths to make their issues known… typographic design has alot of elements and whther the terms are all there or not, you pretty much nailed it! great examples too!

    ( Reply )
  34. PG

    tchile November 16th

    Amzing!!

    ( Reply )
  1. Arrow
    Gravatar

    Your Name
    November 16th