Sickdesigner

You know how, often times, clients demand that your design needs to pop more? Well, welcome to the last post of our 5 part miniseries jam packed with easy to follow tips and tricks. In this episode we’ll be covering the basics for: Typography.

Typography

Typography is a general term that, in very loose terms, stands for “how text looks like”. Just like Colors, Typography is often underestimated and overlooked, but one must realize that it is THE most important aspect of web design. While the graphics we, so meticulously, craft in our designs are an indirect support for content, Typography deals with the direct organization and styling of content. Sometimes this can even be the only design element; such is often the case with minimal designs.

When it comes to Typography, I, personally, adopt a very dichotomous position: I feel the need to look at content both as text and as graphics. This is where, I believe, many inexperienced designers make the worst mistake. They’ll look at the content in terms of “it’s a bunch of text” and then go from there. But, treating text as both words and sentences etc. and as graphics, on a 1:1 ratio of importance, is a clear expression of our craft of visual communication.

I’ve wrote about the subject of  Typography before, in The Right Type For The Job, and the intertoobs hold bucket loads of information on the subject, so I won’t go into the basics of setting type, but rather stick to what this miniseries is trying to accomplish: getting those designs to pop!

As far as my experience goes, clients saying they want their type to “pop” usually translates to:

1. Clear hierarchy
2. Font family variation
3. Style

Now, let’s analyze these features and see how to make  use of them in you next eye-popping design.

Tip 1: One of the easiest and most natural ways of establishing typographic hierarchy is by making use of Scale. It’s really quite easy: stuff that’s important should be bigger than things that are lower in the hierarchy. It’s also good practice to employ a Scale ratio. One of my favorite Scale ratios is based on the Fibonacci sequence: 12 – 16 – 28 – 44 – 72.

Tip 2: It’s often that I hear clients demanding 3 or more font families within the same design. As most of us know, this is, usually, bad practice. Using more than two or three font faces results in clutter and actually becomes a barrier for the content itself. The viewer’s eyes become so distracted with the change in style that the actual message gets lost. When it comes to the web, I’ll usually work with a simple, yet effective, formula: one sans-serif font and one serif font. And that’s it. Whether you are partial to Verdana + Times New Roman, Arial + Georgia, Helvetica + Caslon etc. it doesn’t matter; not drowning you design in a gazillion font families is, at this point, more important than what works with what. I find that variation in font weights and/or italic style is a good way to “trick” the client into accepting a smaller number of typefaces.

Tip 3: We’ve all heard this: make this yellow, make that blue. And then you’re staring at your well though out design going “no way, dood, that would look awful“. Now, here’s something a lot of you, especially those of you just starting out with design, don’t realize: You choose the yellow, you choose the blue etc. Most often “yellow” can translate into something like “a subtle yellow gradient, with a small white stroke and light dark shadow”, which, at least in theory, sounds a lot better than “just yellow” and might work very well with your design and make the client happy. Give yourself more room to play with your design, especially with style.

Here’s a few samples of well implemented typography using the tips above:

01

Beyond the fact that Bless This Stuff is a pretty awesome site, the design sports a very pleasing Scale Ratio. Your eyes are naturally drawn to the site’s elements in the order intended by the designer by following size changes.

02

Steven Little’s website features three typefaces: a powerful serif used for the Call to Action, a comic-style cursive for the headings and contact links, and a classic sans-serif for the logo and main menu. I have to admit, the combination is very pleasing to the eye, even if I am a firm supporter of using a maximum of two typefaces.

03

Hradecon is an excellent example of well applied style to text, particularly the logo and main heading. It doesn’t take a lot to make it pop: a nice gradient, a bit of letterpress and a small highlight.

Of course, the tips discussed here are only a fraction of what typography is all about. They are meant to help novice designers gain more insight into the wonderful and often confusing world of typography. I mentioned in the beginning of this post that the interwebs hold vast amounts of knowledge in regards to this particular topic. With this in mind I recommend a very well written and mind opening article by Matt Ward: Create Beautiful CSS3 Typography. Even though it may seem to apply strictly to CSS3, it goes far deeper than that. It’s, most definitely, a must read.

And here we are at the end of this miniseries. I hope you enjoyed it and gained a bit more knowledge out of it. I’ll see you all on the next sick post. And, trust me, it is going to be sick.

by Radu Chelariu