With the advent of much improved browsers, text rendering and high-resolution screens, technology is no longer an excuse for poor typography. In many ways typography can be elegant and an expression of the designer’s ideas when chosen wisely.

Today I will not only present you with guidelines to consider in mastering typography for the web, but give you the useful tools, techniques and resources to help you achieve effective designs.

Feel free to suggest any other tools or resources in the comments section.

 

In Context

To set the tone of the message you wish to communicate, you must first choose your typefaces wisely.

• It allows the reader to adjust to the right setting and encapsulates the information conceptually.
• The evaluation of picking the right font should start at this level and then break down into technical bits.
• Keep the nature of content in mind during this process and see if and how the type reflects that content.
• Read the text your given to figure out the best method of integrating and conveying its full potential on the site.

This article explains choosing type wisely very well.

 

Create Hierarchy

Every site needs a well-developed hierarchy: indicators of where to start reading and how to proceed.

• Your typography can provide that hierarchy as long as you know your hierarchical order ahead of time.
• By thinking about size and typefaces, you can highlight a piece of text as a headline in a way that different placement in the design just can’t provide.

Whenever Possible, Use Sans-Serif

Sans-serif is almost always the best option to use on-screen, whereas serif fonts may become blurry or pixelated. Although it’s common to use serif’s in web typography, by using sans-serif’s for longer bodies of text you put a lot less strain on your readers eyes. Verdana is a great option for a web font as it was designed to be displayed on the computer.

Leading

As you know, leading is the amount of space between two lines. Every web page differs, but here are some general rules to keep in mind:

• Long lines of text may require extra leading.
• Bold face or sans-serif type require more leading.
• Type set at very small sizes, say 8 point or below, may require extra leading.
• Leading affects the density of your page, so if your page seems a bit dark, try adding more leading.
• Headlines may require negative leading, where type actually (or almost) overlaps.Negative leading, in other words a line-height value of less than 1, can be used on short pieces of text provided care is taken to ensure ascenders and descenders do not collide. For example:

It should be noted that some browsers add a little leading by default: Safari and Internet Explorer for example; whereas others, such as Camino and Firefox, do not.

Headings

By default, browsers will render the


text to view on your page as bold. The text will also be formatted in a large font size. And the text will reside on its own line with automatic line breaks above and below it (similar to a double-spaced heading, typed in your word processor.)

• Contrasting colors stand out more, so use them for main section headings.
• It’s not all about size. Experiment with color changes, lightness/darkness, and font styles such as italics and bold.
• The larger the heading, the more interesting the font face can be. This can be a great opportunity to use a cool custom font. For smaller headings, keep it simple.
• Search engines like Google regard the text contents of this tag to be extremely important, so it is an essential tag to use on your Web pages.

Check out this article for 20 fonts designed for big, powerful headings.

Choosing a Font

The following are resources I’ve found to help you choose your fonts wisely.

Type Tester

Type Tester is an online application that allows you to test different typefaces. You have three columns of text and can modify the typography any way you please. You then get the CSS that accompanies your selections.

CSS Type Set

CSS Type Set is a handy tool that lets you preview your CSS text as you modify it, and it generates the code for you immediately.

STC fontBROWSER

This tools enables you to preview fonts installed on your system online.

Flipping Typical

This is a nice way to explore the popular typefaces you have on your computer and see which one fits the project you are working on. This is done by creating text that is displayed using various typefaces from your computer.

Typographic Techniques

The following are resources I’ve found to help you develop efficient typographic techniques.

10 Examples of Beautiful CSS Typography and How They Did It

A lot of great websites out there have beautiful typography using only CSS. But simply looking at them gives you only half the picture. This post showcases examples of good clean typography using nothing but CSS, and it explains what the designers did to achieve this beautiful type.

 

 

Advanced Typography Techniques Using CSS

This post is a great example of what you can do by combining and tweaking type using CSS. Different techniques are introduced: reflections, drop characters, handwriting, newspaper headlines and more.

typeface.js

With typeface.js, you can embed custom fonts on your Web pages so that you don’t have to render text as images. What makes it different is that it’s JavaScript only, not JavaScript and Flash like sIFR, or JavaScript and PHP like FLIR.

Misc

You need a typeface poster

Conclusion

Typography is an art form that has been around from early on. In choosing your typefaces, carefully study and test your fonts under different scenarios. One of the most important factors in web design is readability and legibility, so be creative but also make smart decisions in regards to those two factors. The best web typography lends a meaningful purpose behind the content it illustrates while triggering emotions in your readers in the process. Feel free to leave a comment if you found other resources for improving your web typography.