Communicating with Typography
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.
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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Iris Chamberlain
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Vectortuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Awesome…
I love typography!
Great article thanks!
Really interesting to read, and great examples. The image of Steve Jobs is amazing!
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.
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
Thanks so much.
I love typography!
This is my favorite article on vector tuts+. I love it, great article.
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.
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…).
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!
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)
Thanks Arnór!
Gorgeous examples, great and memorable instruction. I’d like for you to write a book, your communication is really intriguing.
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.
@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.
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.
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.
That doesn’t mean you should be rude though. You can point out mistakes without being rude. I give credit to Iris for remaining polite and positive in her response to you. It says a lot about who she is.
Awesome typography!
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.)
I have a certain weakness for posts like this. Thanks.
HA! Cant believe Rosco’s Steve Jobs is featured! I go to school with him lol
GO FULL SAIL
Great article, you really explained typography well.
Nice examples too.
—- —-
0 0
J
-
awesome!
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.
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!
really great. I love typography. nice tut.
Great article. Very informative!
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!
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.
I like the way she thinks
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)
Hi, Iris, I think your article is very interesting, and clever
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.
wow, ha ha
Very insightful! Thanks very much for posting this, it was very helpful! ^_^
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
sweet jam! made for a good read.
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!
Amzing!!
very nice tutorial. Up until now i’ve been using the “good looking” font. But hey, it has to be meaning by itself. So i’ll use them carefully. Thanks for the post!
Thank you for the article. It made me think about how I use type a lot more.
This is a great article to wet the appetite for good typographic practices. Anyone who never considered opening the text attribute or paragraph text box in their designing now realizes their are ways to creatively adjust their text comes out ahead. When one realizes some font smiths took more than a decade to create even a single font family one can obviously see this is a skill you can spend a lifetime honing and perfecting.
Simplemente genial, gracias. / It’s just great, thanks.