From our sponsor: Create stunning brand assets with the help of our AI-driven Creative Assistant. Get started today.
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.
I usually spend a lot of time in choosing the right font for each project and I always think that every word should be worth reading.
I’ve learnt that most of the time two fonts are just enough and that the tricky part is to make them work together with the best contrast possible. Anyway, this is only my experience.
Thanks for the link to fonts in use, I didn’t know the site and I think it will be a good source for inspiration.
Great article, Patrick!
I use the WhatFont tool to inspect fonts on websites. It’s quite handy and really quick.
@Federica, I generally stick with just a couple fonts as well, I think you can over kill with to many fonts, plus two fonts are easier to manage.
@Ralph, I love that WhatFont tool! So awesome, thanks for sharing… that just made my life a lot easier.
Great post. You gave me so many ideas to work with, i love fonts so choosing is always a challenge. Thanks so much!
you are the best! thank you!
Great article! I was surprised though that you didn’t talk about the legal rights to use particular fonts in different mediums. This is something I am currently struggling with. Would’ve loved some tips on it. 🙂
Very good post on typography Patrick. I seem to be in love with the same overused font but you can find some pretty good web fonts nowdays to use in your designs or website.
cool! a really awesome tuts on clearing out some of the things that need to know when implementing different fonts on web designs, just a question which tools you usually use for inspecting fonts on chrome and firefox?
@pinoyscreencast, I just generally use Firebug in Firefox and Element Inspector in chrome. Just find the css.
But check out @ralph’s comment, he dropped a link to a great browser tool for FF and Chrome that allows you to hover over the font and see what it is – I’ve been playing around with it all day, its pretty cool.
Great article Patrick. Another cool tool is this web-based font preview tool: http://www.webfontspreview.com/ .
Check it out – you can test out various and multiple fonts on your website or any website.
Great article, and Ralph – great extension, thanks for passing it on!
Some good points raised here. Personally I always prefer to use web safe fonts, rather than images, purely from an SEO point of view. With the levels of customisation now available through CSS3 it is possible to do pretty much anything with real text.
I also tend to use 2 fonts in any website I design, just for continuity really. Unless it has some kind of typographic element, then there are no limits!
Cool article, I’ve been messing around with Typography a lot the past few months the links were helpful.
Fonts are really cool, and they all have suitable uses. Except comic sans. That is the font of the devil and should never, ever, ever be used. Ever.
Thank you, super article! Excellent reference on what to consider, and resources for choosing fonts for design work.