Designing your own website can be daunting. What font should you use? What colors would look best? How can your font and color choices attract customers—and get them to stay? With a push in the right direction, everyone can put together a website that´s both eye-catching and effective. Below are some tips to help you get started on font and color selection.

Keep It Simple

When choosing a font for your body text, remember that readability is key. For web content, a sans serif font (a font without serifs or embellishments) is easiest to read. Because font selection varies depending on your computer, choose a well-used, widely-available font like Verdana for your body text.

Make sure to monitor the amount of text on your website. Use shorter line lengths and keep your text crisp and concise. Shorter sentences and smaller paragraphs will be easier on your customers´ eyes, and will keep them from feeling bogged down in text.

Flaunt That Font
Your font can help to pull customers into your site—or push them away. Here are a few tips to help you select effective, eye-catching fonts:

  • Body Text: as mentioned above, sans serif fonts are the easiest to read. Choose a sans serif font with clean lines and an easy-to-read layout. Use only one sans serif font in your body text to preserve continuity. (Note: Bolded sans serif fonts also work nicely as headers—as long as they´re the same font as your body.)
  • Headers: Serif fonts (fonts with decorative finishes) are best used in headers or as added emphasis. Feel free to use a more creative font—but use it sparingly. Also, keep in mind that more obscure fonts may not show up properly on all computers. If you use a serif, be sure it compliments your sans serif body text.
  • All Caps: Avoid using all caps to emphasize text. First, capitalized words are more difficult to read (our eyes are trained to recognize the shape of a words as well as its spelling). Second, capitalized words tend to appear overstressed (readers will feel they´re being shouted at). Instead, apply emphasis by using color, bold, or italics.

Size Matters
After you´ve chosen your body text and header fonts, take a look at their relative sizes. Make sure your body text is readable without appearing too small or too large. When pairing a heading with body text, make sure the heading is large enough to stand out from the body. Try increasing its size, bolding it, or selecting a more distinct (yet readable) font. Headings should attract attention and compel the customer to read further.

Pack A Colorful Punch
Color can add flair and personality to your website—but if used incorrectly, it can actually repel customers. Here are a few tips to help you color your site successfully:

  • When choosing a font color, be sure to select one that is easy to read and that contrasts well with your background color. While the easiest color combination is black text on a white background, you can experiment with color to create a visual appeal.
  • Don´t use more than two font colors on your site. Occasionally three work, but it´s safer to just use two—one for the main body and another to draw attention.
  • When choosing a background color, make sure your body text does not fade into the background. Choose contrasting colors as well as contrasting tones—one must be light and one must be dark.
  • Studies show that light text on a dark background doesn´t read as easily as dark text on a light background.
  • Avoid fluorescent text and background color—it´s difficult to read.
  • Keep in mind that people with color blindness may have difficulty viewing a red/green color combination.

Browse the internet for websites that appeal to you. What do you like about them? What fonts do they use? How do they employ color? Keep track of the elements you like. Likewise, look for websites you find unappealing. What do you dislike about them? In what ways are they visually unappealing? Once you know what works and what doesn´t, apply the same concepts to your own website and watch your profits soar!

Popularity: 30% [?]

4 Responses to “Website Design: Font Do´s and Don´ts”

  1. Lynette Says:

    Your suggestions are very powerful and I think my business will do well once I have it up and running. Pun intended. Shoes. Thank you

  2. Ivan Says:

    Why only shoes? You can nominate a lot of products that the humans search for, but you must invert attention to this that was searched.

  3. Ivan Says:

    There are a lot of factors that are big for the sales and the government in one site. Attention and lot of time as well necessarily.

  4. Kevin Delaney Says:

    A note on fonts: First, you are correct that web designers should use body text for the body of the work and only use display texts in headers (if at all).

    The statement that serif fonts are body text and serif fonts are display fonts is a bit off.

    Historically, publishers used serif fonts for body text, and san-serif for display text (headers). The vast majority of printed books and newspapers still use this convention.

    The advice you give is the opposite of what the world’s leading publications practice.

    In the mid 1990s, Microsoft used the Sans-Serif arial font for Windows because the monitors of the day had very low resolution. Microsoft felt that Arial was more legible at mid 1990 computer monitor resolution. With today’s higher resolution monitors, that argument went poof.

    Most of the recent studies seem to find that reader’s preference is more important than serif or sans-serif. So, I’ve decided that the best option is to use whatever font the reader chose as their body text.

Leave a Reply