In recent years people have started to experiment with numerous systems of embedding web fonts into their pages. This is great for times when designers really want to have total control over their typesetting. This method has a few drawbacks, however. Most notably people using certain types of browsers won’t be able to load embedded typefaces at all.

To make matters worse mobile users will probably gawk at the way that pages load if they’re designed this way. Fortunately there’s another way to design sites with web fonts that won’t require you to use any special tricks. Basic type design became something of a forgotten art, but it’s come back into vogue again as a way to fight software bloat. Then again, it also helps to understand the ins and outs of modern embedded typefaces as well.

The Science Behind Web Fonts

First, though, it helps to know more about typesetting in general. web fonts come in a few different flavors. Most people have at least seen the terms serif and sans serif when using their desktop. Serifs refer to small marks at the edges of letterforms that help to guide the eye across a printed page.

Designers are always taught that these tiny flags help to speed up the reading process, but this is highly debated. Serifs evolved out of inscriptions, and they do help those who are reading print text. However, at the resolutions that most web fonts are displayed at they often become fuzzy.

Sans serif web fonts have traditionally been considered superior, due to the fact that they lack such markings. The great irony of all this is that the quintessential serif typeface Times New Roman is selected by default on countless PC and Apple Macintosh browsers. Equivalents are popular among Linux users, but they’re often not the best choices either.

Microsoft’s Core Web Fonts

While some people are interested in the psychology behind the perception of typefaces, it’s probably far more useful to look at practical examples that are useful for Internet designing. In traditional non-embedded Internet design, HTML authors specify a typeface and the browser then attempts to load it. If the client computer lacks the installed typeface it finds a replacement.

Back in the day people had very few font files installed. As a result Microsoft tried to distribute what they called their Core fonts for the Web project in 1996. These were a group of fonts that were freely distributable in the hopes that everyone would be able to have the same fonts and thus keep designers from having to worry about whether a user would have a particular one installed.

Unfortunately, Microsoft had to stop distributing the web fonts the way that they were because of copyright problems. Nevertheless, these and a few other typefaces are still relatively safe for the Web according to survey data. As a result, designers should figure out how each one can be used.

Pretty much all designers are familiar with Arial and Arial Black. They look relatively modern when used right, but are over all overused. Times New Roman, for that matter, might be the most overused typeface of all time. Courier and Courier New might enjoy the widest base of installation, though they are generally reserved for xhtml.

Web Fonts With Special Properties

Now, there is nothing wrong with specifying any of these, but a few of the most common web fonts have some special features. Serif typefaces are elegant, but sans serif ones are more readable on screen. Three of the core fonts, though, have elements of both.

Georgia is a serif typeface designed from the ground up to be readable on screen, so it skirts the problems associated with serifs on screen. It’s larger at the same point size than Times and the x-height is largely. The serifs are blunt and legible. As a result, there’s no real excuse to avoid specifying it.

Those working with archaic versions of HTML might find things as easy as directly defining a web font. This could be as simple as:

<font face="georgia" color="blue">I'm looking spiffy in a brand new suit, tie and typeface!</font>

Fewer and fewer designers are using this method, though. For that matter, it was deprecated in HTML 4.01 and support ended by the time HTML 5 rolled around. CSS font stacks work much better.

Stacks of web fonts give you the opportunity to force the browser to select the next font in a list if the one you specified is not available. This makes it a little less unnerving to specify typefaces that you aren’t sure if the client accessing the site has access to.

Specifying Stacks

For instance, you might fear that your readership lacks access to Georgia. You could specify:

font-family: Georgia, "Times New Roman", Times, serif;

That being said, you probably have little to fear in regards to Georgia. Even increasing numbers of mobile devices feature the typeface. However, you shouldn’t shy away from rarer typefaces. Rather than embedding them into the web page and paying for the process, you can just specify a rare but attractive typeface in the front of the stack.

If the user’s computer doesn’t have it, the CSS interpreter automatically selects the next best thing. If you produce a sufficiently long stack you should be able to find something palatable eventually, and you can have more control over how the text will appear to your viewers. Palatino and Book Antiqua are particularly nice, even though they weren’t designed with screens in mind.

Fewer users have access to these, so it makes sense to specify another typeface. Georgia is a great follow-up, and you can specify Times if you feel the need to. Nevertheless, if you use the serif tag you might not even need to worry about this since it’s already specified as the default serif on so many systems. Remember to put quotation marks around typefaces that have spaces in their names or strange errors might occur.

font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", Times, serif;

Finding Replacement Web Fonts

Helvetica is an extremely popular typeface that some might say is overused. Nevertheless, professional type designers have developed a certain taste for it. It’s widely installed on Macintosh computers, as well as Apple handheld devices. Few PCs have it, though, and lots of designers use Arial as a stand-in.

There are a few tricks to help those who really want the look of Helvetica to appear across a wide range of machines however. MS Sans Serif is a bitmapped font that shows up on many Windows machines. As a bitmapped font, it’s letterforms look relatively ugly. On the other hand, it maintains many of the characteristics of Helvetica, as it’s more or less a version of it.

Microsoft Sans Serif is a modern variation that is vectorized and metric-compatible with MS Sans Serif, but slightly deviates from Helvetica. Still, it’s installed on even some Apple devices so it’s a good choice. In old versions of Windows MS Sans Serif was called Helv. This name can still be used often because of a registry feature.

