Typography on the Web

Typography on the Web

Have you recently visited a website that featured a difficult to read or simply unattractive font? Chances are you left the website confused and without the information, you were looking for.

Typography directly impacts a user’s experience on the web. Poor readability will frustrate your site’s visitors and leave them looking elsewhere. Don’t lose a potential customer over a design decision!

Complement Your Brand

Choose fonts that complement your brand. Brand identity extends far beyond a logo.

Begin the selection process by taking a moment to consider your brand’s key attributes. Would you describe your brand as modern, clean, or innovative? Then check out popular sans serif fonts such as Futura, Arial, and Helvetica. You can identify a sans serif font by its lack of lines at the ends of each letter. On the contrary, if your brand is associated with tradition and authority, choose a serif font. Some serif fonts you may be familiar with are Times New Roman, Baskerville, and Georgia.

Whether you’re designing in digital or print, it’s a good rule of thumb to limit your use of decorative fonts. Script and handwritten typefaces can make for successful headlines, but appear cluttered and distracting when used as body copy.

Readability is Key

Once you determine which style best aligns with your brand’s personality, choose 4-to-5 fonts that stand out to you. Sites such as Google Fonts and Adobe Typekit feature filters that allow you to browse by style. I differentiate between fonts within the same style by comparing their upper- and lowercase letters, as well as glyphs and ligatures – also known as special characters. This method allows you to dive further into each font’s unique characteristics.

Once you’ve narrowed down your selection, experiment with sample text. If you’re selecting a font that will be used exclusively for headlines, preview a few words at multiple sizes. Your headline should stand out from the body text.

When selecting a body copy font, preview several lines of text at 14 points or less. Users should be able to read multiple paragraphs on their mobile devices, tablets, and desktops with ease. And don’t forget to adjust your kerning (spacing between letterforms) and leading (line height)! Too much or too little space between lines of text can ruin any font – no matter its quality.

Is One Style Superior When it Comes to Web Readability?

Sans serif fonts live predominantly online due to their lack of detail. The lack of detail allows them to display much clearer in smaller spaces. That being said, serif fonts can be successful online. The serif makes it easier for our brains to distinguish letters – reducing reader fatigue in long passages of text. Websites that feature lengthy articles of information could benefit from a serif font.

Can I Choose More Than One Font for my Website?

Absolutely! A simple, yet effectivedesign method is to pair styles of fonts together. Keep in mind that using too many fontsin a design is not a good idea. Try and stick with two that can be differentiated but complement each other.

In conclusion, choose fonts that both accurately represent your brand and are comfortable on your visitors’ eyes. If your readers don’t notice your font, you’ve done a font-tastic job!