Website font choices affect more than the web design aesthetics.
You’re reviewing the latest mocks for your new website, and you’re not quite sure about the font choices. They look nice, but you wanted something edgier, bolder, something that pops off the page and grabs the visitor’s attention. Should you raise the question with your web designer?
We understand why you would want to. After all, your website reflects your business. It’s something personal, and just as most of us would prefer to choose our own clothes in the morning, we hesitate to fully turn over design decisions to anyone else, even the person we hired because of their hears of professional expertise.
But there’s something else you should know before you start basing your decisions on personal preference: your font choice isn’t about you.
It may sound silly to go this deep into a design decision as basic as web typography, but the truth is that your web font decisions need to be based on what is best for your visitors. And that’s not a matter of opinion—it’s a matter of objective research. There actually are good and bad choices for web typography, and making the wrong one can have an impact on how your users engage with your website. Here’s just a few.
1. Serif vs. sans serif fonts.
You know those little flourishes that appear on the edges of letters in traditional typefaces such as Times New Roman? Those are called serifs. Whether or not a font has serifs is one of the most basic distinctions in typography.
Serif fonts used to be the norm, and you’re probably used to seeing them in books, newspapers, and many other print mediums. Sans serif (without serif) fonts have a more modern edge, and proliferated in early websites because of their greater screen readability.
These days, screen technology has improved enough so that serif fonts are more legible online—and in many instances, more legible than their sans serif counterparts. It is acceptable to use either font online, and it can even be a pleasing effect to pair them with each other, such that one forms a header and the other the body copy. But be aware that serif fonts become harder to read the smaller they get, and that in body copy, sans serif characters can sometimes be harder to distinguish from each other.
2. Font hierarchy and readability.
Your web copy should not appear as one gigantic wall of text. This has a negative impact on readability and can lead to fatigue on the part of your users. Instead, use your fonts to break up body copy by establishing clear hierarchies on the page.
Titles, subtitles, and headers should have larger text, while less important data, such as publication dates or bylines can be emphasized or de-emphasized by using a smaller font size than the body copy, different coloring, or style effects such as bold or italics.
3. Body copy legibility.
When it comes to body copy, choose styles that are highly legible. This means absolutely no script fonts. They may look nice in headers, but they will be torture for your readers. Furthermore, keep the font size no smaller than 14pt. Any smaller, and your visitors will strain to read the words on the screen.
When it comes to line length, 40–60 characters is often the ideal length for comprehension, but this is too narrow for body text. Instead, save the 40–60 character widths for headings, and keep line length at a comfortable 650 pixels.
Text alignment is also key. Right-aligned text is terrible, because it goes against our natural reading movements. When the reader’s eye reaches the end of a line and jumps back to the beginning, it takes a few moments longer to find the right line to continue reading. Fortunately, there’s rarely any call to use right-aligned text, so it’s easy to avoid.
Center-aligned text has similar problems, but can be used judiciously for aesthetic reasons. It should never be used for a full piece of content, however. Ditto for justified. While the even line lengths look tempting, the varying spacing between words can add confusion. Instead, stick to left-aligned text wherever possible. It’s easiest to read, and it’s what most users expect.
4. Sizing, weight, and contrast for legibility.
Your visitors need to be able to read your website. If your text is too small, to thin, or too light to read, it’s not doing anyone any favors. And don’t base these assessments on your personal experience, either. Your eyesight might be fine, but someone who has vision problems will struggle even more. Err on the side of greater accessibility, and you won’t risk alienating anyone.
These things are also affected by other elements on a page. If text appears in front of an image or video, or if parallax scrolling means that the text will appear over a variety of backgrounds as it moves down the page, then you need to bear that in mind as you consider design options.
5. White space.
For some business owners, the temptation to fit more words into a space can lead to bad design choices, in particular, crowding out white space. Wide margins are more friendly for readers than narrow ones, and even the space above and below lines of text can affect how easy it is to read.
That includes the space between paragraph breaks and above and below headings. Give your text room to breathe, and your visitors will be more likely to stay on the page even if they have to scroll half a screen down to see your new product video.
Web typography must lead to greater legibility, readability, and usability.
All these restrictions and guidelines can make your options feel limited, but they’re actually good news! You can take a weight off your shoulders knowing that by following these principles, you’re creating a design that follows the rules of good taste and puts your visitors first. The result may not be exactly what you envisioned, but it will help you win over business and grow customer loyalty in the long run. And what’s not to like about that?