If the typeface name Helv is specified, a browser on a PC will select whatever font the operating system specified to serve as Helv. It’s a worth a shot to put this in a font stack, since regardless of what typeface is used it will be something that’s close enough to Helvetica to avoid reflowing the text too much and throwing the design off. You might want to try something like:

font-family: Helvetica, "Microsoft Sans Serif", "MS Sans Serif", Helv, Arial, sans-serif;

OS/2 and eComStation machines also use the name Helv. This font naming trick can work a few other ways as well. Windows systems specify a few other names for what are termed logical fonts. These fonts don’t exist but exist in name only. The operating system just choices whatever defaults the user has specified on their end. If a designer really wanted something to match the shell system font a user had on their Windows PC, they could try specifying MS Shell Dlg as a typeface name. There are even other ways that you could mess with this system, but too much experimentation might have unpredictable results.

Additional Special Web Fonts

Georgia isn’t the only typeface worth getting excited about, though. Verdana is so commonplace that few people stop to really appreciate it any more. Nevertheless, there’s a lot to like about it. The same gentleman who made Georgia designed it, and it was also designed to be legible when read from a computer screen.

Verdana is what’s sometimes called a humanist sans serif font. It has features, like differing letterform widths, that are similar to those found in serif typefaces. That makes it easy to read without sacrificing the simple elegance of typefaces that were designed for setting text in print.

While some people feel that Verdana doesn’t work too well in print, it certainly is great when used with computer interfaces. It’s installed on a wide variety of devices. Some machines, especially Windows desktops and laptops, have an additional condensed version called Tahoma. As this typeface doesn’t enjoy quite as large an installed base designers might want to specify a few other replacements in a stack of web fonts with it. Verdana is a natural choice:

font-family: Tahoma, Verdana, "Trebuchet MS", Arial, sans-serif;

Users who are wide-awake probably noticed the inclusion of the web font Trebuchet MS in that listing. That’s another one of those typefaces that Microsoft had specially designed for screen reading, and it’s another humanist sans serif font. As a result, it’s great for a wide variety of things and it looks a little less formal than something like Verdana might. Of course, designers should feel free to specify it as well to begin with anyway.

Metrics and Web Fonts

If you’re serious about designing with web fonts then you’ll want to pay attention to metrics. Metrics are essentially the sizes of individual letterforms. Some typefaces are metrically compatible with others. This means that a sheet of text typeset at the same point value in either typeface will occupy the same amount of space on a page.

If typefaces are not metrically compatible then the two different pages will have different lengths. You’ve probably seen this when changing the font in a word processing document. It can have a serious influence on the way a user sees a web page. Say that you design a page and place images, videos or whatever other content within it. If the page has to reflow on a different user’s computer because it lacks the specified font then it might end up repositioning these images and videos. That can become a problem since it can throw off a layout.

Now a lot of designers will go through and specify layout commands to ensure that everything stays stuck to a nice grid, but this is really not necessary if you’re designing something relatively simple. There’s an easy way to check out how a page will look in different web fonts in any case. Just modify the stack and refresh the page, changing the typeface up front each time.

If you really want to, you can also go into the options of the browser that you’re using to test the page. Go into the fonts option and set the typefaces you want to view the pages in. Then deselect the option that permits sites to select their own web fonts. While this process differs slightly between different browsers it shouldn’t be too difficult to figure out how to set this up.

The Liberation fonts, which are released under an open font license, are a unique case and you might want to try specifying them. They are free metrically compatible substitutes for commonly used commercial typefaces. As a result, they’re often issued with Linux distributions. Liberation Serif is metrically compatible with Times New Roman and Liberation Sans is compatible with Arial.

Text Replacement Techniques

There are a few ways to ensure that the majority of users will see text exactly how you intended it to look, regardless of how their machines are set up. In some cases, it might be appropriate to use an image instead of text. Of course, text can be set into an image file. That’s how posters and info graphics are made.

Some designers will place these right on their sites to ensure users get what they intended. Likewise some people might end up using a video or something similar. JavaScript, Flash and VML embedded rendering engines are another choice as well when users just have to see something in certain web fonts. Technically what most people refer to as VML technology these days is really SVG. Proper VML xhtml was depreciated in some older browsers. Fortunately, there’s a tool available to help you migrate over.

Designing With Words

The best choice is to actually design with text, however, which makes all of this entirely unnecessary. Use basic settings to ensure that text is nice and readable. If you do this, you’ll be able to avoid having to worry too much about font replacement.

In this regard, you might want to remember that CSS sizes aren’t exactly equivalent to the point sizes you’re probably used to from the desktop publishing world. While you might want to just try a value of 10 or 12 you should probably hold off. CSS uses pixel sizes to define typefaces. xhtml like:

font-size:20px;

will actually get you something closer to what you’re used to. Also, keep in mind that simple color schemes are often the best. Don’t be afraid to buck the system and go with a less used typeface, but when you’re doing that don’t apply the same choices to colors. Think about paper. Black, green, red and blue ink are already readable against a white background.

Some Further Reading:

• Sample CSS Font Stacks
• Web Safe CSS Font Stacks
• Serif Versus Sans Serif Typefaces
• The Rules of Typography
• Font Installation Study
• SVG Font xhtml Specifications
• Microsoft’s VML to SVG Migration Guide