Improving Appearance of Arial Font on the Macintosh

Note added 2004-01-01:

The problem described in this document (last updated 1999-10-27 before adding this note) is rapidly disappearing, as it applies only to Macintosh computers running old operating systems (Mac OS 9 or earlier). Most Mac users have, by now, made the switch to Mac OS X which, by default, applies anti-aliasing to all fonts, and comes with a version of Arial that displays fine at all sizes. Thus, there is no longer any need to force Mac users to view Geneva font when Arial is intended.

The Problem:

Ever since version 2.0 of Microsoft Internet Explorer and version 3.0 of Netscape Navigator, web designers have had the ability to display a variety of fonts on their pages, first by using the "FONT FACE" tag, more recently by using Style Sheets. One of the most widely specified fonts is Arial, a basic sans-serif font which is always present on Windows systems, but only sometimes on Macintosh computers, and hardly ever on UNIX systems.

The most serious problem occurs on the Macintosh, where a Mac version of Arial (from Microsoft) often is present, but is considerably less readable than the Windows version of Arial (at least in small sizes). Mac users probably have this font if they have installed any recent version of Microsoft Office, or Microsoft Internet Explorer, or if they have explicitly downloaded the font from Microsoft's web site [Note: downloadable Microsoft web fonts no longer available], or if they have upgraded their Macintosh System Software any time since Apple and Microsoft became friends in August 1997.

The above screen capture shows appearance in Macintosh browsers when a page specifies "Arial" at the two smallest web sizes (SIZE=1 and SIZE=2), in either plain-text or bold-face, when Microsoft's Mac version of Arial is installed. This text is difficult to read--especially the "bold-face" (which isn't any bolder than plain-text at these sizes--just "rattier"). Arial is not this difficult to read on Windows systems. The difference is probably that Microsoft didn't spend as much effort in "hinting" their Mac version of Arial as their Windows version.

Meanwhile, every Macintosh is supplied with two sans-serif fonts, "Geneva" and "Helvetica," which are more readable at these sizes than Microsoft's Mac version of Arial. The following screen captures show the same sort of text as the previous display; except that here, "Arial (Geneva)" means that I've tricked the Mac so it actually displays Geneva when the web page specifies Arial, while "Arial (Helvetica)" means that I've tricked it to actually display Helvetica when the web page specifies Arial.

As you can see, Geneva and Helvetica are both more readable on screen than Microsoft's Mac version of Arial (and, in addition, both actually appear bold when the page specifies bold-face). Geneva tends to be the most readable font on the Macintosh screen. Thus, readability on the Macintosh can generally be improved by displaying Geneva instead of Arial.

Note--Newer Microsoft Arial:

Since I originally wrote this web page, Microsoft has produced newer versions of their downloadable web fonts [Downloadable Microsoft web fonts no longer available] for both Windows and Macintosh, including a new version of their Arial Mac font. The major enhancement is that all these fonts now include the euro currency symbol . They are worth downloading for this reason. As for readability, the following screen capture shows appearance of Microsoft's newer Mac version of Arial:

Comparison with the previous screen captures shows that Microsoft's newer Mac version of Arial looks a little better than their old one, but readability is still poor. Thus, readability on the Macintosh platform can still be improved if the user's browser is made to display Geneva or Helvetica instead of Arial.

Solutions to Improve Readability:

Here are solutions for both Mac users and Web Developers:

1. Mac users who wish to improve the appearance in their browser of web pages that use Arial can "trick" their Mac into displaying Geneva or Helvetica when a web page specifies Arial (as I did in producing the "Arial (Geneva)" and "Arial (Helvetica)" screen captures above). This trick makes use of ResEdit, which can be a dangerous tool if not used properly; however, this is a very simple application of ResEdit, and I'll try to walk you through it in the following instructions.

2. If you are designing web pages and wish to use a font that looks like Arial, you can't expect most Mac users to have used the trick in item (1); however, you can specify the font in a smart way so Mac users see the font that looks best on the Mac (i.e., Geneva), while Windows users see Arial (and you also mustn't forget the UNIX users, who normally don't have Geneva or Arial but do have Helvetica). For details, see my advice for web authors near the end of this page.

