Elements of Design: Type

In the final part of this series on the elements of design, we’re taking a look at type. I’ve left type until last in this series because over the last few weeks I’ve also been writing about typefaces and the categories they fall into. (See these posts for more Old Style, Modern, Slab Serif, Sans Serif, Script, Decorative). By recognizing some of the broad categories of type you can make informed decisions about which type to choose for your designs, whether they are on the web or for print.

Type is a fundamental part of any design it appears in. It can be used as text to read, as a shape and as a visual element where the choice of typeface conveys an emotion or mood. Type, when used well doesn’t need a photograph or illustration to back it up.

Creating A Mood

The font you choose can convey a lot of emotion. Look at the words below in four different typefaces.

Moods

We can read the same words but the font evokes different feelings and some fonts are more appropriate than others. The font at the top is a soft script font that (to me anyway) conveys Love more than Hate. The second font is a black letter font. Black letter fonts have a long history and have been associated with everything from Nazis to gangster rappers. The third font down is a sans-serif font called Avenir, which gives a fairly neutral feeling to both words. Finally, the fourth font is a grungy, distorted font which adds more meaning to the word Hate.

Which Fonts To Choose?

There is no simple answer to this but a good rule of thumb for using and choosing fonts is to stick to two or less typefaces per design. When it comes to fonts restraint is a good thing. Always remember LESS IS MORE. You can achieve interest by choosing two contrasting typefaces. For example on your website you might use a script or grungy font for your headings and contrast them with a sans-serif font in for your body text. You could do this using images for your headlines (I know, not very search engine friendly) or by using technology such as sIFR, Typekit and Cufon.

If you want to stick to web safe fonts you can achieve contrast by using serif and sans-serif fonts. The Monocle website does just that.

Monocle

The UK Government Think advertisement contrasts a serif font with colorful childlike writing for a very effective campaign poster.

think-mobile

Type Size

You need to consider your audience when choosing the font size. Form follows function. If you’re creating a website for an over 60’s community, it’s probably a good idea to avoid font sizes 8 and 10 as that will be bothersome to read for many of the readers. On the other hand type that is too large can overpower a design and make it look a little less sophisticated.

Large type as headlines has been a popular trend on the web in the past few years with some designers choosing massive headlines to contrast with small body text.

Giant Creative

GiantCreative

Amnesty International’s dramatic poster using very large and very small type overlaying a stark black and white image to get the point across. You need to look closely at this poster to read all the text but on first glance it clearly communicates its shocking message.

amnesty-international-darfur-rape

Type As A Shape

“Body copy” refers to larger tracts of text as opposed to short headlines, pull quotes. Type takes on a shape, often a simple rectangle on websites, when body copy is added to the page. The intensity of the shape can depend on the size of the font, the font face and how you lay out the text. In the magazine layout below the two columns of body copy are fully justified and also wrap around the circular ampersand symbol in the headline. The text is aesthetically pleasing and attractive with plenty of whitespace above the main headline which allows breathing space.

winterhouse

Trendy Vs Timeless

It can be tempting to go for the newest, coolest and trendiest typefaces out there. With so many free and cheap fonts available, there are literally thousands of fonts to play around with. Some of them are very “now” but next year they may look very dated. That’s not to say you shouldn’t use them. Just be aware of why you’re using them. If you’re new to design, you’ll also find that your tastes will change as you learn more.

Dated

That’s Hemi Head on the top and Bernhard Modern on the bottom. Hemi Head has a touch of Star Trek about it and could be useful if you’re designing for a retro space design. Bernhard Modern looks more sophisticated and classic. Some of the oldest typefaces are true classics which have been around for hundreds of years. They’ve been around that long and are in continued use because they are well designed and legible. Over time you’ll find that practice and experience will tell you which way to go with your type choices.

To sum up, some of the things to think about when using type as a design element are:

  1. Is the typeface I’m using appropriate? Is it in keeping with the message I’m communicating?
  2. If I’m using more than one typeface, are they contrasting or conflicting? How well do they work together?
  3. Is the size right for the medium and the message?
  4. Am I using a typeface that’s a timeless classic or will this typeface be the equivalent of 80’s shoulder pads next week?

So here ends the Elements of Design series. I hope you’ve found it useful.

Next week I’m starting another series that falls under the umbrella of “Design Principles”, I hope you can join me.

Related Reading:

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • dckirba

    Thanks again. Enjoyed it as always :)

  • Bobert

    Gosh, not a bad article, but, um, I get the feeling from this and other sites about web design, that web designers don’t know the basics of design. The info in this article is fundamental to understanding design in general. Am I in the minority that I went to design school? I don’t know much of anything about the inner workings of PHP or databases, but the fundamentals of design have been beaten into my head….

  • William Cheng

    The blog explain different types. They include type mood, the mood can show different emotion and feeling for all content. Do not use many fonts! The readers would feel confuse about your content. Serif and sans-serif fonts are really good way to show content contrast. Type side and color can be used on content design. This one takes a very good example. New idea for me from the paragraph is that type faces will become old or unfashionable, not new or fashionable forever.

  • dfd

    sdkjskfjksjfsdfj

  • Ben

    Hi,

    Interesting post – thanks! I run a bespoke website design and development company and will take your comments on board!

    Ben