Text and typography have their roots in the printed page. Nowadays more information is read from screens than printed material. The web may be a multimedia playground, but without well-designed typographical components, even these sites would be useless to their visitors.

The screen generation is consuming vast quantities of data that surprisingly isn't masses of video or audio content, but good old text. Reading is still the most essential skill if you are to get the best from the web but, unfortunately, it’s a sad fact that type is often the poor cousin of video or Flash animation, when it should be one of the first things you think about before firing up Dreamweaver. Volumes have been written about how to create attractive, well-designed pieces of printed matter with correct typeface, kerning and leading.

When these rules were applied to the creation of webpages, they were found to be lacking. The skills you need to design a well-crafted webpage, which contains text controlled by a CSS script, bear little resemblance to the traditional skills of a typesetter. Starting a website isn't easy. Information about web typography is abundant online, but two sites worth pointing your browser toward are the Web Style Guide (link) and Website Tips (link). Both sites offer good, solid introductions on online typography.

FONTS ARE FANTASTIC

Specifying the fonts to be used on the site you're designing seems like child’s play. After all, if you look at the number of typefaces that are available to Dreamweaver, and the system fonts that Mac and Windows PCs have, you could be forgiven for thinking that all you need to do is choose a font that complements your design, specify its size and composition and then forget it. The reality is that nothing could be further from the truth. As we will look into later, it’s imperative to take on board a number of crucial warnings that have a massive impact on how your text will appear immediately when it pops into a visitor’s browser.

The typeface has a long and illustrious history that stretches back to the first type foundries, dating back to the mid-15th century. The digital versions of these typefaces are simply a series of mathematical instructions that draw the typeface on the computer screen. These bitmapped and vector fonts are the basis of your digital type foundry. Some fonts also contain hinting algorithms that improve the bitmap component of the font to ensure it is still readable at smaller sizes. Operating systems such as Windows also help with the appearance of type that they display. Try switching on and off Windows’ ClearType utility to see this in action.

Unlike typefaces in the print world that have just one format, in the digital realm things are not that simple. You have a choice of two basic formats for the fonts you choose: TrueType and PostScript Type 1. Generally, you will find just about every font available in these formats, with Windows users also able to use TrueType ESQ (Enhanced Screen Quality) for some typeface families that have this extra hinting to improve their on-screen appearance.

You'll already be familiar with TrueType fonts (these were originally developed by Apple), as the system fonts that are built into all Windows and Mac OS PCs are TrueType fonts. These fonts offer a compact format that contains both the screen bitmapped component and the vector printer component, as well as any hinting that the typeface designer has loaded into the font to improve its overall appearance.

From a web designer’s perspective, the TrueType format is advantageous, as the website you will be designing will most likely be displayed on a Windows PC. As Windows ships with an abundant number of fonts, you can choose a typeface for your website’s design, while being pretty sure that it is on the site visitor’s computer. This is not guaranteed, but it’s likely. Just as choosing a browser-safe colour scheme enables you to hedge your bets as far as how colours will display in the browser, you can choose fonts that only appear in the default typeface sets that each OS or browser ships with. You can see the Mac OS X default set here. The Windows default set here and the Internet Explorer core font set here.

Mac users will know PostScript Type 1 fonts, more commonly known as Type 1 fonts, as they formed the basis of the DTP revolution that took place on that platform in the mid-Eighties. As we have already seen, every Mac user also has a contingent of TrueType fonts, but working with Type 1 fonts is just as easy, though you'll need some additional software. Type 1 fonts have two components just as TrueType fonts do, in order to handle the screen and output duties. Scaling of fonts is where things differ a little. If you want to scale a Type 1 font on-screen, you must have Adobe Type Manager installed. The exception is if you’re running Windows 2000, which can automatically scale Type 1 fonts without any additional software. Type 1 fonts, because of their PostScript heritage, are loved all round by print-based designers and can be used effectively for website design, but the scaling issue can cause problems. To play it safe, always check that the typeface you want to specify has a TrueType version, as these are quite a bit easier to handle when designing for the web.

Finally, Adobe and Microsoft have also got into bed together to develop the OpenType format. This is a cross-platform typeface format that fuses the PostScript Type 1 and TrueType fonts together. The practical upshot of the format is that as a designer, you can specify a font family for your website design and be confident that the font will display as you intended when the webpage is browsed.

ACCESSIBLE TYPE

