Design Tips & Tricks Blog

Guest bloggers - write for us >>

How To Use Fonts To Your Advantage In Web Design

Category: Typography,Tutorials,Web Design,

Date: 01-20-2012

Web fonts that 'make' a website and some examples of good typography

Fonts are an indispensable part of a websites graphic look and appeal. The style, color and size of fonts can be varied and customized to suit varying website designs. You can really make a statement graphically with big type treatments, or small ones. Type is like a layout or a color, it’s a critically important component of your design.

This article discusses some basic font styles and types that can help your website make an impression on viewers.

Font styles

The most popular types of fonts are serif, sans serif, monospace, fancy and cursive.

Out of these, serif and sans serif are the most commonly used font styles. The difference between these two is that serif letters have ends that are slightly extended, like little ‘feet’ (Times and Courier are both serifed fonts) while sans serif fonts are crisp and clean, and do not have any ‘feet’ (Arial and Helvetica).

Each font type has several typefaces typically – normal, bold, italic, bold italic and sometimes condensed and extended. Verdana is a typeface that is extremely popular and looks appealing on Macs as well as PCs. Other trendy typefaces used are Trebuchet, Arial, Georgia and Lucida Grande (the so-called ‘Apple’ typeface). Each of these has a distinct character style.

Sizing the font

The text size of the main content, headings and subheads are very important as it helps control emphasis. The most common size used for the body is 10 or 12 px. Headings and subheads can be a size bigger in order to establish hierarchy. Font hierarchy is key to your type design and information design – you are giving the user visual cues with your headings, font sizes and bold or normal type selections. This article uses bold larger subheads and the main title at the top of this post is bold, and larger than all the other subheads. This is what we mean by hierarchy.

The font size and boldness helps determine how neat and organized the website appears. The more uniform your use of sizes and typefaces the better the overall appeal of the site.

Adding style and emphasis

Emphasizing text is a great way to bring it to life. There are various options available that will encourage eye movement in a particular direction. Adding emphasis is widely used to advertise products online. The various customizations that can be used are:

· Bold: Making text bold will intensify its appearance and make it more noticeable. However, over using this feature will diminish its effect. Bold text should be used only for important facts and data.

· Italics: This feature gives a forward slant to the text and also makes it curvy. It should be used carefully, as it can appear pixilated and blurred especially on low resolution monitors. However, Italics are ideal for quoting and captions as it can add depth.

· Underlining and CAPITAL LETTERS: Words that require extra attention can be underlined or made capital. These features should never be overused as they can be distracting and underlined text is often confused with links. For important text, these features serve as a good focus.

· Color: Colors are a great way to break the monotony of a monotone or neutral webpage. However, it is not always an ideal method and should be used very carefully. Using the wrong colors can make content inaccessible and hard to read.

Line spacing and kerning (intra-letter spacing)

The line, word and letter spacing is crucial to the finishing quality of text. Vertical line spacing should always be used appropriately. A well balanced distance will improve the overall legibility of the text body. Spacing between letters should be done keeping in mind the effect of different browsers and systems. What may appear balanced on your system can get completely distorted on another system. The alignment of margins greatly impact how neat a website looks. It also helps separate content and set clear boundaries.

Although fonts may not seem to be as important as the graphics of a website to newbie designers, their role cannot be undervalued. Fonts play an important role in imparting vital information about your product, services and company. Engaging fonts can help keep the attention of visitors and improve business prospects.

Not enough line-spacing

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.