WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Font size


From: Terence de Giere
Date: Jun 5, 2002 9:38AM

Leo --

Your test page


produced some interesting results on my computer (Windows 2000 Pro set
for a screen resolution of 120 dots per inch with a screen size of
1280x1024 pixels)

The fonts on all three examples appear "bold" with the the bottom
example appearing slightly larger than the other two. Easy to read. (The
seemingly bold appearance of the fonts is due to the scaling of the
fonts at this resolution, when the line thickness of the font exceeds 1
pixel, it needs to go to 2 pixels which looks like a transition to a
bold font, but is not, but the low resolution of the display allows no
in-between choice of line thickness)

IE has a preferences setting under Accessibility to turn of page defined
font sizes. If this is used, the page shows all three lines the same size.

Setting the font size in IE 6 to smaller reduces all the fonts but the
top example (em size) is the smallest. The font weight of all the fonts
looks normal.

In Mozilla 1.0 Release Candidate 3 the fonts appear about one size
smaller than in IE, due to this browser automatically compensating for
the 120dpi display. The fonts appear as a normal weight. The bottom line
appears just slightly larger than the top two. If I set the font size to
'larger', the bottom line looks "bold" and the other two normal. When
the text is set to smaller, all the lines reduce in size, but the top
two remain the same relative size, a different result than in Internet
Explorer. Mozilla also allows setting a minimum font size, below which
it will not reduce font size. This works well. If the user wants a 24pt
minimum size, no font will display smaller than this.

In Opera 6.03, the top and middle lines appear about the same size, but
the top line looks "bold" while the middle line looks normal, and the
bottom line is larger, and looks "bold". Opera does not have a quick
font size change option, but can enlarge or reduce the entire screen.
Going into the preferences, one can reduce the font size for basic
display, and in appearance the result resembles Mozilla. Opera also has
a preferences setting for preventing fonts from being displayed smaller
than a certain size. Opera also has settings that allow the user to
define how much of a size difference will be used to display heading
levels, when this is not defined by

In Netscape 4.08, a browser several years old, all the lines look "bold"
with the bottom slightly larger, but as the browser font size is
reduced, all the lines appear normal, and about the same size, and that
relative sameness of size remains for several reductions in font size.

I disagree that the WAI recommendations need to be revised, but a
discussion of how to handle font scaling might be appropriate in a
future version of the WAI guidelines for user agents. It is pretty clear
that the various browsers do not interpret font sizes the same way and
do not scale fonts the same way, and this inconsistency must drive
visual designers nuts, if they are interested in fixed stable designs,
since such designs simply will not hold up if the user has made these
adjustments or is using a different browser. It is a fact that Web pages
are rendered and may appear differently on different browsers, and that
the many attempts to overcome this "problem" often have the consequence
of inaccessible pages.

It appears to me that with Windows at 120dpi, it is a bit easier to read
the fonts on most of the browsers, although Mozilla displays the fonts
as if the machine were set to 96dpi. From a usability point of view, Web
sites that set fonts to less than the "medium" font size, about the
equivalent of the HTML FONT element SIZE="3" tend to be too small too
read for many users to read eaility. Elderly users may need one size
larger than this, about two steps up from the font sizes on mainstream
Web sites. Macintosh users have a special problem because of the 72dpi
display, which renders fonts with fewer pixels than Windows, and smaller
sizes are too granular to be readable.

It is unfortunate that the browser makers have not dealt with this
consistently. Mozilla (and its derivatives like Netscape 6) seem to have
handled the problem well. A few years ago setting the font size one size
larger on a Mac, and one size smaller on a PC with Windows at 120dpi
gave approximately the same effect as a Windows machine at 96dpi, but
users generally don't know this. As I said, I have seen few users
deliberately set fonts smaller. I have seen a few more examples of them
setting them larger, or setting Windows to 120dpi, but I have no
scientifically gathered statistics on this. I am using a 17 inch
monitor, and usually set things so the scaling of fonts and applications
is less than life size for a WYSIWYG environment. Most users I have
personally observed tend to do the opposite, they use a 'resolution'
setting of say 800x600 pixels on a monitor of this size, and the page
appears bigger than life size for WYSIWYG graphical environment, and so
all the fonts are physically bigger even though they may display with
the same number of pixels per inch per the operating system settings.
There are so many variables, it is really difficult to say just how big
the fonts are going to be onscreen.

Thanks for that test page Leo.

Terence de Giere

Leo Smith wrote:

