Typefaces & Fonts 101

For many beginners, the task of picking fonts is a mystifying process. There seem to be endless choices — from normal, conventional-looking fonts to fresh candy cane fonts — with no way of understanding the options, only never-ending lists of categories and recommendations. Selecting the right typeface is a mixture of firm rules and loose intuition and takes years of experience to develop a feeling for.

When you create a web page and specify a particular typeface (loosely called “font” here) for that page, the font is not embedded in your web page. All your web editor does is to put a reference to the font into the page. For example, if you create a web page that uses the Comic Sans font, then a modern web editor like Dreamweaver might insert the following line into the style sheet of your web page:

font-family: “Comic Sans” ;

The Comic Sans font itself is not embedded in the web page. If your visitor does not have that particular font, his/her browser will use some other font, even if it does not suit the content and design of your page.

Read on to know five easy tips for picking and using fonts 🙂

1. Choose a Font, carefully

It’s quite easy to pick a font based on your mood, aesthetic taste or maybe you just liked how it looked! But you also need to keep in mind if that particular font would look good on your website and whether visitors would be able to read and understand what’s written.

2. Know your Fonts!

Typefaces can be divided and subdivided into dozens of categories, but it all depends on which would best suite your website and the content on it. In the world of typography there are five basic types of fonts: serif, sans serif, cursive, fancy and monospace. Of these, serif and sans serif fonts are used to present bodies of text. The first step in selecting a font for your web site is to decide whether you want a serif or sans serif font and to know how they differ.

3. Sizing the Text

Now that you’ve chosen your fonts, it’s time to establish the size of your main body text, headings, sub-headings and other text elements.

For the main text, start with the most common and readable font size – 12 px. If 12px. looks too large, try 10px. The visual height and width of individual characters may vary from one font family to another and between serif and sans serif fonts.

4. Style your fonts, a little

You can add style and interest to your fonts through the use of “attributes.” These stylistic elements introduce variety and help you better convey your message. The most common font attributes are plain, bold, italic, underline, capitals and color. When used, these elements become part of your site’s overall design. If used sparingly, they can be effective. When overused, your page can look cluttered and unprofessional. Be consistent when applying attributes and remember that “less is more.”

5. Colors work magic!

Use color to attract attention or to emphasize a word or select group of words. Make sure your color choices complement your overall web design. Use additional color sparingly or your web site will look cluttered.

Once you have selected fonts for your website, decided on font sizes and attributes, your choices will be coded into a style sheet that will dictate how text will appear throughout your web site. While fonts may not seem as important a design element as color and graphics, thoughtful consideration should go into your selections. The fonts will convey important information about your company, products and services. They will help visitors navigate your site and interact with you.

Stay tuned for Part two of this series!

, , , ,

One Response to Typefaces & Fonts 101

  1. Tech Web Buzz July 4, 2013 at 2:27 PM #

    Really, fonts and font size is very important factors for websites, especially for blogs..
    Thanks for sharing tips..

Leave a Reply