Relationship Between UX and Font

In terms of marketing, user experience simply refers to anything users may encounter when visiting your website, social media pages, or blog or when viewing anything related to your brand, such as the copy for your paid ads. Whether it’s your website’s navigation features to the quality and relevance of your content, there are many factors that can affect the user experience. One thing that may not be on your radar that can be just as impactful is the fonts you choose to use. Take a moment to consider the relationship between UX and font.

Font Sets the Tone for Your Content

Different fonts have different tones associated with their appearance. For example, Times New Roman is seen as being more formal and professional. Serif fonts, which have “feet” attached to letters, set a similar tone. Sans-Serif (without the “feet”) fonts tend to give a more modern and streamlined appearance.

Decorative or display fonts generally suggest a more casual tone, and Comic Sans can be a fun font, whimsical, or charming. If you’re not using fonts in line with your brand’s image, you may unintentionally:

• Give the wrong impression about your business
• Drive some potential customers away if font styles suggest something different than what was expected
• Make your basic points less authoritative or believable

Font Size Can Impact Website Performance

User experience is highly dependent on readability of text. After all, what’s the point of presenting content that’s perfect for your intended audience if they can’t read it. Conversely, you want to use fonts that are so big they draw attention from other things on the page, such as images or videos.

The most effective way to determine the right font size for an optimal UX is to know your audience. For instance, if you are targeting older customers, smaller fonts with a low contrast can seriously impact things like conversation rates.

If you’re going to mix-and-match font sizes, do it with some type of organization. You might, for example, use a larger font size for your main blog title, a slightly smaller font size for your subheads, and a smaller font size for your paragraphs and bullet or numeric lists. Here’s a quick test you can do with font size for anything that will be viewed online:

• Open a word processing program and type a few lines of your preferred font and size
• Send your sample text to yourself and view on your PC and smartphone or tablet
• If you can still easily read it, then it’s likely the right font size

Font Type Affects Comprehension

Affording to a study by Google and IBM, the serif font Georgia was read nearly 8 percent faster than Helvetica, a sans-serif font. This matters because most readers today are habitual skimmers.

So, if your font is slowing them down, they’re more likely to bail and seek what they’re looking for elsewhere. However, this doesn’t mean you have to stick with common fonts or what’s included with any templates you may use. Just be mindful of readability, comprehension, and user experience.

Font Influences Behaviors

There are plenty of studies that suggest font can influence behaviors. If, for instance, you’re presenting serious facts or results from research you did recently in a font that’s too small, not professional, or too dull, it probably won’t be shaded all that much, let alone read all the way through. But even trivial facts, figures, and articles are more likely to be shared if the font is readable, clear, and reflective of the subject matter and your brand.

Choosing the Right Font

Start by Googling your desired font name to see if it’s optimized for the Web for any online content. A color chart can be helpful if you’re planning to use more than one color. Just remember that overdoing with font colors can also affect user experience. It can also be helpful to:

• A/B test similar versions of your content with different font sizes, styles, and colors
• Adjust letter spacing when appropriate to improve readability
• Make sure there’s a noticeable height difference between lowercase and capital letters, otherwise it will appear as if all of your text runs together
• Choose complementary fonts that share similar characteristics to avoid distracting readers’ eyes from the natural flow of copy
• Assign a purpose for each font (e.g., headers, main body text, footer info, etc.)

As long we’re on the subject of font, don’t forget about color selection in relation to your background. Gray text on a white background, for instance, may be fine if your website or blog is being viewed indoors on a PC. However, most people do their browsing on mobile devices these days, so this particular color combination may be difficult to see on smaller screens being viewed in outdoor environments. When presenting anything meant to be seen by your intended audience, place yourself in the role of the user and ask yourself what kind of experience you are having viewing the same content or using the same website.

About the author

James Gorski In addition to being the editor at designrfix and writing about tech, web and graphic design among other subjects, I love “unplug” and be outdoors hiking and enjoying nature. If you can’t reach me, it’s probably because where I am at doesn’t have cell phone reception.