We’re constantly reading text on webpages, but there’s more to this text than what meets the eye. In fact, a great decision web designers face is determining what the best font will be for when the site’s content does, in fact, meet a reader’s eye.
Any and every website has words. There are 3 terms that one needs to be able to distinguish between when determining a design for written content:
Typography : The style, arrangement, and appearance of letters, numbers,
Typeface : A design of lettering that can include multiple variations (i.e.
bold, italic, medium, large, etc.)
Font : A particular size, weight, or style of typeface.
Utilizing the appropriate fonts of appropriate typefaces to ensure a cohesive site typography is crucial to the success of a website.
Font is incredibly important because it can change how well your readers are able to read your content, how fast they are able to do so, how they perceive your website as a whole, and even their opinions about the content they are reading. Have you ever opened a website and immediately closed it because the words hurt your eyes? I have. These sites lose readers because they do not choose effective fonts to display their most important content in.
Choosing a typeface
When choosing a typeface or font for your own website, there are 10 important things to consider:
- Keep the number of fonts used to two – three at most
If you use too many fonts on your website, your user will be overwhelmed. You should use your font selection to reflect the content that is being displayed – one font should distinguish titles and headings, a second font should distinguish bodies of text, and maybe a third font to distinguish buttons or extras that do not fall under titles or paragraphs.
- Use standard fonts
You should be using fonts that your readers are expecting to see – or at least, fonts that they aren’t surprised to see. There may be instances when a company creates a custom font to design a logo or even titles, but paragraph content should never be in any sort of outlandish typeface that might make the reader more preoccupied with the design than with the information you want them to know.
- Limit line length
Just as with whole paragraphs, the shorter your lines of text, the easier a time a reader will have going through your content. If you have a complicated or unusual font coupled with lines of text that are too long, you have a recipe for disaster. Even if you have an easy-to-read font, no reader will want to waste their eyes scrolling left to right for an unnecessarily long amount of time.
- Choose a typeface that works well in any size
While a certain typeface may look fantastic when it’s blown up on a large computer screen, that same font could be impossible to read when shrunk on a mobile device. You type-ically can’t go wrong with sans-serif fonts, but typefaces that mimic handwriting or script are the hardest to discern in small sizes/on small screens.
- Use fonts that have distinguishable letters
Is it an “I?” Or an “L?” With those letters all running together, is that two “n’s?” Or one “m?” These are issues that a reader may encounter when reading a font that does not have distinguishable letters. You always want to make readability a top priority when designing your website content, and ensuring that letters are distinguishable is an easy way to make reading easier for your users.
- Avoid writing in all caps
THIS IS A BIT OBNOXIOUS TO READ. COULD YOU IMAGINE HAVING TO READ LONG BOUTS OF CONTENT LIKE THIS? No. You could not, and you should not. Writing in standard capitalization case provides contrast between the letters and allows users to read quickly. You’d never read a book or an article in all caps, and so you should never write a sentence or more on your website in all caps either.
- Maintain reasonable distancing between lines of text
Websites are not small-print books, nor are they double-spaced research papers. Rather, website content should be appropriately spaced so that a user is able to easily read the content without it feeling too squished or too far apart.
- Ensure there is contrast between font and background color
Without effective contrast, there is no way a user will even be able to see the words you have written, let alone read them. Bright backgrounds and dark text, (or vice versa) are the best combinations. Again, if the text color and background colors are too similar, it will be virtually impossible to read any content.
- Don’t use red or green text colors
This has all to do with accessibility. For users with red-green colorblindness, using red and green text colors will render the text indistinguishable. You always want to make sure to tailor your site to as many users as you can, so it’s best to avoid these colors altogether – at least in terms of the main text.
- Avoid blinking text
This again has to do with accessibility. Blinking text is prone to causing seizures in those who suffer from epilepsy, and is just plain annoying to those who do not have epilepsy. Again, better just avoid it altogether.
Avoiding a typeface
In addition to those 10 things to consider, there are 7 deadly sins to avoid when choosing a typeface:
- Don’t use tacky fonts
- Don’t use fonts that are hard to read
- Don’t squish your words together
- Don’t use too many font designs
- Don’t use random font sizes
- Don’t use random font colors
- Don’t fill necessary white space
The moral of these don’ts is that every decision you make in terms of typography should be done with a deliberate purpose that only acts to enhance your website’s display and usability.
So… Which typeface will it be?
Now that you know what to think about, (and what to avoid) when choosing fonts for your website, let’s look at some of the actual typefaces/fonts you have to choose from.
Some great resources for finding fonts are as follows:
Flipping Typical – This site is one that allows you to type in text and see it appear in lots of different typefaces all at once!
Google Fonts – Like Flipping Typical, Google Fonts allows you to type in text and compare it across multiple fonts. In addition to this, Google Fonts allows you to copy a link or a style to embed a specific font into your own html/css. You can also search for specific fonts using their advanced categories and font properties.
FontPair – This site provides lots of font pairs that work well together; making sure your site typography is in balance and the fonts you’ve chosen don’t clash brings you one step closer to a perfectly readable site!
With all of these resources (and more!) at your disposal, it should be no time at all until you find a perfect font for your perfect website.