Specifying small type sizes

by Joe Gillespie — Mar 1, 2003

There is a raging debate in Web design circles about the relative merits of specifying font sizes in pixels or ems.

Using pixels locks the size of type in sync with physical pixels on the device displaying it where using ems sets the type sizes relative to those set up in the reader's browser preferences.

As long as the pixels are about the same size from one display device to another, using pixels gives fairly predictable results. Problems occur when the pixel size varies significantly from the norm – or the reader's monitor or eyesight is not as good as the designer's.

Even at 9px, Arial looses its kerning and becomes hard to read. It is, after all, a printer font and not optimised for screen use.

Times was designed for small print in newspapers but, as you can see, is a total disaster at small sizes on the screen.

If you have a 17" monitor running at 1280 x 1024 and the width of the screen is 13 inches, then the size of the individual pixels can be calculated by dividing the 13 inches by 1280, but it's probably easier to consider the 'pixel density' – which is 1280 divided by 13 – approximately 98 pixels per inch. If the monitor is running at 1024 x 768, then the pixel density is 1024/13 – approximately 79 pixels per inch. The difference in perceived size from one monitor resolution to the other means that 10px type looks like 8px type at the higher resolution.

Some recent browsers can resize type sizes specified in pixels – Mozilla/Netscape 7, Opera and Safari all do a reasonable job, but some can't and leave little option but to change the monitor resolution if the type is too small. Poor old Explorer 6.x refuses to resize type specified in pixels – so that means 'most'!

Specifying type in ems is safer where the audience is using a large variety of monitor sizes and less capable browsers. Think of 1 em as being 100% of the user's preferred type size, 0.8 em as 80% and 1.3 em as 130%.

Now, that's all fine but there's another factor that many designers forget about. As a designer of small fonts, I'm aware that there is a minimum size at which type can be formed from pixels and below which it becomes a meaningless blob. This critical 'threshold' size is based upon the need for five pixels in height to properly form a lower case 'a' or 'e' and if you add-in 'h' and 'g', you need at least two pixels for the ascender and two pixels for the descender. So a font size of nine pixels is the minimum you can get away with for an upper and lower case font - with a good screen font.

If a designer specifies a small font size as, say, .6 em and that resolves to less than 9 pixels in a reader's browser, then the type will be totally unreadable – even changing the resolution or using a magnifying glass won't help.

The moral is, if you do prefer to use ems to specify your type sizes generally, when you want small type and get below about 0.8 ems, switch to px to be sure that your type doesn't go below the critical 9 px threshold.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float