Best Fonts for Web Design

Best font for web design

Best Fonts for Web Design

In addition to compelling graphics, beautiful colors and a user-friendly web design; fonts also play an important role to tell your story. Knowing a little bit about which fonts are suitable for your website could mean a difference between engaging your visitors to read the content and scaring them away after a few seconds. There are myriad of fonts to choose from, but only handfuls of them are successful on the web.

Basics Fonts for Website Use

There are basically five basic font types – serif, sans serif, fancy, cursive, and monospace. Of these, only serif and sans serif are used on the body of the text on web pages.

First, you decide whether you want to use serif or sans serif as the font for your website. Before doing that, we need to understand how they differ.

Serif Fonts

Serif fonts have stroke-style lines and strokes that extend from the end of each letter and symbols. Small-feel like, letters with tails  or cap, or flags-like Serif fonts makes each character more distinct, and as a result they are easy to read.

For centuries, Serif fonts have been preferred fonts in printed books, magazines and newspapers.

If you wish to convey warmth, intellectual, artistic, and conservatism, Serif font is definitely the font you want to use for your site.

Sans Serif Fonts

Sans serif, on the other hand, lacks the strokes and lines are plain and straightforward, and as a result, making it less distinct, and making the font difficult to read. Moreover, they lack personality as individual details are missing. Sans is a French word which means 'without'.

Sans Serif fonts are typically used for newspaper headlines, photo captions, and technical documents. Serif fonts may look blurred on computers having different resolutions; however, their simplicity makes them extremely easy to read.

Because they lack personality, plain, and straightforward, they're often viewed as cold and impersonal.

Cool, technical, crisp, modern, and youthful are represented by Sans Serif fonts. And that's why they serve as elegant headings, and for general text containing technical contents.

How to Select the Right Web Fonts

Now, once you've decide which font to use between Serif and Sans Serif, the next step is find out fonts that are more accessible and effective on websites.

Choose Common Fonts

Before deciding to use a font on your website, it's better to use fonts that are common to various types of operating systems, because different PCs are equipped with different operating systems and as a result, different fonts.

So, if you don't choose common fonts pre-installed for PC and Macs to display text on your website, then the system would replace it with a default-font, and as a result, website don't look the same.

Check to see if there are pre-installed fonts on both the PCs and the Macs.

Choose the right set of fonts

There are sets of fonts that come pre-installed both on PCs and Macs. By choosing one of them, you'll control how the text will appear on almost every browser. Generally, I use these fonts for the graphic headers of my web page.

  • Serif: Times New Roman or Georgia
  • Sans Serif: Arial, Trebuchet, Verdana, (Andale Mono, Impact)

Once you've selected fonts for the headings, you can choose other fonts to use for non-graphic headers and sub-headings, or they could be the same.

Check your website design to decide which font best suits them. It is important that you keep the overall design of the website in mind and decide what type of message you want to portray to your visitors. Visit your competitors' websites and other websites in related industries; and look how they are using the combination of fonts to attract their visitors.

Sizing the Text

Now that you have chosen the fonts, let's set the text size for the body text, the headers, and the sub-headers for the websites.

For the body text, opt for standard 12px font-size. If it looks too small, increase it to 14px, because smaller fonts really scare the visitors away. Even better, opt for font-size 16px, because recently, in a survey, it was discovered that the 16px was the new 12px.

Suggestions for font-sizes.

  • Text: 12px, 14px, 16px
  • Headings: 22px, 28px, 32px
  • Sub-Headings: 18px, 22px
  • Captions: 10px, 12, 14px

Tip: Avoid 8px and 9px font-sizes because people really don't care much about smaller fonts these days, especially those with visual impairments.

Font Styles

Plain – Use for main text on bright background

  • Bold – for emphasis, headings, keywords, menus, and small chunks of words
  • Italic – for emphasis again – keywords, quotes, photo credits, titles, and caption. Use it sparingly.
  • Capital letters – use the rules of the basic grammar, that is, the first letter of the word ( Profile, Contact Us)
  • Underline: It's advised not to underline because they'll confuse readers for links
  • Color – use them to attract attention, Go, Stop, Look, Click here, for example. Ensure they complement with the overall color of your site.

Source: http://webdesignpeeps.com/fonts-for-websites


Leave a Comment:

Web Design rank better on search engines

Google's search engine, www.google.com, uses a variety of methods to determine which pages are displayed first in the results. Their exact formula is a secret, but there are a few things you can do to improve your positioning. The term for this is Search Engine Optimization (SEO).

Read More

Best Fonts for Web Design

In addition to compelling graphics, beautiful colors and a user-friendly web design; fonts also play an important role to tell your story. Knowing a little bit about which fonts are suitable for your website could mean a difference between engaging your visitors to read the content and scaring them away after a few seconds. There are myriad of fonts to choose from, but only handfuls of them are successful on the web.

Read More