Advertisement

Pairing Fonts is Like Feeding Children..

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →

When starting a web design project there are a lot of difficult decisions to make, including the classic: selecting fonts. Well executed typography can engage visitors, when they'd otherwise perhaps skim over the main body of content.

However, it’s tough getting people interested in new beneficial information. Thinking about this brings thoughts of difficulty comparisons with handling children. In fact, the difficulties of getting children to eat properly are very similar to our aforementioned dilemma. That is why in this article we’re going to go over how understanding this relationship will improve your font pairing.


Breaking Down the Relationship

Okay, so we introduced the analogy lesson pretty quickly. Let’s take a moment to further break down why this analogy is one worth learning.

font-pairing-menu-letters

Image: Public Domain Photos cc

Have you ever tried to get a kid to eat their green vegetables? For those that are fortunate not to have experienced this, it’s no picnic. Children hate things that are good for them because the benefits take time to appear, whereas the joy found in eating ice cream is immediately present in every bit taken in.

This relates back to users today because we all have become accustomed to immediate gratification. It doesn’t matter how good something could be, the fastest route to results is the best option.

font-pairing-menu-tldr

This shows itself in how users interact with websites by the tendency to read the headline and feel like they have all they need. I’m not embarrassed to say I do this every so often.


Attributes of Quality

Quality in terms of font choices and feeding children is very much an eye (rather stomach) of the beholder thing.

font-pairing-menu-cherry

Image: Sean Dreilinger cc

You can’t really generalize what people would like, since none of us are the same, but there are some qualities that do aid in providing the best possible attempt at this.

Looks Good

Appearance is a major factor in a child’s idea of how something tastes. For example, take an apple pie and raw oysters. If these were both presented to a child which one would immediately have fingers in it? Of course, the apple pie would have the child elbow deep, whereas the oysters would likely freak them out.

The same principle is true for font choices. Appeal is what users lean on in the first five seconds to determine staying or not. At least until tech improves to the point where we can use scents to design for the web. That’s going to be awesome!

Tasty

What’s the point in something looking good if it tastes awful? Making food taste good isn’t rocket science. As long as you understand the basic principles of proper ratio between size and seasoning amount you’re golden.

In the case of your project, the font is one of the seasonings and the content is the food. In every level of content, headline to body copy, the font must appropriately compliment its content. Of course, there are other factors that go into this like font size, line height, section spacing, and many others, but those are for a little later.

Appropriately Colorful

You’ve been following this article very well thus far I must say, in my head at least. Would this reading experience be the same if the font color for the body copy was red, orange, or yellow? No, it’d be horrible. The colors would take all the attention away from the content.

Imagine a plate with three food options in front of an easily distracted youngster. A healthy green, a not-as-healthy brown, and a very-unhealthy red and yellow. The unhealthy item of course draws their attention, red and yellow are highly attractive, at times complimentary, warm colors.

Applying this back to fonts, your color choices should be used to draw attention and compliment each other.


Ideal “Meal Plan” for Font Pairing

After that brief primer, it's time to introduce you to why you’re reading this article. That’s right, we’re moving into using this new understanding to create the ideal font pairing meal plan. Doesn’t that sound delicious?

font-pairing-menu-plan

Image: katstan cc

The Main Entree

This part of our meal plan could accurately describe as its heart. Now, by heart I’m not referring to being most aligned with the ideal message. Instead, it is being identified as the main attention getter.

As an example, think of a restaurant’s kids menu. Do you see the highlighted item being the side order of steamed asparagus, or the juicy grilled chicken nuggets? The grilled chicken nuggets is the highlight which acts as an incentive to order complimentary items like asparagus.

Tips

  • Ideally use a strong warm font color
  • The most distinctive font in project
  • An incentive summary of the overall content message
  • Should have the heaviest font weight, or at least an authoritative role in the hierarchy
  • Generous amount of whitespace separating it from the content

Side Dish(es)

If the main entree is the focus, then it's only appropriate to describe the side dishes as the wingmen. I know, I know, too many analogies being thrown around here. However just bare with me, it’s going to make sense in a flash.

Once your main entree is decided, you’ll then begin to look for other food which works well at enhancing it. It is that goal of enhancement that defines the side dish. This goal is also why body copy headers are your side dishes. They add to the value in the user's attention to the content created from your headline. As any teenager can tell you, having a complimentary wingman can be a lifesaver!

Tips

  • Font color is complimentary and less intense
  • Try setting the font size at least 10px, 0.6 em, smaller than the headline
  • Less whitespace between it and content as given to headline

Vegetable

We’ve now moved on from all the attention getters into our true source of substance, the vegetables. In any meal for a child, the vegetable is the main thing you want them to eat. However, getting them to look at it feels like an impossible task.

Provide things they do like as the main entree and side dish as an incentive to eat their vegetables. For your project the headline and body headers are your incentive, and your body copy is the substance.

Tips

  • Font size shouldn’t be smaller than 12px, 0.75 em
  • Font color should be something solid like a darker shade of gray (assuming a pale background)
  • Paragraphs should aim to be no more than 6 lines
  • Word choices used should be easily digested by any type of user

Conclusion

You now have a full understanding of an easy to follow method to pairing fonts for your projects.

font-pairing-menu-finished

Image: phalinn (also used as article thumbnail) cc

Granted, this new approach will take time to get the hang of using, but it will make things easier for you. Besides, the aspects of treating your users as children alone is worth using for the comedic aspect. Right?!


Additional Reading

Advertisement