A Guide to Choosing Fonts for the Web (Part One)
When I tell people I am a web designer, many people think I mostly work on the visual images, or the shapes I design for logos. That’s true, but what a lot of people forget is that choosing the right fonts for a website is a crucial part of a website designers role.
Website designers refer to choosing typefaces and fonts as typography. This is a fancy way of saying the words are laid out on the page in a specific style.
Why is typography important?
Because the online world is 95% text. Yes, visual content and video are making more of an impact, but the written word is still by far the most significant part of how we get our message across.
The right typographic choice always depends on the specific needs of the project itself. If you want to grab people with a headline, this is different than giving them a paragraph of valuable information.
And of course, to have typography that impacts and adds to the brand, you must first start with the font you choose.
Practical & Readable
One of the major differences between the web and printed material is that websites change. So you have to be practical about what works best in the current layout, and then adjust when you need to.
By making your type readable, you immediately jump ahead of at least half of the competition.
The difference between a Typeface and Font
Think of typography as the name for everything to do with choosing a font. Then you have typefaces, which a like a family of fonts. They have shared characteristics and features (just like a family!)
Finally, inside the typefaces, you have individual fonts.
So for example:
Garamond is a Typeface
Garamond Bold in 12-point is a font
(This might seem like a small detail but the more you understand how designers work, the easier it is for us to help you design a great new site.)
Choose your font based on its role
Readability in large titles is far easier to figure out than in the body copy. As a rule, if you can understand what it says immediately then it’s readable enough.
Your body copy is the part of your design that is usually less readable, so make sure you pick a font that works well in small sizes. If you can set your copy to 10px and you can still make out what it says, then that’s a good indication you’ve chosen a readable typeface.
Short sections of text which are three to four paragraphs can be set in a less readable font such as a san serif. When typesetting longer sections over five paragraphs, you might choose a serif typeface to make it easier to follow.
To serif or to san serif?
Just like Shakespeare’s ‘To be or not to be?’ this seems to be the question that every web designer needs to ask.
Serifs are those little vertical lines and flourishes at the ends of letters (like the vertical lines at the ends of the capital S or the horizontal line at the bottom of the lower-case r). Examples are Times New Roman, Garamond, Optima.
Sans serif fonts are fonts that have removed those lines. Examples are Helvetica, Arial. They have a uniform width of the strokes that keep the font readable when reduced in resolution or reduced in font size.
Sans serif fonts are also more legible from farther away, which is why they are suitable for posters and slides, particularly the titles and headers.
Serif fonts are better for reading large blocks of text where the serifs help to keep your eye focused on a line of text, helping you to recognize the word as a shape, which enhances your ability to identify the word and read quickly.
So the answer is it depends on what you want to do with the font.
Font Pairing
The average website has a lot of text. And for this reason, there’s no way one typeface will work for all of them. This is why most well-designed websites use two typefaces: one for body copy, and one for headlines. This is called Font Pairing.
When choosing a pair of fonts, the most important thing to consider is how they work together.
Are they a good match together?
Are they too similar?
Are they too different?
Is one overshadowing the other too much?
Usually, the best way to choose a pair of fonts that work together is to compare them side by side. And remember: it doesn’t as much matter if they look similar, what matters is if they act similarly.
There’s no perfect way to answer this, but an experienced web designer can help you make a better choice.
And if you have one particular font you love, then maybe the web designer you choose can pair another font with it.
Font Size
As a general rule, most designers like to set their body copy to at least at 12px. Others chose a larger size like 14px, which is even better for readability.
Font-sizing is reasonably easy to decide on for body copy. It just comes down to being large enough to read.
What size is optimal for titles? There is no perfect rule here. A title should only be as big as it needs to be. If you keep resizing it, you will know when it’s too big.
If you focus on the practical purpose of your typefaces and fonts, it will make your actual content much easier to read. Your message is then more likely to be understood.
These are some ideas to get you started, in part two of our guide to web fonts, we will look at font hierachy, leading, kerning, alignment and how they can make for a more beautiful, readable website.
Brandastic is a digital marketing and website design company based in Orange County California. We help create brands that are memorable and impactful. Through rebranding, redesigning and enhancing your company message, we help you ignite your potential.