How to Choose the Right Font for Your Site

websiteSelecting the right font for your website is a vital aspect in optimizing the site for your customers’ user experience.

Whenever a customer visits your site, they are consciously or unconsciously evaluating your business based on how functional, informative, easy-to-use and organized your site is. While it might not seem like a font would greatly affect these areas, it actually can.

Let’s take a look at what to seek out and what to avoid when working with a web developer to find your ideal online font.

Consider Size and Readability

Font Size

Ensuring that your font is a reasonable size should be step one in presenting your content to visitors. You don’t want to use a small font which will force people to have to lean forward or squint. Not only is this annoying, but it makes them work to discover your content instead of allowing the site to quickly win them over.

For most fonts, 12-point is usually considered the minimum, with 14-point preferred. This can vary somewhat based upon the font chosen, of course, and section headers, page titles, and logos will often go beyond the 14-point standard.

Leading, Kerning and Tracking

In addition to the size of your font, the line spacing you utilize can drastically affect readability, either allowing the reader to browse your site more efficiently, or slowing them down.

  • Leading – This term refers to the spacing between each line of text on a page. Be sure your web developer takes leading into account while designing your webpage. I’ve seen sites where the leading is so extreme for every line, including between section breaks, that everything appears to have nearly identical spacing.
    This makes the reader process one line at a time with very little context and is highly distracting instead of sending the message that “these 3 lines are a unit” and “these 5 lines are a unit” and so on.
  • Kerning – This refers to the spacing between letters in a given font. Different fonts provide different kerning spacing, with adjustability being available in Photoshop and sites such as WordPress.
  • Tracking – Similar to kerning, tracking refers to word spacing, but relates to the entirety of the word. Alterations for tracking can also be made in Photoshop and sites such as WordPress.

Setting kerning and tracking too close together results in unreadable words, while setting them too far apart looks odd and unprofessional, unless a specific effect is being sought.

Oftentimes, template webpages will have defaults for leading, kerning and tracking, though depending on which sites you’re working with, these defaults can vary. But by being aware of these terms and how they affect your webpage, you’ll be at an advantage when working with a web developer in crafting your site.

Stay on Message

Another aspect to keep in mind about font selection is ensuring that your selection stays true to the branding and overall impression you want your business to convey.

For branding purposes, ugly and unprofessional fonts should certainly be avoided, but decisions also need to be made in regards to serif and sans-serif fonts as well as typeface pairing. Let’s take a look at these concerns.

Serifs and Sans-serifs

Serif fonts are those which include a small line at the end of a stroke for a bit of flair, while sans-serif fonts omit such lines. Both options produce different reactions in the reader and can play a role in readability.

  • Serifs – Fonts of this type can convey warmth, an artistic flourish, intelligence, and dignity. Due to computer resolution variances, however, serifs can appear blurred, so they are usually avoided for all but headings, large logos, or documents which will ultimately be printed.
  • Sans-serif – Fonts of this type can convey modernity, youth, and above all else, clarity and simplicity. Since they lack the resolution issues of serif fonts, sans-serifs can be utilized for any portion of a website, and therefore have become the standard for both sites and PowerPoint slides.

Pairing Fonts

Going hand in hand with serif and sans-serif selection is determining how you will pair fonts on your site. While you could find a font choice that you like and which coincides with your branding goals and use that for all text throughout your site, some finesse certainly is encouraged.

Oftentimes, successful font choices are those which pair different, attractive fonts together for headlines and body copy.

Two sans-serifs will often work well together for this purpose, though you could use a serif font for headlines and section headers with a sans-serif font for the smaller body copy.


Standard Vs. Fancy Fonts

Related to the serif/sans-serif choices is the subject of standard and fancy fonts. More standard fonts are, unsurprisingly, ubiquitous, while fancier fonts are employed for specific uses and effects.

  • Standard fonts – Choices like Arial, Verdana, Georgia, Garamond and many others were designed for legibility and are excellent for large sections of text. Of these types, the font Helvetica has become incredibly widespread, being used by thousands of corporations and government agencies, as detailed in the documentary Helvetica.
  • Fancy fonts – These fonts tend to be specialized for eliciting a certain effect, such as squishing, stretching, or warping the text, copying a distinctive style (military, Broadway lettering, popular logos), or simply conveying a certain type of “personality.” Because of this they are useful for headings, but not body copy. Be careful when utilizing such fonts as some could work against your branding, but the right selection can make your site come alive.

Fonts to Avoid

Determining what is a “bad font” is a difficult proposition, because fonts which are inappropriate in certain contexts can be totally acceptable in others. Additionally, some fonts are considered “boring” by graphic designers due to their frequent use, but that doesn’t mean their utility is any lesser.

There are, however, a few fonts which are notorious for showing up at inappropriate times in professional settings, so you’ll want to avoid them to prevent appearing dated or uninformed.

  • Comic Sans MS – Probably the greatest offender for fonts, this style was originally created to mimic comic book lettering, and is mostly only acceptable for that usage. It lacks professionalism and should be avoided on your site.
  • Papyrus – Another poor selection is Papyrus, a font designed to appear as though it’s from an ancient text. While useful in a limited range of applications, it certainly shouldn’t find its way onto your site.
  • Courier New – This style is meant to mimic the look of typewriter text, and is usually only used to convey that effect, or during the writing of screenplays and manuscripts.

There are many other examples, which a competent web developer can educate you about during your site design. For some further examples, check out 1st Web Designer’s informative post.

Be Mindful of Color

Lastly, the color choices you select for your fonts and website as a whole can affect how your site is received.

You should utilize a font color and background color that properly contrast each other to ensure that readers don’t struggle with reading your content. A simple black text on a white background is obviously the standard, though the inverse can work for some purposes, and various contrasting colors can additionally work well.

Also, different colors produce different psychological effects. For instance:

  • Blues and greens are seen to convey peace, tranquility, purity and nature
  • Yellows and oranges encourage a feeling of warmth, happiness, and joy
  • Red can convey excitement, desire, anger, or danger

There are numerous variations on these examples, and many major companies have utilized the psychological effects of color to great benefit. For a further look at the science behind color selection, check out Fast Company’s insightful post.

As you can see, a lot goes into the font selection of your website to ensure that you’re presenting your company in an ideal way. For further insights about web design, along with search engine optimization methods, be sure to follow the Sixth City Marketing blog.


Our Partners & Awards