Advertisement
Typography

Pairing Fonts is Like Feeding Children..

by

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

Related Posts
  • Web Design
    Complete Websites
    Design a Travel Startup Landing Page Using PhotoshopLanding thumb
    In this tutorial I’ll walk you through a process of creating a simple and clean travel startup landing page design. I'll be using Photoshop CS6 to design a professional and lightweight layout combining beautiful imagery and some stylish fonts.Read More…
  • Code
    WordPress
    5 Quick Beginner-Friendly CSS Customizations That Make Your Blog Stand OutCssblog
    In this tutorial, we'll cover how to do five quick CSS customizations that make your blog stand out. Even if you don't know what CSS is, you'll be able to follow the instructions and change the standard look of your theme.Read More…
  • Business
    Productivity
    How to Be Happy and Get More Done3 preview be happy get more done
    How often have you uttered the phrase "I'll be happy when..."? On a small level, you might tell yourself you'll be happy when your work for the day is done. On a larger scale, you might reassure yourself you'll be happy once you've saved enough to take early retirement, or written a book, or visited Europe. But what if you could be happy right now, and get even more done because you're feeling good?Read More…
  • Web Design
    Design Theory
    Writing and Designing a Killer HeadlineHeadline retina
    Hey, you made it! You’ve arrived at this article. So how did you end up here? Maybe you were browsing Twitter, or reading your RSS feeds. Maybe it was a Google search. Or maybe you regularly come back to Tuts+ to see what’s new. But these don’t answer my question.Read More…
  • Design & Illustration
    Illustration
    Create a 70s Diner Vector Illustration in Adobe IllustratorDesign and illustration
    In this tutorial, we will learn step by step, how to create a 70s inspired waitress balancing serving trays loaded with tasty summer fast food in Adobe Illustrator. Summer maybe warm, but "hot eats and cool treats" will certainly hit the spot.Read More…
  • Photography
    Interviews
    Terry McNamara: Delicious Food Photography200x2001
    Terry McNamara is a freelance photographer based in Manchester, UK. Having started as an enthusiast, he's gone from photography student to photography tutor, Only recently a professional, he has built up a great reputation from sheer hard work. We caught up with him recently to quiz him on his journey into photography and why he enjoys capturing food!Read More…