Instructions for Mac Users:

To trick your browser into displaying Geneva or Helvetica when a web page specifies "Arial", you can make a copy of your Geneva or Helvetica font, give this copy the name "Arial", and then install this "Arial" (which is really Geneva or Helvetica in disguise) into your System, in place of Microsoft's version of Arial.

This idea is simple, but there is one complication: Renaming a font isn't as easy as renaming a file in the Finder (Sure, you can change the name of a font suitcase by renaming it in the Finder, but this doesn't change the names of the fonts inside the suitcase). Changing a font name requires a higher-powered tool. In these instructions, I will explain how to do it using ResEdit.

You may choose either the "Arial (Geneva)" option (a copy of Geneva renamed "Arial"), or the "Arial (Helvetica)" option (a copy of Helvetica renamed "Arial"). In most cases, Arial (Geneva) is the best choice because it produces the most readable text on screen. In preparing these instructions, I have illustrated the Arial (Geneva) case, although it is trivial to adapt them for renaming any font with any desired name. There may be cases where you would choose the Arial (Helvetica) option, as explained in my Recommendations on which version to install.

Perhaps you are wondering why I haven't just provided copies of the renamed fonts [Arial (Geneva) and Arial (Helvetica)] so you could download them. That would be very simple, but I'm not sure it would be legal to distribute renamed fonts of this sort. On the other hand, I see no harm in simply telling you how to make a renamed copy of a font for your own use!

These instructions suggest that before running ResEdit, you restart your Mac, holding the Shift key to disable Extensions. I wrote this because ResEdit tends to be unstable on some Macs running some versions of MacOS (The latest version of ResEdit was released in 1994 and, unfortunately, is no longer updated by Apple). But if you know that ResEdit runs stably on your Mac, you don't need to disable Extensions.

In any case, you should probably make a printed copy of these instructions so you don't have to keep your browser open while running ResEdit. Of course, if you need a copy of the ResEdit application, you'll have to keep your browser running, with an active Internet connection, until you've completed step 1. Now, here are the instructions:

