The Web Wizard: Make Web Text Appear the Same on Macs and PCs

CreativePro Staff

23

Here’s a paradox for you: Most people who design for the Web use Macs, but most people surfing the Web use PCs. This fact would be mere trivia if Macs and PCs displayed Web pages in exactly the same way — but they don’t. Two key areas of difference — fonts and color representation — can compromise the appearance of your Web pages.

Graphic artists who work in Windows — a minority of the professional design community — can design Web pages with a certain amount of impunity. Simply stated, they can rest assured that the majority of the Internet audience will be viewing their Web pages on a similar platform, meaning some flavor of Windows. This is one way (and probably the only way) that Windows-wielding designers have a slight edge over their Mac counterparts. Still, if you work in Windows, remember that WWW stands for World Wide Web. And this wide world includes both PCs and Macs, as well as the occasional Unix system.

This column examines the problems surrounding font usage on the Web. Next time I’ll delve into cross-platform color issues.

An Existential Problem
Web pages are transmitted as ASCII text, in the interest of keeping downloads efficient. The appearance of the text is determined both by the HTML formatting commands that you, the designer, insert into the document and by the way end users’ browsers execute those commands.

For quite some time (since HTML 3.2), designers have been able to designate the fonts that appear on a Web page. But just because you ask for something doesn’t mean you’ll get it. In fact, if you specify a font that is not installed on the end user’s system, you invite font substitution, which can play havoc with your layout. This is true even if the reader views your Web page using the same platform you used to design the page. But it’s especially easy to fall victim to the perils of font substitution in cross-platform scenarios, because the Mac and PC come with different sets of basic system fonts.

Luckily there is an easy fix to this problem. You can specify typefaces in a way that matches up similar fonts on the two platforms. Take a look at this HTML snippet:

<font face="Arial, Helvetica, sans-serif">This is sample text.</font>

A Windows-based browser will display the text in Arial. A Mac-based browser will default to the second choice — Helvetica — because Arial is not typically found on Apple systems.

This technique is recommended for both the standard <font> tag (shown above), and for Cascading Style Sheets (CSS). You can list as many fonts as you like, but make sure you list them in your order of preference. You should also try to list fonts that have similar characteristics — especially character width and stroke weight. This will help ensure a more consistent look across Macs and PCs.

Of Points and Pixels
Cascading Style Sheets (CSS) provide Web designers with a lot of control over the appearance of text. Style sheets let you specify not just the font, but also attributes such as point size, indents, and letter and line spacing. As the cynical in the crowd might suspect, specifying these attributes doesn’t always give you great control over the appearance of your Web pages. Because of the differences between the Mac and PC operating systems, text specified at the same point size will be rendered at different screen sizes on the two platforms.

Macs are consistent. They render text at a screen resolution of 72 pixels per inch (ppi), which syncs perfectly with the print industry’s type specification system of 72 points per inch. In contrast, Windows renders type at a notional screen resolution of 96 ppi. In case you’re bad at math, the difference between 96 ppi and 72 ppi (24 pixels) makes the fonts on a Web page look 33 percent larger when viewed on a Windows machine.

Mac designers hate this phenomenon because it forces all of their type to flow differently than intended. Text blocks grow in size, and there may even be misalignment between pictures and text. Windows-based designers face a different but equally frustrating problem: Small type that is perfectly legible on a PC (typically 8 points or less) will be smaller — and often unreadable — when displayed on a Mac.

Whether you view it as a step in the right direction or an unfortunate straying from the rightful path, Microsoft muddied the Mac waters somewhat with its introduction of Internet Explorer 5 for the Macintosh. As a default, this latest Mac version of the browser also uses a resolution of 96 ppi for rendering fonts, to match the font handling under Windows. Note that IE 5 Mac users can easily revert back to the Mac’s 72-ppi resolution, however.

Bigger is Bigger
This whole kooky situation is exacerbated by the issue of screen resolution and monitor size. Basically, as the viewer’s screen resolution increases, the apparent size of the screen image (including both text and pictures) decreases. So 10-point type will look smaller on a screen that is running at 1024 by 768 pixels than on an SVGA screen at 800 by 600 (or on a VGA screen at 640 x 480).

Of course, the preceding statement is only true if all of the monitors have the same physical dimensions. The larger the monitor, the larger the screen image will appear. A 17-inch screen (set at a resolution of 800 x 600 pixels) will display 10-point type at a larger size than a 15-inch screen running at the same resolution.

Confused yet?

The confusion rests with the fact that point size is an absolute measurement system (there are 72 points in an inch), while screen image size (really pixel size) is a relative measurement, which can be described as monitor dimensions divided by screen resolution.

Making Choices
So what’s a poor Web designer to do? Here’s my advice. Since you don’t have any control over the dimensions of the end user’s monitor, ignore it. Then take the first practical step toward a solution, and choose a screen resolution. This is a somewhat arbitrary decision. If you know your target audience, you can make an educated guess about the screen resolution they will be using. Many designers try to accommodate the lowest common denominator by designing for a VGA screen running at 640 by 480 pixels, but the SVGA resolution of 800 by 600 pixels is also a safe choice.

The second step is to find a point size that works well on both Macs and PCs. This limits your choices for body copy to 9- or 10-point type. At this size, the text will be small but legible on a Mac, and large but not overbearingly large on a PC.

Another option, and arguably the best solution, is to take full advantage of the power of Cascading Style Sheets. Instead of specifying type size in points, specify it in pixels, as shown in the HTML snippet below.

<style type="text/css">
<!–
.T1 {font-family: Arial, Helvetica, sans-serif; font-size: 12px;}
.C1 {font-family: Arial, Helvetica, sans-serif; font-size: 10px;}
–>
</style>

This will guarantee that type appears at the same size on both Macs and PCs. It will also force type to use the same measurement system as the pictures on your Web page — pixels rather than points.

Go with the Flow
Even if you employ all of the techniques discussed in this article, you can’t guarantee that your readers will see your Web page as you intended. Viewers can set configuration options within their browsers that disable style sheets and ignore font specifications. And a small percentage of users will visit your site using very old browsers that don’t support advanced typographic functions. For example, Internet Explorer 3 and Netscape 3 offer only spotty support of CSS. Both of these situations deliver you right back to square one, where text appears in the default font that the end users have chosen for their browsers instead of in the font you specify.

The best advice I can give you is to design your pages with the possibility of text re-flow in mind. If you have critical relationships between text and images, position the elements using a table. Then if the text blocks grow or shrink in size, the pictures will still be positioned next to the relevant copy.

If you have built a page using layers, pay special attention to the Overflow options. If you want to guarantee that all the text is accessible to the end user, set the Overflow attribute to either Visible or Auto. The Visible option will display all of the text (and any pictures) on the layer, and if necessary will ignore the height and width settings you originally chose. Obviously, this approach can result in unexpected changes to your layout. The Auto option will insert vertical or horizontal scroll bars on the layer if necessary. Though you may find scroll bars aesthetically unappealing, this approach does a better job of preserving your layout.

Stay Tuned
Much of the battle of designing and coding pages that look good on both the Mac and PC is anticipating the problems we discussed here, so that you can take a few steps to avoid them. In the next installment of this two-part article, I’ll be explaining techniques that can help you preserve images across platforms. Specifically, we’ll delve into system palettes and gamma level settings

Read more by Luisa Simone.