Comparisons between font styles

Font styles specified by web sites

This page illustrates how an author's choice of font parameters can interact undesirably with a user's choice of browser settings.

Below there is a normal HTML table, in which some rows look different depending on browser settings. Then there are 4 screen-shots of what this table looked like in Firefox on my PC. I changed the browser settings for "proportional" text for each screen-shot. The 4 settings were:

  1. 16px "Times New Roman" (probably the "out of the box" default)
  2. 16px Arial
  3. 13px Arial
  4. 13px Verdana

It is relatively easy to change IE to 16px Arial, and such users should see the same as screen-shot "2". (As an aside, I use a laptop running Windows 2000, with a TFT screen of about 117 ppi , and a CRT monitor of about 90 ppi. That doesn't affect the validity of the screen-shots).

The HTML table

This table specifies CSS rules for the "Result" cells that correspond to the style summarised in the "Style" cells. The vertical lines in the background image for the "Results" cells are at 10-pixel intervals, with a blue-ish line every 50-pixels.

 
Style Result
Default (no style) |This is some text for comparison|
100% Times New Roman, serif |This is some text for comparison|
100% Arial, sans-serif |This is some text for comparison|
100% Verdana, sans-serif |This is some text for comparison|
16px Times New Roman, serif |This is some text for comparison|
14px Times New Roman, serif |This is some text for comparison|
16px Arial, sans-serif |This is some text for comparison|
14px Arial, sans-serif |This is some text for comparison|
13px Arial, sans-serif |This is some text for comparison|
16px Verdana, sans-serif |This is some text for comparison|
14px Verdana, sans-serif |This is some text for comparison|
13px Verdana, sans-serif |This is some text for comparison|
12px Verdana, sans-serif |This is some text for comparison|
11px Verdana, sans-serif |This is some text for comparison|

Screen-shot with browser-setting 16px Times New Roman

This is my own default, and I find such text comfortable. I suspect it is the default for most users in the world, because I believe it is the "out of the box" setting for key browsers. Note how "13px Arial" and "12px Verdana" have a similar size to the default. "80% Arial" and "0.8em Arial" are similar to "13px Arial" on my PC by default, and also look about the right size. But text on web sites specifying Arial or other sans-serif fonts, without reducing the size, looks too big to me.

Screen shot of comparison table at 16px Times New Roman

Screen-shot with browser-setting 16px Arial

This is the result of simply changing the browser's default font-family to Arial, without changing its size from "16px", which is probably the "out of the box" setting. Web sites that specify "13px Arial" show a text size significantly smaller than the default. Obviously, so would web sites specifying " 80% Arial" or "0.8em Arial".

Screen shot of comparison table at 16px Arial

Screen-shot with browser-setting 13px Arial

This is the result of setting the browser to a sans-serif font with similar size to what I believe is the typical "out of the box" setting of "16px Times New Roman". Web sites specifying "100% Arial", or "13px Arial", or perhaps "12px Verdana", look right. Web sites specifying "80% Arial" or "0.8em Arial" look too small.

Screen shot of comparison table at 13px Arial

Screen-shot with browser-setting 13px Verdana

This is really just a more extreme case of the "13px Arial" setting. A user with this setting will see most font specifications as too small.

Screen shot of comparison table at 13px Verdana