Establish a Mood with Typography

Almost any website or design project will include the use of type. From a few words to a page filled with text the font choices you make in the early planning phases will carry through the project. Fonts can help create and establish a mood and set the tone for how your work is received.

Do you want a modern look and feel? Or is the desired effect more classical? Is text being used primarily as art or in logo design or does it need to meet readability standards? All of these are questions you should answer before selecting typefaces for a project.

Keep in mind that each typeface on its own can say almost as much about the project as actual words on the page (or screen). Carefully evaluate typefaces so that each represents projects in the proper way.

Project Goals

The first step with any design project is to determine what you expect as a final outcome. Think about how type will be used. You would not use the same font on a wedding invitation as for a wanted poster, right?

Stick to simple typefaces that are highly readable for projects with large blocks of text. In web design the trend is to use a sans serif body font – think Arial, Tahoma and Verdana. Using a simple choice will take the emphasis off the look of the text so that it is easy to read, such as the simple sans serif font used on this website. Look for a font with average width strokes and lines – stay away from super thin or thick letter forms – to ensure readability.

Consider the impact of type on images as well. If the image is driving the design, keep type simple so the image stands out. Caravan Restaurant & Bar does this with a striking image of its interior on the landing page while using simple type to direct you to other parts of the website.

More engaging font choices often work best when used sparingly and when they can stand on their own. Use a funkier font for items that will be used as artistic elements or that do not rely on readability. Old style, cursive, script and display typefaces can quickly establish a mood and work best when used at large sizes.

For example, “Good Design” establishes a light mood for this site. The same goes for the company name, Indubitablee, in the top left corner. The typefaces have curvy, loose styles and look fun. Now imagine either of those typefaces while trying to read this article. It would be a lot less fun and would be difficult to read.

Moods

Although there are many factors that contribute to the overall feel of a website, some type choices alone can set the mood. (Although some fonts, such as Helvetica, are considered “moodless.” This means these letter forms take on the feel of other typefaces.)
Font selections can feel formal or informal, light or dramatic, modern or traditional and warm or cool. Fonts are not limited to a single mood and combinations of typefaces can create different mood associations.

The Team Fannypack website combines traditional and dramatic typefaces for a very old-style feel but with hints of modernism (not the icon in the top left corner).

AdPacks.com uses scripts and sans serif typefaces to create a page with a look that mirrors the theme “classy” the site is pushing. The old-style image and background in combination with the type creates a harmony in what the page says and its visual identity.

WakWAW takes a completely different approach. It uses a very dramatic typeface to catch your attention and the font is used throughout for headers and as a navigational tool. It combines with a “moodless” font that is easy to read but does not take away from the chaotic feel of the site.

Consider Established Themes

Keep in mind that establishing mood and feeling is pretty complex and can come across differently based on each person’s experiences. While there are some pretty universally accepted moods – think back to that “Wanted” poster – others are not so clearly defined.
Developing a mood based on distinct type selections from certain time periods can help. Using a typeface with an established identity can create an instant mood.

Font Diner uses a 50’s theme, with the main title having the look of the logo from a classic Chevrolet. This visual association is quick. With just a glance you are instantly taken back in time. And the site name, Font Diner, further expands on that theme.

Script and cursive type choices instantly create a feminine mood and are commonly used on websites targets at women. (Think of how many wedding and party invitations use this brand of typography.) Cake Sweet Cake and Addy Meira each use a collection of cursive and italics to create a lights and delightful moods on sites with woman-appeal.

Trends

With the number of items competing for your attention on websites, font choices are becoming increasingly dramatic. But at the same time, type driven sites are opting for more traditional sans serif choices to set them apart.

High impact, high drama fonts are not always readable and can create a sense of intrigue or chaos. These type selections can do one of two things: Bring in new people to the site because of interest, or confuse and turn them away. Make sure to use “super moody,” bold choices with strong images that help convey a message if the type falls short.

“Greetings Earthlings” is a great example of a moody choice paired with a strong image and nice supporting type. It immediately sets a space odyssey feel with an image and typeface on the landing page but the rest of the site uses an easy to read typeface. Site developers merged impact and readability.

Adding Color

Mood can sometimes be about more than just a font. Think about color choices and how just a simple hue change can alter how you feel. Traditional color mood rules still apply and should be considered to avoid an inadvertent emotional association.

Reds and blacks, especially when paired with dramatic typefaces, can create a sense of passion or anger. Blues and greens are more peaceful, with blue also sometimes establishing a sense of melancholy and greens linking to nature. Yellow can be cheerful or comforting and oranges are also exciting or energetic. White emphasizes emptiness or space.