Dealing with IE5's font and resolution settings

Mar 28, 2000
(updated May 28 2000)

This page is intended to be viewed with Internet Explorer 5 for the Mac to demonstrate the effect that its font size and screen resolution settings will have on text appearance in webpages as viewed on a Mac.

Following is a comparison between the use of pixels (the preferred choice) and point-size (not quite as meaningful on a screen) in defining font sizes on a webpage. Toggle between IE5's 96dpi and 72dpi settings, and you'll see that fonts defined in pixels will be resolution-independent whereas the apparent size of fonts defined using point sizes is directly proportional to the dpi setting (meaning they look bigger at 96dpi than at 72dpi).

This line is set to Verdana at 12 points
This line is set to Verdana at 12 pixels

This line is set to Verdana at 11 points
This line is set to Verdana at 11 pixels

This line is set to Verdana at 10 points
This line is set to Verdana at 10 pixels

This line is set to Verdana at 9 points
This line is set to Verdana at 9 pixels

In addition, the next few lines demonstrate just why IE5's setting of 96dpi as the default (as will the coming Netscape 6) is really a good thing; just think about how often we have come across webpages with fineprint (text set to a size below 9 points) that appear fine on a 96dpi Windows display but are totally unreadable at the Mac's traditional 72dpi setting. Well, now these PC-centric webpages are readable on both, thanks to IE5 (and soon, Netscape 6). Text set at sizes below 9 pixels are however illegible either way. The following pairs of lines show the commonly-used Verdana webfont set to 8pt/8px and 7pt/7px respectively (it's okay if you can't make it out; you're not supposed to):

This line is set to Verdana at 8 points
This line is set to Verdana at 8 pixels

This line is set to Verdana at 7 points
This line is set to Verdana at 7 pixels

The majority of websites today still do not fully embrace the use of stylesheets, which are an integral component of HTML 4.0, and are still coded using a haphazard mix of elements of HTML 4.0 and the absolute or relative <font> tags of the previous HTML 3.2 standard. This explains why certain webpages, or parts thereof, may appear unaffected by the resolution settings, but others are; it all depends on how the content was coded.

IE5's screen resolution settings have NO effect on absolute and relative font sizes, but its default font size settings do. These determine the size at which the browser will render the base font, namely, <font size="3">. As the majority of websites today still cling on to these <font> tags, it explains why the text in so many of them now viewed with IE5 suddenly seem so huge. Toggling between 12 and 16 pixels will demonstrate the effect of font size settings on the following lines of text:

This is font size 7/+4
This is font size 36px

This is font size 6/+3
This is font size 32px
This is font size 24px

This is font size 5/+2
This is font size 24px
This is font size 18px

This is font size 4/+1
This is font size 18px
This is font size 14px

This is font size 3
This is font size 16px
This is font size 12px

This is font size 2/-1
This is font size 13px
This is font size 10px

This is font size 1/-2
This is font size 10px

This is font size 9px

This is H1
This is 32px
This is XX-Large
This is 24px

This is 2em

This is H2
This is 24px
This is X-Large
This is 18px

This is 1.5em

This is H3
This is 18px
This is Large
This is 14px

This is 1.17em

This is H4
This is 16px
This is Medium
This is 12px

This is 1em

This is H5
This is 13px
This is Small
This is 10px

This is 0.83em

This is H6
This is 10px
This is X-Small
This is 9px

This is 0.67em

It would be helpful to also define headers (that is, <H1> to <H6>) in stylesheets in terms of pixels, rather than leave it to the defaults; PCs and Macs use different default sizes for headers, over and above the resolution disparity.

Bottom Line:
Let's assume that you will occasionally venture beyond Mac websites into the world of sites optimized for 96dpi displays. And let's also assume that many of these still rely on the traditional coding practices that are dependent on either your screen resolution or default font size setting as described above.

The most convenient option for IE5 users then is to leave the default settings as they are (ie, font size at 16 pixels and screen resolution at 96dpi) and adjust the view as necessary using the more-accessible Text Zoom feature under the View menu (although this is not in itself perfect — even form elements like text-boxes, buttons and dropdown menus get resized!). IE5 appropriately recommends a setting of 75% if you wish to view websites that have been optimized for the Mac's 72dpi resolution (72dpi being 75% of 96dpi), so that they will look "normal". To view a PC-oriented website that comes with those dreaded miniscule fonts, just zoom back to 100%.

Webmasters may want to think about preparing their stylesheets (that is, if they use them) to define font sizes in terms of pixels, so that their text layout becomes resolution-independent. This is not to say of course that we shouldn't consider that users might want to print out a webpage as well as read it off the screen. So the coding has to cater adequately to both needs. And this is where HTML 4.0 comes to the rescue, with the introduction of media descriptors.

Use of media descriptors — The common practice these days in most websites is to actually create a different page that is "printer-friendly" and then direct users to print off this "printer-friendly" page instead of the onscreen version. However, with the introduction of media descriptors in HTML 4.0, this is no longer necessary. The very same content can actually be prepared so as to render appropriately across a variety of different media, eg on screen, in printed form, in braille, on handheld devices, or even aurally, through the use of stylesheets. Hence, you no longer have to create duplicate versions of the same content for delivery across each medium. Therein lies one of the most significant advantages of stylesheets: you separate the STYLE from the SUBSTANCE. Admittedly, support for this media descriptor feature is still pretty much dependent on web browsers like IE5 or Netscape 6 living up to their claim of full compliance with the latest HTML standards (IE5 is NOT fully compliant, believe me!). This subject will be separately dealt with at a later date.

Dealing with IE5's font and resolution settings

This is H1 This is 32px This is XX-Large This is 24px

This is H2 This is 24px This is X-Large This is 18px

This is H3 This is 18px This is Large This is 14px

This is H4 This is 16px This is Medium This is 12px

This is H5 This is 13px This is Small This is 10px