So, you've decided on the fonts that would really make your webpage design fly, but you now have to look closely at the accessibility issues that will impact on your choice of font. The first consideration is the actual font itself. If you have one of the large type library catalogues that are available – a good example is the FontFont book – you may feel overwhelmed by the number of fonts available to you. Remember, though, that most of these are for print design and not generally for web design. The type libraries have converted many of their typefaces to TrueType and OpenType, but not all. So check beforehand that your chosen fonts are actually available for webpage creation.

The next hurdle that you must clear is monitor resolution. The problem is you have no idea what resolution your site’s visitors will have their monitors set at. Even a splash page giving details of the optimum resolution that your site should be viewed at is often ignored. Try viewing one of your completed webpages at 800 x 600 pixels and then at 1,024 x 768 and you’ll see how different your page can look. There is also the fact that browsers display pages slightly differently, so you will soon realise that the font you choose can be a crucial decision that could make or break the overall design.

Delicately serifed fonts aren’t going to cut it on even a basic webpage. Clean, simple fonts work much better, which is why the vast majority of the websites online today use typefaces like Arial, Helvetica or Verdana, as they are sansserif fonts that render cleanly on monitors in a wide range of resolutions. If you do want to use a serifed font, test typefaces like Jante Antiqua or Lucida Bright before making your final choice. Fonts for menus and table headings can be very small, which is why special fonts have had to be developed that display well at very small point sizes. A good set of what are called pixel fonts to be used specifically for this purpose can be browsed from the excellent resource site Dafont.com.

Accessibility issues are also high on today’s design agenda. Your site should be designed so that as many visitors as possible can access it, as this is now a legal requirement. There are some simple rules to follow that are summarised on the Webcredible page. Visitors with disabilities must also be taken into consideration when choosing your fonts. Trenton Moss, director at Webcredible, outlines the issue: "Serif fonts can be difficult to impossible for people with reading difficulties (eg, dyslexia) to comprehend. The same is true of words made up in all capitals. Text embedded within images isn’t good either as that text can’t be resized or reformatted (sIFR should be used to display unusual fonts; see mikeindustries.com/sifr for more information). Some dyslexic people actually prefer Comic Sans, as that’s the easiest one for them to read. Dark blue on cream or on light blue are generally good colour combinations for dyslexic people, and yellow on black is best for people with severe visual impairments."

It is also becoming good practice to offer site visitors the ability to change the font size of the page they are viewing if they have sight problems. Offering this option on your own site is relatively easy to implement in your design, but be sure to check how the rest of your webpages render with this technique before using it wholesale across your website.

The easy access to thousands of fonts can make it very tempting to over-specify the fonts on your website design. However, in this case, the old adage ‘less is more’ is true with respect to typeface allocation, so choose a font for your main body text and one for larger headings. Your aesthetic may warrant more, but test these on your webpages before making a final decision. The font you choose must also be formatted correctly. Text justified to the left is always the default and is a good guideline to follow. Don’t forget that kerning can take place with text for the printed page but not on a webpage, as only whole words can be kerned and not individual letters. Right-justified text can result in widows and orphans, as the browser can’t make the adjustments to fix these problems. One great site that we advise you to bookmark immediately is Typetester. Very usefully, it enables you to instantly see how your site’s text will look with a wide variety of formatting styles applied to it.

CONTROLLING FONTS

How you specify the type on your webpages will mean simple HTML, or more likely CSS. As the vast majority of the content you’ll be designing will be textual, it makes sense to take as much control as you can by separating the raw text from its formatting. Using CSS, you have a high degree of control over how the text will appear in the browser window. For an in-depth introduction to CSS and typography that’s suitable for both beginners and the experienced (you can never finish learning!), visit the Digital Lab magazine website and the excellent CSS tutorial from Debbie T Designs.

Type, of course, isn’t just used in headings and body copy. With a Flash-dominated web still at large, you must pay close attention to the fonts you specify to use in any Flash movies you include within your site design. You not only have to choose the right fonts to use, but also ensure they render properly when the movie is played. You’ll be pleased to hear that there is good news in that Adobe has done this work for you. Its FontFlasher utility can take any TrueType font and convert it for use with Flash movies. You need to carry out this step as many TrueType fonts lose their clarity and definition when reduced in size for use in Flash movie files. You can read more about typography and Flash on the ActionScript.org website.

The importance of getting the typographic components of your website’s design right can’t be stressed enough. It can be the key to a visitor staying long enough to take in your site fully instead of closing the browser window and moving on. It is important to remember that text is still king online, so you would be well-advised to place it at the centre of your design process. Online typography is much more constrained than in the printed world, but luckily there are tools that have evolved to enable you to realise your ideal layout and design, without the web designer’s nightmare of sacrificing too much of the aesthetics of your site. If you are passionate about the type you use, this will shine through in every design you produce.