CSS and Font Sizes

Introduction

It happens time and again. A graphic designer makes his or her cool new layout, complete with font sizes tweaked to perfection. This designer then tries to change the font size in their browser, and, much to his or her dismay, things break. Carefully sized tables overflow, things look different, and generally this designer curses the font-size change feature.

One solution to this problem is to fix the font sizes so that browsers cannot change them. The advantage of this approach is that it appears to solve the problem, and the layout remains static, even when that nasty font-change feature is used. The designs are protected from the user, who simply does not know good design when he sees it!

What's the Problem?

In terms of HTML and the Web, fixing the fonts this way is a hack. It is an inelegant solution to the problem, and that's not all. This method is disenfranchising a vast swath of potential customers/visitors. The designer is locking out platforms with different default type-rendering systems, like the Mac, and is of course interfering with a disabled visitor's ability to read at a comfortable text size. High-resolution-using visitors often want to dedicate more pixels to the rendering of fonts, but cannot because the designer didn't think anyone would ever want his pristine design to change. This designer has instead locked such users into font sizes measuring just a millimeter or two when the font is at 7pt and the display at 1600x1200 or higher. Clearly, this should be addressed.

So What is the Real Answer, Then?

Example Area

Note that everything in this box scales when you change the font size. The border, the image, and all the text. Browsers can choose the font size they prefer, and the content of the box continues to look almost exactly the same.

A better solution is to use the EM unit in the CSS specification, which is well-supported by most browsers for both positioning and sizing.

EMs are always supposed to be the same relative size, as they are defined as about the width of the letter 'm' in the current font. The current font is always the font used by the parent object in the HTML DOM, or the default font size if none is specified. If you use the default font size, then when the user changes the font size in the browser, all objects defined via EMs are scaled in an exactly proportional way, since your font change command causes the size of the letter 'm' in the document's default font to change. You can define any HTML element in terms of EM via CSS.

So what does this solve? Well, if designers embrace variable font sizing on the web, not only will their design be more robust, it will survive the transition between platforms and resolutions much more successfully. Once your page uses this method, your visitors will no longer be frustrated by fixed font sizes, paving the way for a more flexible and useable web for all of us.

What's the Catch?

EMs are - as you will recall - defined as the width of the letter 'm' in the parent object's font. The parent object may be defined in terms of points, pixels, or some other unchangeable unit, and so most of the power of EM is lost. It just becomes a fancy way of saying 'make this font 1.5 times bigger'. This causes things to act strangely, especially since width:1em will use the document default font, whereas font-size:1em will use the 'parent object font' method. This means you can't have perfect scaling of objects, like in PDF, and things quickly get out of control if you are not careful.

What is needed for PDF-like scaling is a global EM-like unit which is only resized by the user via the browsers font size commands, and not affected by the parent object. With this unit, we could build a page that would reflow with browser width like HTML, but which could scale depending on user preference. Images and other objects would all resize perfectly, and a printout would appear perfect as well.

Conclusion

So what should we do until we get this 'PDF-like' scaling? Either we can use fixed-size fonts as most do today. These fixed-size pages definitely appear as the designer intended, but is that style of page design appropriate given the current state of the Web? Hopefully, you will agree that a good design should complement the medium used to convey it, and not attempt to fight it with size-constraining tricks and other carefully crafted hacks.