How To Use Fonts On Your Website

During our How To Make A Website series, you’ve learnedthe pieces of a website, you’ve gathered everything you need to make a website, and you’ve planned out the perfect homepage. Now that you have all of your information together, you need to choose the best way to display it all.

Choosing typography for websites can be a full-time job. But if you keep it simple and follow the rules below, you can end up with a great, user-friendly website that your visitors will love.

Make it readable.
There is a lot of advice out there on how to make a website easy to digest with the right typography. Here is a quick list of things to do, and pitfalls to avoid:

  1. For larger sections of type, choose a sans serif font. Serifs are the little embellishments on many traditional fonts that make it easier to read in printed material, but can get lost and look bad on lower resolution screens. This post is written in a sans serif font.
  2. Higher contrast is easier to read. You don’t have to have black type on a white background, but try to avoid brown type on a tan background. One caveat: while white type on a black background may satisfy the high-contrast rule, it looks less professional and can leave an uncomfortable after-image on your reader’s eyes. Avoid this if you can.
  3. Left-aligned (aka ragged right) text is easier to read than right-aligned (ragged left). Justified text can also be good, as long as the spacing does not get strange looking with    big    spaces    between   your      words.
  4. Shorter line lengths are better. Don’t make your reader follow a line of text all the way across their monitor. Use more padding around your text sections, or use a shift+return to make the lines break where you want them to.
  5. Use ALL CAPS very very sparsely. The only widely acceptable way to use all caps is in a sophisticated way in your logo or in your navigation labels. Any other use is read as SHOUTING, and that’s just unpleasant to behold. If you want to emphasis something, try using bold.

Make it attractive.
Choosing the right font for your website is important — and it can be difficult if you overthink it. If you have a good, readable font already in your branding — your logo, business card, brochures — go with that, or something very similar.

If not, here are some things to keep in mind when choosing your font. It might be helpful to know that you can use more than one font on your website — but please, don’t use more than three. It’s common to choose one font that is more eye-catching for your titles and navigation, and another more practical font for the body text of your site. One note on this practice: if you’re going to use multiple fonts in close proximity, make sure they’re different enough that it looks intentional. Usually this means one sans serif font, and one either serif or decorative font. The same rule applies to font sizes — if you’re using 16pt font for a title, try 12pt for the body text instead of 14pt. Basically, 2pt sizes or more of difference. Urban Outfitters uses a large, decorative font in their logo, and a small, sans serif font for their navigation just below.

When choosing your font(s), consider your target market. As we discussed in the post on how to make a great homepage, your target market or customer profiles should help inform all of your decisions about the look and feel of your small business website. Should your font be vibrant and fun? Muted and elegant? Grunge? Typography is a great way to express your brand on your website. Apple uses the same sans serif font in all of their branding, and it happens to be a very readable font for a website.

Make it work.
Whatever fonts you choose for your website, the most important characteristic is that it works. Web safe fonts are the best bet here. If you choose the perfect font that fits your brand and your marketing, but someone’s browser substitutes Arial for it, nobody wins. Because everyone’s browsers and computers are different, the world wide web powers- that-be created a list of Web Safe Fonts that are universal and can be depended on to display for everyone. They are:

Arial, Arial Black, Comic Sans, Courier, Georgia, Impact, Times New Roman,
Trebuchet MS, and Verdana.

If you built your site through Webs, rest assured that all of your fonts are web safe. If none of these Web Safe Fonts fit your branding perfectly, take heart; they need not be used for every single part of your site. You can create images for your logo and other pieces of text that you really need to have a certain feel. But use this practice sparingly, since Google and other search engines can not index text that is shown as an image instead of type.

What websites have you seen that do a great job with typography? What about those that have missed the mark? Let us know!

From our How To Make a Website Series:

How A Blog Can Make Your Small Business Website a Success
Five Commandments For A Great Contact Page
How To Make A Great Website Homepage
Dos and Don’ts of User-Friendly Website Navigation
How To Make A Website: Breaking Down The Pieces
Prepare Yourself: What You Need to Start a Website
Checklist: 10 Steps to a Successful Business Website in 2013
Building a Website: Do It Yourself or Hire A Pro?

2 Responses

  1. Reply
    eating disorder rehab
    Feb 05, 2013 - 01:03 PM

    Appreciating the time and energy you put into your site and in depth information you offer.
    It’s good to come across a blog every once in a while that isn’t the same old rehashed
    information. Wonderful read! I’ve saved your site and I’m adding your RSS feeds to my
    Google account.

  2. Reply
    David Oliveras
    Feb 06, 2013 - 04:12 AM

    I’m looking for unique name, but something that can be easily marketed, preferably 2-3 words that would overall reflect the concentration of my photography – maternity and children. Would love your suggestions..

Leave a Comment


Layout Style

Header Style

Accent Color