[Note: I don't recommend following these instructions if you're running any recent version of Mac OS. Personally, I probably haven't run ResEdit in any version of the OS newer than an 8.x version. The screen captures displayed in these instructions were produced in January 1997, probably in a 7.x version of Mac OS.]

1. If necessary, download ResEdit from Apple's Older Software Download Site. Find the link on that page for downloading ResEdit 2.1.3.

2. Restart your Macintosh, holding the Shift key to disable Extensions.

3. Locate the "Geneva" suitcase in the Fonts folder inside your System Folder. Holding the Option key, drag this Geneva suitcase to some location on your hard disk outside the System Folder. (You need to hold the Option key so that you make a copy of the Geneva suitcase, without altering the original version inside your System Folder.)

4. Give your copy of the Geneva suitcase the new name "Arial (Geneva)":

   

   This name helps to identify this copy of your Geneva suitcase, but the fonts inside it are still named "Geneva" at this time, as you can verify by double-clicking the suitcase:

   

5. Open your "Arial (Geneva)" suitcase in ResEdit, by dragging this suitcase to the icon of the ResEdit application:

   

6. You should now see a window that looks as follows (Don't worry if your window includes one or two more icons than shown in this picture). In this window, double-click the "FOND" icon.

   

7. You now see a window listing a single item named "Geneva". Make sure this item is selected (Single-click it if necessary). Then go to the "Resource" menu and choose "Get Resource Info".

   

8. This brings up a window where you can change several attributes of the resource. All you need to change is the "Name" field. Initially, this Name is set to "Geneva":

   

   Now, change this "Name" to "Arial":

   

9. You may now close all the ResEdit windows. Click "Yes" when prompted to save your changes:

   

10. Then quit ResEdit. The fonts inside the suitcase have now been renamed. You may verify this by double-clicking the suitcase:

    

    (There is an interesting subtlety in this picture. The suitcase now includes 9-point and 12-point fonts which weren't visible in step 4 while the fonts were still named Geneva. These were actually in the suitcase the whole time, but 9-point and 12-point Geneva are considered "reserved" fonts, and the System hides them from you. After changing the name to Arial, they are no longer reserved, and the System lets you see them.)

11. Before installing your newly renamed fonts, carefully examine the Fonts folder in your System Folder to check whether you might already happen to have a font named "Arial". You may have acquired a copy of Microsoft's Arial font by installing Microsoft Internet Explorer, or Microsoft Office, or by upgrading your Mac System Software. If you find an existing copy of Arial in your Fonts folder, remove it from the System Folder.

12. You may now install your new Arial (Geneva) suitcase by dragging it into the Fonts folder, or equivalently, dragging it to the (closed) System Folder icon.

13. Restart your Macintosh (without holding the Shift key this time). You may now connect to the Internet and check the operation of your new "Arial" web font. You should find that many web sites look better, now that your browser displays Geneva when the pages specify Arial.

After installing these fonts, you must remember that in the future, if you ever install Microsoft products (Microsoft Internet Explorer or Microsoft Office), or upgrade your Mac System Software, the Installer may insert Microsoft's version of Arial font into your system. If this happens, you'll have to remove the Microsoft version of Arial from your Fonts folder, and then reinstall Arial (Geneva) if necessary. You should never have more than one type of font named "Arial" installed at one time.

Recommendations -- which version of Arial to install

If you install Arial (Geneva) on your Mac--i.e., a copy of Geneva renamed "Arial"--it will undoubtedly improve the appearance of web pages that use Arial font. However, once you install this font, it will also appear in the font menu (under the name "Arial") of every other application that uses fonts, such as word processors, graphics programs, etc. Thus, you must decide: Do you really want all of these applications using a version of "Arial" which is really a copy of Geneva.

Most Mac users probably don't care what sort of "Arial" appears in their font menus, because Arial is not a commonly used font on the Mac. However, those Mac users who regularly exchange documents with PC users, particularly documents containing formatted text, may prefer a version of Arial which is more compatible with the PC version of that font. Your choice will depend on which is more important to you: browsing the web, or exchanging documents with PC users:

• If you do lots of web browsing, but rarely exchange documents containing formatted text with PC users, Arial (Geneva) is your best choice, because it provides the best appearance of web pages that specify Arial font.

• If you do a moderate amount of web browsing, but also want good compatibility with the Arial font in PC documents, a good compromise might be Arial (Helvetica)--i.e., a copy of Helvetica renamed "Arial". It won't look as good as Arial (Geneva) on web pages. However, among the standard Mac fonts, Helvetica is really the typeface closest to Arial, and also tends to look better than Geneva on printed pages.

• If you hardly ever browse the web, but want maximal compatibility with the PC version of Arial, your best choice is Microsoft's version of Arial, instead of either the Arial (Geneva) or Arial (Helvetica) options. Microsoft's Mac version of Arial looks terrible on web pages (in small sizes), but in most other respects, looks identical to their PC version of Arial.

Advice for Web Authors

Suppose you are designing a web page and wish to use a sans-serif font that looks like Arial. Some web designers who work on Windows systems seem to be totally unaware that other kinds of computers exist, so they just specify:

Some web authors are aware that not everybody uses a Windows system, so they specify:

Some improvement can be obtained by simply reversing the order of the listed fonts, i.e.:

Mac users will see better results if you specify Geneva instead of Helvetica, i.e.:

The best choice is therefore:

As still another option, if you actually prefer the appearance of "Verdana" (another sans-serif font), you might specify:

Finally, if you specify fonts using the new Style Sheet mechanism, it's best to terminate your list with one of the "generic" font names such as serif, sans-serif, cursive, monospace, etc., just in case none of your specific font names is recognized on a user's computer. Thus, part of a style definition might consist of:

The general principle here is: When specifying fonts using either the FONT FACE tag or Style sheets, always specify a list of fonts to cover all the major platforms; and always think carefully about the order of this list to obtain optimal results on all the platforms.

• Cross-platform text-size variation - keep your designs robust
• Use of special characters (ISO 8859-1) - cross-platform considerations

This page by Bob Baumel: Home page |
Last revised 2004-01-01