Are your website fonts readable and on-brand?

We can all agree that displaying easily readable text on your website is paramount. But not everyone understands this is about more than just sizing and legibility. The fonts you apply to your text could be aiding or impeding your communication. Successful fonts will express both your brand look & feel and the tone of the story you wish to tell.

Head, subhead, body

There needs to be a hierarchy in your fonts for your communication to work. The messages of your story depend on a hierarchical structure so the reader can easily understand. Like a book, your website content requires a title, headlines, and subheads — which usually carry the most visually prominent font family — while the body copy, quotes, and call-outs usually carry the supporting font family. The key is to strike a balance between them.

Choose wisely

There are a bazillion fonts to choose from. However, since fonts are an extension of the look & feel of the logo and identity, they should be on-brand. To achieve this, start by visually leveraging the font displayed in your logo type. Then choose another font that best compliments the first font, and stick with just those two font families. Using one font family for headline styles and a second font family for body styles will lay a foundation for clear communication. Any additional fonts will only distract from your story.

There's an art to choosing and pairing fonts. For inspiration, look at some of your favorite sites to see what they've done.

Size does matter

Applying an appropriate size to each font style will enhance your page design. Pay attention to the lightness or heaviness of the fonts, the surrounding white space of the page, the space above and below headings, and the space between the lines within paragraphs. Adjust the sizes until everything plays together nicely. And limit your font sizes to three if you can.

Left to their own devices

People prefer their own particular device for consuming content. Your website fonts will appear different on each different device. Review the display of your fonts to make sure they're legible on a desktop device and all other devices. Some website builders are easier than others at allowing you to adjust the fonts for each device view.

Readability rules

There's no magic silver bullet when it comes to fonts. But if your logo type will accommodate, it's generally a safe bet to combine a serif font family with a sans serif font family. The article you're currently reading is a perfect example. And even though the digital age has brought many sans serif paragraph text, most of us read serif text faster. The reality is they worked well in books for centuries and they continue to work well today.

#brucefenske #brandfocus #websites #webdesign #userexperience #userexperiencedesign #font #fonts #readable #readability #communication #brand #tone #story #hierarchy #size #device #desktop #mobile #serif #sans #title #heading #headline #subheading #body #text #logo #pairing #easy #space #message #content #customer #business #audience #engage