GeoCities.us GeoCities.us » SoHo » Gallery Get your FREE home page!
   
Same Face Twice
fonts you can count on, on a Mac and on a PC
BY CHARLOTTE PURVIS · ASHEVILLE, NORTH CAROLINA · SPECIMEN SHEET · E-MAIL

The problem. I set type for a living for sixteen years, first on a phototypesetter the size of a chest freezer and then on a Mac, and I'm used to the type coming out the way I set it. The Web broke my heart. You can ask for any font you like in a web page, but the browser can only use fonts that are already sitting on your visitor's computer. If they don't have it, they get their browser's default, which is almost always Times, and your elegant page turns into a ransom note.

Worse, Macs and PCs come with different fonts. So here is what I've learned from two years of setting pages for clients on my Mac and then running across the hall to check them on my husband's PC.

How the FACE list works. You can give the browser more than one choice, separated by commas. It goes down the list and uses the first one it finds:

<font face="Verdana, Arial, Helvetica">

That says: Verdana if you've got it, Arial if you don't, and Helvetica if you're an older Mac with neither. Always put the one you want first and the safety nets after.

The safe pairs. These are the old standbys. Every PC with Windows has the first of each pair, and every Mac has the second, and they're close enough that nobody but me will notice.

WindowsMacintoshPut it this way
ArialHelveticaArial, Helvetica
Times New RomanTimesTimes New Roman, Times
Courier NewCourierCourier New, Courier

Arial was drawn to fit in exactly the same space as Helvetica, letter for letter, so a line breaks in the same place on both. A type person will tell you Arial is a poor cousin. A type person is right, and it doesn't matter on a 15-inch monitor.

The new ones for the screen. Microsoft has been giving away a set of fonts made for the Web, for Windows and for the Mac both, and they come along with Internet Explorer 4 and 5. That means most of your visitors have them already, even the ones who never use Explorer:

  • Verdana: wide, open, easy to read small. My first choice for body text on screen.
  • Georgia: a serif face that holds up on a screen far better than Times does. That's what you're reading now, if you have it. Verdana and Georgia were both drawn by Matthew Carter, one of the great type designers, and made especially to look good in pixels.
  • Trebuchet MS: friendly and a little quirky. Nice for headlines.
  • Arial Black and Impact: for headlines only, and only big. Never for a paragraph.
  • Comic Sans MS: made for cartoon balloons. Kids love it. I'll say no more.
  • Andale Mono: typewriter-style, all letters the same width, handy for showing code.

Because an older Mac or a PC that's never had Explorer may be missing them, always give a safety net: Verdana, Arial, Helvetica or Georgia, Times New Roman, Times.

The ones that don't travel.

  • Mac only: Geneva, Chicago, Monaco, New York, Charcoal and Palatino. My beloved Palatino has a look-alike on many PCs called Book Antiqua, but it comes with Microsoft Office, not with Windows, so don't count on it.
  • Windows only: MS Sans Serif and the rest of the Windows system fonts.
  • Office fonts, on either kind of computer: Century Gothic, Garamond, Book Antiqua and the others that arrive with Microsoft Office. Plenty of people have Office. Plenty don't.
  • Picture fonts like Wingdings and Webdings: please don't. On a computer that doesn't have them, your little telephones and check marks turn back into the plain letters and punctuation underneath them, and your page speaks in gibberish.
  • Anything you bought. That lovely script you paid forty dollars for is on your computer. It is not on mine. If you must have it, set the words in your paint program and put them on the page as a picture, with ALT text.

Why everything's smaller on a Mac. A Mac draws its screen as if there are 72 dots to the inch. Windows pretends there are 96. So the same font at the same size comes out about a quarter smaller on a Mac. A page that looks dainty and refined in size 1 on a PC is flyspecks on my Power Mac. Never use size 1 for anything longer than a copyright line, and test on both if you possibly can.

With a style sheet. If you've started using style sheets, the same list goes in font-family, and you can end it with serif or sans-serif, which means "any one of those you've got." Name td as well as body, because Netscape 4 forgets your font as soon as it gets inside a table:

<style type="text/css">
<!--
body, td { font-family: Georgia,
  "Times New Roman", Times, serif; }
-->
</style>

Now go look at the specimen sheet and see which of these your own computer has.


028800
readers since November 1997. Yes, 28,800, like the modem. My husband says I should frame it.

Charlotte Purvis · [email protected]
Last updated September 12, 1999
© 1997-1999 Charlotte Purvis