Different meanings of font size

The test

The font-family for the first box is Verdana, Arial, Helvetica, Helv, sans-serif;, the second is "Times New Roman", "Times Roman", Times, serif;.

x[pÉÊç Squirrel Image

Some other variants of this test are available.

How the browsers fare

Here are some views of this page in various browsers. In my opinion, it is most important that all the results for a given browser (with the possible exception of "size of image" be the same. That is, I think consistently using the operating system font size is better than mixing the CSS font size and the operating system font size.

Browser (link to image)	Platform	Size of Font	Size of Text Background	Size of Image^*	line-height
Reference rendering	see Mozilla bug 13072	C	C	C	C
Mozilla, 99-05-05	Windows 95	O	O	C	O
Opera 3.60	Windows 95	O	C	C	C
MSIE5, with image	Windows 95	O	O	C	O
MSIE5, without image	Windows 95	O	O	N/A	C
MSIE 4.5	Macintosh	O	O	C	O
MSIE 4.01	Macintosh	O	O	C	B
Navigator 4.05	Digital Unix	O	M	B	B
Navigator 4.50	Linux	O	M (103px)	B	B
Navigator 4.50	Windows 95	O	O	B	B
Navigator 4.05 and 4.51	Macintosh	O	O	B	B
MSIE 3.01	Macintosh	O	B	B	B

* - This wouldn't change even if font-size were redefined the operating system way.

Key
C	CSS meaning of font-size
O	Operating system's or font's meaning of font-size †
M	Mixed, i.e., somewhere between C and O
B	Buggy in other ways

† For properties other than font size, O means that the OS definition has been carried over to this property. If the OS definition of font-size is used (which is bad), it is probably better to carry over that definition to everything else based on the font size. That is, if font is O, then it is probably better if line-height, image size, and size of text background are also O, rather than C.

What's going on here?

Font Size: CSS defines the font size to be the size of the font when set solid. This means that the height of the font is the distance from the highest point in the highest glyph to the lowest point in the lowest glyph. Windows and other operating systems seem to use the height based on an em square that does not include the whole font size. This results in fonts that are larger than they would be were the CSS definition used. Ohen the CSS definition is used, the separation of the highest points on the glyphs and the lowest points on the glyphs should be exactly 100px.
Text Background: Although this is not very clear from the current spec, backgrounds on inline elements are drawn around the font-size (and cover any padding as well, which is added onto the font-size). This means that, since the fonts above are set to be 100px tall, the background of the inline elements should also be 100 pixels tall. (If the font is bigger, however, it is reasonable that the background be bigger as well.)
Image Size: An em unit is defined in CSS2 as the font-size of the relevant font. This means that 1em within a font with font-size 100px should equal 100px. Thus, according to CSS, the size of the image should be 100px. However, if the real font size used is larger, the image should probably be larger as well.
Line Height: Number values for the line-height property are defined in CSS2 as setting the line-height to the number times the font-size (so that the number is inherited, rather than the computed value). The end result of the rules for inline boxes is that a line height of 1, with no larger text, larger images, or unusual vertical alignment means that the baselines of the text should be separated by exactly the computed value of the line-height. This means that the highest points on the glyphs should exactly touch (and not overlap) the lowest points in the glyphs on the previous line (assuming I have chosen characters that reach the highest and lowest points in the font). Similarly, the images on adjacent lines should exactly touch each other. They should not be separated, nor should they overlap.

These inconsistencies even within the various operating system font mechanisms are a serious obstacle to quality typesetting using CSS. The careful work that has gone into developing the font-size-adjust property will not have any benefits if font sizing is not treated consistently. There must be a cross-platform consensus on the meaning of font-size that is consistent with all of the things that depend on font sizes. Again, if the real font size is larger, the line-height probably should be too, even though the spec doesn't explicitly say that the actual value of numbers on line-height should be based on the actual (rather than computed) value of the font size.)

Thanks to Roland Ericsson and Ian Hickson for comments and to Liam Quinn for Linux screenshots and Steve Mulder for Mac screenshots. However, the views expressed here are mine alone.

(Back to Font Information, CSS Information, David Baron)

LDB, dbaron@dbaron.org, 1999-05-01, 1999-11-26