The nitty-gritty of type on the Web

Author: Nola Young

Have you ever logged on to a Web site and been confused by what you see? Perhaps the type sizes are too large or too small. Headings don’t seem to line up with the text below or to the side. The text may have jagged edges, which makes it difficult to read. Chances are you are looking at a site whose designer doesn’t understand the use of fonts or the restrictions of typography on Web pages and how to overcome them. In other words, what you see is not always what you were intended to get!

When it comes to typographic applications, a variety of options are now available to designers. For example, by changing your text into a graphic file (creating a gif) designers are able to control text elements they don’t want to change on someone else’s screen. This works well for headings, where graphic files are only one or two kilobytes in size, but the process is not recommended for entire paragraphs because, until all graphics are loaded, the page looks like a bunch of empty boxes.

Another option available is the embedding of fonts. If a browser does not have a particular font it will silently download into the visitor’s browser allowing the fonts to be seen. However, you still won’t have control over basic typographic needs such as leading, tracking or kerning.

Cascading Style Sheets (CSS) are also helpful. Using CSS gives you more control over aspects of type. However, the danger is that, once the type size is locked in, the reader can’t change the size in their browser. You therefore run the risk of alienating readers with type that is too small to read. If you use relative type styles, readers can scale them to the size that is appealing to them.

Designers use a technique known as anti-aliasing to address font jaggedness. Anti- aliasing smooths jagged edges by blurring and lightening certain pixels to make the results appear even. Advances in typography related to Web design are being made every day. So when you get right down to it, be sure to employ a designer who keeps up with typographic applications and how they can apply to your site.

Quick tips:

  • If you want to use an unusual font, turn your type into a graphic file (gif) but do not overdo this since graphics take longer to load than
  • Use relative type styles when using Cascading Style Sheets (CSS) so that readers can scale them to the size that is appealing to
  • Use anti-aliasing to smooth the jagged edges that some fonts create on

 


Nola Young is the president of KW Digital Solutions. Send your comments or questions by email or call 519-741-7641.