From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.
If you’re like me, selecting fonts for your web design is going to be either easy or the most difficult task you’ll face. Fonts are a huge, powerful part of any design and they should be taken seriously so that your design can communicate its meaning and purpose correctly. Great font selections can make a web site, they can enhance your design and effectively communicate the message and goals of the web site to the user. Bad font choices can drastically alter your design and affect how your site is perceived by users.
Typography is truly a science and many designers spend an entire career devoted to the study. But selecting effective fonts for your project doesn’t require an in-depth, life long study of ligatures, glyphs or cap heights, you simply just need to ask yourself a few questions — although the study of type will always help these tough decisions.
1 – Are users going to read it?
You’ll need to know what kind of content you are dealing with before you can even begin to think about what kind of fonts you’ll use. You’ll need to know how much content you are dealing with, the audience who will be consuming it and if the content is even meant to be read seriously or if its just for sheer decoration.
Large amounts of content will drastically affect what kinds of fonts you will want to use. You’ll need to choose fonts that are designed to be read and consumed, not fonts that were designed to be used as decoration. Users don’t want to spend hours reading text that isn’t easy on the eyes. For large content chunks, consider fonts that are very readable and legible, you don’t want to use a really fancy font if the user is going have to digest every word.
You’ll need to find out who the content is written for. For example, the target audience of Scientific American is different than the target audience of Nickelodeon. Some fonts are more serious, some are more casual and playful and some are more decorative. Knowing who your audience is (or will be) can greatly narrow down the field of fonts to choose from.
Some content is never truly meant to be read, it’s just there to enhance your design or for decoration. In this case, you may opt for a particular design quality over a fonts readability. A decorative font that is meant to be “heard”, not read, may convey your design message better than a serious font that is meant to be read, not “heard”.
2 – Do I need to use web safe fonts?
This is a big question that needs to be decided before you open up Photoshop or Illustrator. There have been many times when a designer uses some crazy cool font only to be told by the project manager after the design review that only web safe fonts can be used. Rather than redesigning to fit, find out or be prepared to use web safe fonts.
Here’s a few great references for what fonts are safe for each OS:
3 – How many fonts will I use?
Using only one typeface is usually pretty boring — it can be hard to create effective visual hierarchy when you are just simply altering font sizes and colors. Using differing font combinations is a great way to create hierarchy and visual interest. But how many fonts are you going to use?
This may sound like a dumb question to ask but I believe it’s an important thing to figure out before you start rapidly scrolling through the font drop down box in Photoshop. In some cases, instead of using three or four differing fonts you may only need to use a couple of fonts and take advantage of style variants like italic and bold. Some fonts are better suited for italic and bold styles, so knowing that ahead of time may be a huge benefit before you start pairing up fonts.
4 – Which categories should I use?
There are so many categories of type out there so it’s a good idea to pick what categories you think will work well with your design before you dive into all the hundreds and thousands of fonts within each category. If your site design is more serious and formal consider using a serif, slab-serif or Gothic. If your site design is more casual or modern maybe think about a sans-serif, script or novelty font that will better enhance your design.
Narrowing down fonts is a big task so narrowing down a font category will be a huge win. However, picking a category may not be easy, either. In pretty much every library online you’ll find examples of font categories and there are a lot of great articles that talk about the differences and purposes for individual font categories — a couple of my favorites are from myFonts and Font Factory.
5 – Should I use familiar fonts or experiment?
We all have our favorite, trustworthy fonts and font combinations that we continually use — not that there is anything wrong with that. We also see others use particular fonts over and over again. In some cases using the same several fonts becomes a bit of a signature for a designer. When you are having trouble choosing a font that fits just right it’s always a good idea to start with the familiar fonts you know and love.
But sometimes it might be a good idea to branch out and try a new font from time to time, experiment a little bit, explore some uncharted waters. If you’re up for the challenge and you have some time to play with, finding a couple new fonts or font combos can be a pretty fun time.
Finding the right unfamiliar fonts can be difficult if your trying to look for something in particular, so when you have some down time or need a break from the salt mines, surf around some font sites like House Industries, FontSquirrel.com, dafont.com or The League of Moveable Type and download some fonts that catch your eye — for whatever reason. Then later when you are feeling dangerous you can just simply scroll through your own font library to find a “new” unfamiliar font to work with.
6 – What is everybody else doing?
Now, I’ve written other articles on copy cat designers, but finding out what the trends are and seeing what others are doing — especially your competition — can give you some good ideas or even spark some inspiration. It might be kind of hard to find out what fonts or type combos others are using but there are a couple of things you can do to find out. You can use WhatTheFont.com, just paste in the url or give them a screenshot and they’ll try to match it up for you. But my favorite way is to just inspect the element and find the font-family in the CSS — quick and dirty.
If you’re looking to use a new font or a different way to use a familiar font, it’s a great idea to check out what others are doing with it. If your worried that a particular font isn’t that readable, find another site using it and check it out live. Most font sites have previews of what fonts will look like and some, like FontSquirrel.com, will let you input some of your own text and preview it.
A really great resource for finding font inspiration is Fonts in Use, they show you fonts that are being used for a variety of design projects to give you a nice visual or ideas on how to use them. Another really great resource is the Big Book of Font Combinations. This book is exactly what it says, a big book of great font combinations and examples of their use.
Finding the right fonts for your design can turn into a nightmare, but I believe that with a little planning and forethought you can eliminate a lot of the frustration. Fonts are a huge part of any design and building the right font combos for your project can sometimes feel like a chemistry project gone wrong. But chemistry is fun, even when it explodes in your face — as long as it doesn’t peel your face off. Good luck and happy font hunting.