It’s not easy selecting which fonts to use for a website. Back even a decade ago most web designers had to stick with system fonts like Arial, Helvetica, and Tahoma. Nowadays there are dozens of system fonts and hundreds more online.
In this post I’d like to share a few tips and ideas for selecting appropriate font families. Interface design is predicated on the notion of content, which means the style and location of content on the page has a direct influence on the user. If you keep this in mind at all times you’ll stay on course and have a much smoother creative process.
Any website heading text should be attractive enough to draw attention within a split-second. Lots of different fonts produce this effect and it varies greatly depending on the website layout. For really customized headings check out the Google Fonts page and go through the different options.
Some of the various script or handwritten fonts can look beautiful at larger sizes. The purpose of a custom font header is to enhance the page with beautiful typographic effects. CSS3 allows for much more control over text shadows which you might combine together with font weight, letter spacing, or capitalization.
Two of my personal favorites are Molle and Norican. These are both very flashy and seem to work best as a single H1 page header, rather than multiple times on the same page. Otherwise you might just choose a similar font based on the website’s body copy. Increased font size with bold lettering makes for an excellent H2-H4 style.
This is a tricky subject without any definitive answer. Most websites prefer to use sans-serif font styles because they’re easier to read and work best on all devices. Take a look over this Designer News thread which includes a series of great responses.
Google’s Open Sans is terrific because it’s free and very crisp at all sizes. Although it will take a couple seconds to load the font resources, most users have a fast enough Internet connection that it shouldn’t be noticeable. Google is also fantastic because they allow you to download a local copy of the font file and store that right on your website’s server.
But keep in mind that traditional fonts are always a good option. Most operating systems have standard installed fonts like Arial, Tahoma, Geneva, and even Helvetica. By sticking with a system font there’s almost no loading delay. The only downside is that most people are familiar with system fonts and they can get a little boring.
If you’re looking for a good mix try browsing through CSS Font Stack. That site has everything you could ask for all in one handy location. Each font stack is split up based on serif, sans-serif, or alternative styles.
Then you can directly copy/paste the font families into a stylesheet to update the page content. This is all very straightforward and truly an amazing facet of working with online tools. Most of the stacks list 4-5 different families together as fallbacks so they’re very reliable.
Small Links & Info
Dealing with smaller page links can be an annoying process. Think about fitting all that information into your website footer, sidebar, and smaller content areas. How do you pick the best font for the job?
It again comes down to the individual style of each layout. Generally speaking I prefer sans-serif fonts when squeezing down to a very small size. These tend to fit nicer into tiny spaces, and without the little serifs sticking out there’s less confusion when reading from a distance. Also sans-serif fonts can be all uppercase and still retain strong legibility.
I might recommend Roboto as one free example. Truthfully you can’t go wrong with any of the free choices, so feel around to see what fits best. However once you get into premium stuff there’s a lot more opportunity. Proxima Nova is my go-to choice for custom webfont in the style of small footer links.
The Invision App website uses a similar style in their header and footer. The navigation links seem fitted and organized according to a natural structure. Brandon Grotesque is their choice of font. So really it comes down to how much you’re willing to put into font selection. Would you rather go with a series of free fonts, or pay for premium access to unique families? There is no right or wrong because the answer will change with each project.
Finally we get to the biggest piece of this puzzle which relates to hierarchy. Every webpage needs some form of hierarchy to distinguish between significant text, body copy, and smaller notes/trivial tidbits of information.
Commonly designers will apply distinct CSS font styles like bold, italics, small-caps, or letter spacing to create a visible contrast. But there’s also the option of mixing various font families together onto the same page to create a sense of balance and harmony.
Larger fonts will typically stand out more as headers, labels, captions, and immediate points of interest. Regular page body text is most often skimmed quickly for information. Body copy should still be easy to read but perhaps not require as much space on the page. In fact, I feel that paragraph line height is more important than font size in the context of readability.
As for font choices the options are enormous. For any standard webpage I’d say sans-serif in the body copy and some alternative choice in the headers. Magazines and more strict business websites could prefer the serif look mimicking newspaper print. Overall you just need a specific design goal worth aiming towards. If you can hit the target, then most of your font choices will be interchangeable as long as the hierarchy still makes sense.
I certainly hope these font choices & suggestions can prove useful to interface designers. There is no absolute right or wrong answer when it comes to typography because each project has it’s own needs. But once you learn which fonts seem to fit nicely together you may be surprised at the final result.