The Straight North Blog

Back to Blog

Font Selection for Web Designers

Posted by:

Let’s Take The Confusion Out Of Font Selection

If 95% of web design is written language, then, as a web designer, it only makes sense to do all you can to make that written language effective. It’s no secret that quality design is about much more than looking pretty–it’s about giving users a sense of your brand; communicating information quickly and clearly; and providing a place to offer a clear call to some desired action, be it subscribing, becoming a member or making a purchase–and written language is key to achieving those goals. That’s why font is such a key part of quality web design. Font selection, also called typography, is about finding the right fonts to make your written content clear, understandable and successful—-so that your message gets across and your business can grow.

Why Font Selection Matters

Just like layout, organization, color scheme and photo selection, font can create a certain perception or feel of your site to visitors, as well as a certain emotional response. As Nick Harrison of Crain’s Chicago Business wrote recently, one of the keys to differentiating a company’s image is to “[b]e as consistent (color schema, logo, font, brand message, etc.) with all of your digital assets and communication” as possible. By using coherent font selections across marketing materials, you can enhance the sense of your brand and set your company apart.

Font also directly affects the reliability of how information is communicated to users, and that’s as true in the world of web design as it is in the realm of fonts outside the Internet—-where the poor readability of road signs has been known to lead to car accidents, for example. If a font is hard to read, it might not be able to communicate your message, or, even worse, it may annoy or frustrate visitors enough to send them away from your site completely. Easy-to-read fonts, on the other hand, enhance a user’s ability to understand your messaging and become engaged.

Readability of Different Fonts

The readability of a font is influenced by several factors, including style, size, spacing, alignment, font color, tint and background color. While less readable fonts may sometimes serve certain stylistic purposes, “in most cases, communication comes before style,” as Douglas Bonneville of Smashing Magazine says.

There are two main types of fonts available: serif and sans serif. Serif fonts are fonts with extra tails or embellishments on the letters, such as Times New Roman, Georgia and Garamond; sans serif are fonts without those additional details, such as Arial, Helvetica or Verdana. In print, serif fonts are traditionally more readable, but on the web, it’s the sans serif fonts that typically seem most legible through the pixels of computer monitors. As available technology continually increases the resolutions of computer screens, there may be less need for sans-serif web fonts; however, because of the familiarity users have developed with them on the web, they are likely to remain the preference of most designers.

When choosing a font for body copy, look for one that’s clean, legible, made to work well in large blocks of text. Fonts with decoration or detail work better as headers or small chunks of text.

General Qualities That Make for Easy-to-Read Fonts:

  • Familiar style and shapes (which may explain the prevalence of Times New Roman in materials)
  • Designed for the computer screen (such as Georgia or Verdana)
  • Performs well on various operating systems
  • High x-height (distance between baseline and top of lowercase “x”)
  • Strong contrast between font color and background color
  • Sufficient space between lines of text
  • Sufficient space between letters
  • Sufficient space between words

Beyond general readability, the type of font you select for a given web design should meet the particular needs of the project in terms of legibility, style and emotional response.

Size of Fonts

One of the most crucial aspects of font readability is size: font that is too small will be hard to read, but at the same time, font that is too big will waste space. So what size is the right size? Oliver Reichenstein of Information Architects makes a strong case for 100% font size for the body text of a web page (i.e., 16 pixels). “Initially it is more difficult to create a good layout with a big font size, but that difficulty will help you design a simpler, clearer site,” Reichenstein says. “[16 pixels] is not big. It’s the text size browsers display by default. It’s the text size browsers were intended to display … It looks big at first, but once you use it you quickly realize why all browser makers chose this as the default text size.”

Smashing Magazine agrees: “16-pixel text on a screen is about the same size as text printed in a book or magazine; this is accounting for reading distance.” Not only is 16 pixels a default size and a size comparable with typical print materials, but also, this larger-than-average text size particularly appeals to an older audience. Web visitors in their 40s work twice as hard to read as those in their 20s, Smashing Magazine reports, and those around 60 work four times as hard as that.

By choosing a 100% font size, you benefit the maximum number of readers—which means you market to the maximum number of potential customers.

Number of Fonts

When combining multiple fonts in one web design, it’s important to consider how they work together. Fonts should complement each other rather than confuse the reader: ideally they’ll have something in common but otherwise be totally different. In most cases, it’s best to use just a few. According to A List Apart, “One typeface can be enough to say what you need to say, and two is usually plenty. If you are using more than that, have a good reason–like trying to achieve a certain aesthetic–such as replicating the look of an old boxing, film or music poster, for example.”

The different fonts you choose should also be able to be easily distinguished from one another. “We don’t want to distract the viewer with the question, are these the same or not?” writes Smashing Magazine. “If we are going to throw another font into the pot along with Helvetica, much better if we use something like Bembo, a classic Old Style face.”

Incorporating easily readable, large, distinguishable fonts into a web design can greatly enhance web communication and effectiveness. Click here for more information on web design. Our agency specializes in B2B Internet marketing, with clients in businesses such as fire retardant clothing and welding gloves.

Related Straight North Posts:
7 Essential Qualities of a Great Logo
Does Your Website Design Look Like Your Company?
The Psychology of Color and Online Conversion