Get a free year on Tuts+ this month when you purchase a Siteground hosting plan from $3.95/mo
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.
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.
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 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 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 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.
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:
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.
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.
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.
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:
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.
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
I've compiled a short list of type resources to get you started:
Free Font Websites:
Paid Font Websites:
Please comment and tell us about your favorite type resources, typography design tricks and links to brilliant type designers and their work.