by AJ Walther
Picking the best possible font set can be an elusive task for even the most seasoned of designers. So if you have the design prowess of a vacuum cleaner, the task may seem insurmountable. Never fear, I'm here to help.
Think of Your End-product
Are you designing for print or for on-screen viewing? Are you designing for people who will view your design from large, high-resolution monitors? Maybe for mobile? Knowing where your design will be viewed is a good first step. If you are designing for print publication, serif fonts (those with hats and feet like Times New Roman) are easier on the eye in large quantities. On the other hand, if you're designing for on-screen consumption, a sans-serif font like Arial or Verdana will be easier to read. If you know your design will be viewed on low-resolution machines (or if you're really not sure), it's best to play it safe and use as pared-down a font as possible. If you know for a fact that your design will be viewed on a large, high-resolution machine, your design options open up pretty drastically.
Here are some good options:
Note: You could really choose any font in the On-Screen (high resolution) section. I have highlighted a few that I would suggest using only if your end-product will be viewed on a high resolution screen.
Identify Your Message
Studies have shown that regardless of content, fonts can convey emotions and affect trust levels in viewers. For this reason, it is important to decide what kind of a message you want to convey right off the bat. There is nothing wrong with a fun, fanciful font…unless, of course, you're not trying to convey a fun, fanciful message. For instance, would you want to give access to your personal financial information to The Bank of the Universe if their website log-in met you with this font?
On the other hand, if you're logging your four-year old in to play an exhilarating afternoon of digital make believe on the Happy Princess Ponies webpage, this seems pretty spot on.
Here are some examples.
Fonts for Body Text
The bulk of your message will be conveyed within your body text. If you are designing content for unknown screen resolutions, you're going to want a sans-serif font that will be easy to read on all screen sizes and resolutions. Because you don't know what system your learner will be using, you'll also probably want to stick with the standard cross-platform fonts (you can Google if you're not sure which fonts these are). You're designing something to introduce new employees to your Fortune 500 company. That means you want something inviting, mature and professional. In short: Comic Sans will not do.
Here are some examples of fonts that would work well in this situation:
Fonts for Headlines and Accents
If you're going to get creative, this is the place. As a general rule, I try not to use more than three fonts for one project. This typically includes one for body text, one for headings, and one as an accent. Every case is different; however I'll have a need for a fourth font for subheadings. In some cases I'll use only one font throughout, varying the size and boldness for visual interest.
Want to know a secret to picking fonts that go together? The secret is that many software programs have already done this for you in the form of Font Families. You've decided on Arial? Excellent! Arial often comes with a family of coordinating fonts including Arial Black, Arial Narrow, and Arial Unicode. Here are some other font families:
These are just a few of the font families. Others include Minion Pro, Myriad Pro, and Tekton. Including font families with just two fonts would make for a much longer list and would include many fonts worth looking into if you only need two fonts.
You may notice that only using fonts that come with families could prove rather limiting. What about all those other family-less, but equally useable, fonts? Let Google help you! Google has an interesting, and underutilized, Fonts page. Here's how it works.
- From the Google Fonts page, locate the Filters drop-down and select a category (Serif, Sans Serif, etc.).
- If you'd like further filtering, adjust the Thickness, Slant, and Width slider bars accordingly.
- Ensure the Sentence tab is selected from the top of the page.
- From the Text drop-down menu choose either one of the pre-loaded phrases or enter your own text. If you have a specific design in mind, I would suggest entering your own text.
- Here's where it gets really interesting. Pick any font that you like and from the bottom right of the font, click the third button, Pop-Out.
- From the Pop-Out window, choose the third tab, Pairings.
Google has taken the liberty of pairing your desired fonts with other fonts that the mighty Google machine has deemed appropriate. This is a great feature and very useful for designing. The catch here is that Google Fonts do not correlate to fonts found in Adobe or Microsoft software lines. They are their own thing. If you like this Google method you have a few options. First, you could download the Google fonts. They're free and open source so you can use them without penalty almost everywhere. But, if you're unsure about your use case, be sure to check the licensing agreement to ensure that your intended use is allowed. Second, you could use a site like Identifont to plug the name of the Google font into the Fonts by Similarity tool and peruse similar fonts that you might already have on your system. (I tried this and had some success, but many of the Google fonts I entered were not recognized by Identifont.) Or third, you could just use the font pairings as visual inspiration and use that to return to your own fonts to make similar pairings.
Do you have any font secrets you'd like to share? Please post them below.
