Return to 'About this site'Home

THE WINDOWS/MAC FONT-SIZE PROBLEM

If you have ever compared the same site on a Windows and Macintosh computer you may have noticed that the text appears much larger on the Windows screen. The reason for this lies in the different dots-per-inch (dpi) resolution of the two systems' screens.

We are talking about relative size here, because the actual size of anything is governed by a combination of the physical size of the monitor (15 inch, 18 inch, etc.) and the resolution - the number of dots it is displaying across and down (640 by 480, 800 by 600, etc.). The resolution is usually switchable, so that at a higher resolution everything will become smaller.

Graphics of any sort are a fixed size in pixels: for example a picture may be 300 by 150 pixels, and its size on the monitor is therefore dictated only by the physical width of the screen divided by the horizontal resolution: so although the actual size of a graphic varies from monitor to monitor, the actual sizes of different graphics remain constant on any system and any resolution.

However, a problem arises with fonts, which can be particularly irritating if you are trying to lay out a page so that the fonts look right against the graphics. On a Macintosh monitor, the notional resolution is 72 dots-per -inch (dpi), so that a graphic 72 pixels wide would notionally be 1 inch wide - though obviously the actual size would depend on the individual monitor. However it will always print one inch wide.

But on a Windows monitor the resolution is (usually) 96 dpi. This means that though the picture is still 72 pixels wide, it will print at 0.75 inches.

Font size is described in 'points', a point being one-seventy-second of an inch (this standard was set long before computers were invented). The situation is slightly more complicated than it sounds, since different fonts at the same size may look to be a quite different size, depending on the design, so for the purposes of this discussion we will assume that we are always talking about one particular font.

Let us pretend that we have a 12 point font containing a character which is actually the full 12 points high (because, for example, the lower-case o is nothing like that). It will print, even in pre-computer technology, at twelve-seventy-seconds, or one-sixth, of an inch.

On a Macintosh it will be 12 pixels high on the monitor and will of course print at one-sixth of an inch high.

On a Windows monitor with 96 dpi resolution it will still need to be one-sixth of an inch high (and print as such) so it will be one-sixth of 96 pixels high, or 16 pixels.

So if we have a graphic 12 pixels high and this font character at 12 point, they will appear the same size on a Macintosh monitor, but on a Windows monitor the font character will be one-third higher than the graphic. This is the font-size problem which can bedevil complex page layouts: and indeed I found that my carefully constructed (on a Mac) home page looked wrong on Windows because of the increased font size.

It is possible to get round this on browsers which understand Cascading Style Sheets and JavaScript (which is most of them). With a style sheet is it possible to specify the font inside an HTML tag: for example:

<STYLE TYPE="text/css">P{font-size: 16pt;}</STYLE>

This style sheet (which must be placed inside the <HEAD> tags) will set all text inside <P> tags to 16 point.

Initially I was working with IE4 and 4.5 for Macintosh. For my Home Page, I originally specified (on a Mac) three different font sizes:

<STYLE TYPE="text/css">
P{font-size:12pt;}TD{font-size:12pt;}
#bg{font-size:18pt;}
#md{font-size:14pt;}
</STYLE>

TD is specified as well as P because otherwise the style doesn't make it into tables on Netscape. The two # identifiers refer to sections marked out with SPAN tags, e.g.: <SPAN ID="bg">text</SPAN>.

However, for Windows I reduced the font sizes as follows:

<STYLE TYPE="text/css">
P{font-size:10pt;}TD{font-size:10pt;}
#bg{font-size:15pt;}
#md{font-size:12pt;}
</STYLE>

Although the calculations above suggest 9pt, I found 10pt looked OK. For this and similar pages I have specified 11pt, which isn't a big difference - I didn't want to risk making it too small.

So now we need to apply the appropriate style sheet to the platform, which is done with JavaScript as follows:

<SCRIPT LANGUAGE="JavaScript"><!-- Hide from old browsers
isamac = false
if (navigator.platform.indexOf("Mac")>=0){isamac = true}
if(isamac){document.write('<STYLE TYPE="text/css">
P{font-size:12pt;}
TD{font-size:12pt;}
#bg{font-size:18pt;}
#md{font-size:14pt;}</STYLE>')}
else{document.write('<STYLE TYPE="text/css">
P{font-size:10pt;}
TD{font-size:10pt;}
#bg{font-size:15pt;}
#md{font-size:12pt;}</STYLE>')}
// Stop hiding from old browsers --></SCRIPT>

I have started each new style on a new line for this example to prevent the script wandering off the right-hand side of your window: but in practice there must be no carriage returns within each 'document.write' section or it won't work.

This should then set the fonts to the different sizes for Windows and the Mac, unless the viewer has turned off the facility for a page to specify the fonts, or disabled stylesheets, or disabled JavaScript - in which case you are simply back where you started, with the default font.

However, Microsoft have added a new factor with IE5 for Macintosh by allowing you to set a preference for font resolution of 72 dpi or 96 dpi: the latter will give you the effective font size of a Windows system (thus matching the great majority of web sites), while 72 dpi puts you where you were with earlier versions. Since, though you might be able to use Javascript to recognize IE5, you can never know which preference has been chosen by the viewer, you now don't know what font size is being shown! However, there is a simple way round this - specify 'px' - pixels -instead of 'pt' - points. It comes to the same thing at 72 dpi, and is backwards compatible with earlier browsers, but produces the same size at 96 dpi. Hence the above script comes out as:

<SCRIPT LANGUAGE="JavaScript"><!-- Hide from old browsers
isamac = false
if (navigator.platform.indexOf("Mac")>=0){isamac = true}
if(isamac){document.write('<STYLE TYPE="text/css">
P{font-size:12px;}
TD{font-size:12px;}
#bg{font-size:18px;}
#md{font-size:14px;}</STYLE>')}
else{document.write('<STYLE TYPE="text/css">
P{font-size:10pt;}
TD{font-size:10pt;}
#bg{font-size:15pt;}
#md{font-size:12pt;}</STYLE>')}
// Stop hiding from old browsers --></SCRIPT>

In fact there isn't any need to do the browser detection - a stylesheet specifying font size in pixels will produce the same results on both platforms anyway:

<STYLE TYPE="text/css">
P{font-size:12px;}
TD{font-size:12px;}
#bg{font-size:18px;}
#md{font-size:14px;}</STYLE>

There is an objection raised to all this formatting by some web experts: on most browsers once a font size has been specified, either in pixels or points, it is impossible to resize it using the font size facility (IE5 on Macintosh allows this, as does Navigator on Windows, but IE5 on Windows doesn't, and neither do IE4.5 or Navigator on Macintosh). This means that people with impaired vision are unable to increase the font size and are thus unable to read the page (and having had two cataract operations I do sympathize with this viewpoint). It is recommended by some experts that font size: large/small/x-large etc. should be used: this will allow for resizing.

However this method does not allow such tight correspondance between text and images, so I would suggest that authors use pixels or points, and that those who need to be able to resize text simply turn off the browser's ability to use fonts and sizes specified by the page. On IE5 for Windows this is done from the Tools menu, selecting Internet Options, then General, then Accessibilty (a button near the bottom) and checking the boxes for font styles and sizes. On IE4.5 and 5 for Macintosh this is done in Edit menu/Preferences: Web Content, by unchecking the 'Allow page to specify fonts' checkbox. (Don't turn off 'Use Style Sheets' or you will lose margins, as on this page, where the text will then overlap the ring-binder image on the left.)

In Navigator (both platforms) the method is Edit menu/Preferences/Appearance/Fonts, and select the 'Use my fonts' radio button. You can then increase or decrease the font size from the 'View' menu, though you may need to click somewhere in the text first to make this facility active.

Nothing is simple... and the forthcoming IE5.5 for Windows apparently has decided to ignore aspects of the W3C specifications for style sheets and other aspects of page rendering, presumably in an attempt to enforce its own standard which would then not work properly on Macs, Linux, Netscape or other platforms... Oh dear...