>>Leo --
>>'IE/PC appears to install with its font size setting to "smaller" or
>>"smallest" in some cases. If you use an em value less than about
>>0.95em, your copy will be unreadable by folks who have IE set to
>>"smaller" by default.'
>>'A setting of "medium" by default is the norm, but a noticeable
>>number of folks do seem to have installs that set themselves to
>>smaller or smallest by default, and from my experiences the
>>majority of users out there do _not_ know either that they can
>>change their browser's font size setting or how they can change it.'
>>I just installed Window 2000 Professional on my machine, and font
>>sizes were medium for IE.
>Yes, that is the norm in the vast majority of cases. I have yet to
>see IE install with "smaller" as the default text size. However, it
>appears that there are cases where it does. Other Web developers
>have voiced such experiences. We also had an individual in our
>Computing Technologies department running Windows XP have IE6
>install with "smaller." He was not aware of it until he tried to view
>the pages that I had created. We also had about five emails the
>first week our site went live from folks complaining they couldn't
>read anything as it was too small. These were the five that
>bothered to email. I imagine a host of others went away from our
>site in disgust.
>It is possible to accidently change the font size setting in IE by
>simultaneously holding down the Ctrl key while moving a mouse
>scroll wheel. This is more of a fluke occurance, and I presently lean
>towards the default install as being the main cause of the "smaller"
>setting, unless of course someone has changed their setting
>I then set Windows screen display to "Large
>>Fonts" (120 dots per inch) and this breaks up most Web pages set and
>>designed to absolute sizes. Setting IE to "smaller" fonts more or less
>>restores the appearance of the page as it typically appears at the
>>more common setting of 96 dots per inch. I don't recall a choice
>>during the system install that gave me a choice like this, but I did
>>not really pay that much attention. I have never gotten anything other
>>than 96dpi (small fonts) when installing Windows operating systems and
>>a 'medium' setting in Internet Explorer as a result of an OS install.
>>The differing display resolution (72dpi on the Mac, 96dpi abd 120dpi
>>on Windows) affects most browsers especially with relative sized
>>fonts. The newest IE version for the Mac and Netscape 6 for the PC
>>have a more or less automated feature to control this and allow more
>>consistent display, but IE and Opera for the PC do not, and there are
>>other less well known browsers that do not have a setting.
>I devised a sniffer script for delivering a custom stylesheet to those
>Mac browsers that are by default displaying at 72ppi. That is, NS4x
>and IE4x. It is a case of taking em font size values that are
>assigned to 96ppi browsers and multiplying by a factor of 1.333.
>This will result in roughly the same initial font size display in the
>72ppi browsers if the user has not changed the browser's default
>font size setting - usually always 12pt. They then, of course, have
>the option of changing the size to whatever they want. Having such
>a sniffer system, whilst not ideal, does prevent users of these 72ppi
>browsers seeing the type significantly smaller than those using a
>96ppi one, if they are the type of user that does not adjust default
>browser text size settings: I believe these types of user are by far
>in the majority.
>Scripting is one way to deliver such custom CSS - you could use
>@import and others. If scripting is turned off, then since my pages
>were designed to display perfectly well without CSS, it was of no
>serious consequence other than a purely presentational one. That
>is, no font size is specified via coding which is the better way to go
>if you can do it on your pages.
>>Personally I have noticed users setting font size larger rather than
>>smaller, and most sites seem to use font sizing that displays fonts
>>smaller than quite a few people can read anyway, usually corresponding
>>to HTML absolute sizes 1 or 2 using the FONT element.
>>When a design uses relative font sizes, the other aspects of the page
>>need to be able to stretch and shrink and still maintain a
>>satisfactory appearance when text reflows, or gets larger or smaller.
>>I was just looking at http://www.cnn.com/. I found it difficult to
>>change font sizes on this site. It uses pixels for CSS font sizing,
>>and also has some Javascript for controlling font sizing in Netscape.
>>They are obviously trying to maintain a fixed consistent size.
>>Do you have some examples of feedback from the users from the site you
>>made with relative sizes.?
>Well, their feedback was "your font sizes are so small they are
>unreadable." This was not due to any Mac/PC resolution
>differences as the sniffer I employed worked fine. I did try to elicit
>more information from them, but to no avail. I feel sure they were
>running IE on a PC that installed inself with font size setting to
>"smaller," or that they had accidently changed the setting without
>knowing it by way of the fluke that I describe above. They were not
>user agent savy, and did not know they could simply change that
>setting back to "medium" and all would be OK.
>This really only seems to be an issue with em sizes, as the
>gradiations of change are so large between "smallest," "smaller,"
>"medium," etc. The deprecated font tag and its size attribute do not
>have such severe size increments, and neither is seems do
>percentage based CSS font size values.
>To demonstrate, I have put together a test page. Load the page into
>IE on a PC, and adjust your browser's font size setting to "smaller."
>View source to see the complete code, including CSS.
>hope this is useful.
>I believe this is another case where the WAI's guidlelines need to
>be adjusted.
>Leo Smith
>Web Designer/Developer
>USM Office of Publications and Marketing
>University of Southern Maine

To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/