7 Quick and Easy Ways to Jazz Up Your Headline Typography

by on 4th August 2011 with 1 Comment

screenshot

Headlines are one of the most important elements on your page and are often the starting point that sets the tone for the entire design. So why not make them great?

Today we’ll take a look at seven different design techniques that you can implement in a minute or less that will boost your headline from plain to awesome.

One Big Line, One Small Line

screenshot

We’ll start with the most typical and basic trick on the list. One of your most powerful tools for creating headlines is contrast, which we’ll be using again and again throughout this post.

Here we chose to apply contrast primarily in the form of font size. It’s extremely common to have a two-line headline setup where one line utilizes a larger font size than the other. This works with just about any typeface and you can vary which line is larger.

The key here, as with a few of the other examples below, is to place the emphasis where you think it belongs. In my example, “Great Headline” is the main idea and is always emphasized whether it’s on top or on bottom.

Vary Your Case

screenshot

This is a simple trick that I end up using quite a bit. Using just about any headline structure you want, try switching up the case on some of your words or lines.

In the examples above I used various combinations of uppercase, lowercase and small caps text. Typically, the uppercase letters are used for emphasis, but it’s nice to throw in a curve ball every now and then and actually make the lowercase line the primary attention grabber as I’ve done in the second headline.

Your reasons for choosing which words or lines to capitalize can of course be logical and thought out, but don’t be afraid to attempt a little bit of arbitrary application. Your reasoning can be as simple as the fact that you liked the way a word looked better in all lowercase letters.

All Caps: Harder to Read?

Somewhere in the age old designer creed is a statement about how all caps makes for hard reading. To a certain extent this is true, but it really only applies in large blocks of text like a paragraph or really long sentence.

screenshot

The variation in letter height in lowercase letters helps you differentiate and read faster, but when there’s only a few words, it’s perfectly easy to read in all caps and I’ve even heard some argue that it’s easier!

Equal Line Width

screenshot

This technique is used all the time in modern headline design. The result that I achieved above is fairly non-typical (intentionally). You usually see this technique used on a bold condensed sans-serif like Helvetica, but don’t fall into the trap of doing what everyone else does, break out on your own and try it with any font you want. It won’t always look good, but experimenting is an important part of every design!

The font that I used above is DeLarge Bold, which is admittedly fairly difficult to read but is quite attractive in small doses.

The idea behind this technique is that you’re really pushing the concept of a headline as a single element. By creating a fixed width column, normally diverse letter shapes and line lengths become a cohesive whole that is easier to work into a larger design. Plus, you know, it just looks cool.

Equal Line Width Online

Want to implement this technique with live text on the web? There are a few jQuery plugins, like Lettering.js and BigText that make it easy. BigText is specifically for this technique while Letterring.js is more flexible and could be used to create most if not all of the examples in this post.

screenshot

Selective Word Emphasis

screenshot

This one has the same basic logic as the first example above. We’re simply attempting to use size as a major point of contrast. Here we’re emphasizing certain words and de-emphasizing others.

There’s no real magic formula for which words to make large, just feel it out and see what makes sense. I typically reduce unimportant words such as “the” or “and” while trying make the large words read somewhat decently as a whole. For instance, in the example above, you can see the phrase “Make Some Important” even though that’s not quite what the sentence as a whole says.

Back when I designed print ads, this was one of my most used tricks for headlines. In print, you’re always trying to grab someone’s attention in a split second and reducing a headline to its most important parts really helps with that goal while still getting in that giant headline that the copywriters gave you to work with.

A Double Message

screenshot

This one is a little quirky and should only be used in rare cases, but it’s pretty fun. You can use size, weight, typeface and/or color to set out specific letters from the rest of the line.

The result is a clever hidden message in your headline. In the headlines above I’ve made “DUH!” and “WOW” stand out. These are overly simple examples, it’s much more impressive when you really spend the time to make the two meanings work well together like this designer did.

Integrate Text-Altering Graphics

screenshot

If you want a really interesting design, try not placing your headline off floating by itself but rather working it into the graphics on the page. This works great with simple vector shapes like the one above. Notice how the headline message and graphic reinforce each other.

One of the most typical places you’ll see this technique is in infographics. Here the entire point is to intermingle images into the text to make the message clearer, so it’s an obvious and appropriate setting for this to be used.

Sometimes your letters are easy enough to manipulate that they can be bended and stretched to follow the lines of your graphic, this was the case with the “W” above. However, the other letters were much curvier so I just took the easy way out and had the graphic cut into them.

Nestled Text

screenshot

We started on a really simple technique so I’d thought we’d end on one as well. This sort of headline design is very common in magazine titles. Basically, you type something out in title case and watch the negative space formed between the ascenders. It’s often the perfect place to nudge a word or two into.

The result is a nicely integrated headline that only takes two seconds to build! Perfect for all those times when you’re way over your deadline and need throw together a design in record time.

Conclusion

The moral of this story is to think twice before you simply type out that headline and call it a day. Always think about how you can improve the readability and/or the aesthetics of the text to better meet the goals of the design.

Leave a comment below and let us know which of these is your favorite. Do you have any of your own headline tricks to share?

Comments & Discussion

One Comment

  • http://www.webdesigncreare.co.uk Kim Ruddock

    Experimenting with typography can really make your design stand out amongst others who play it safe. Helvetica Neue, although considered ‘boring’, has so many variants that you can make very interesting and effective headlines. I would be wary of using pseudo small caps in a headline design. Simply enlarging the first letter of a word is not true small caps and the letterforms look out of place next to each other. Try to use a genuine small caps font like Trajan Pro.

Subscribe
Membership
About the Author