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 can
not 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 thats 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 can not because the designer didn't think anyone would ever want his pristene design to change. This designer has instead locked such users
into font sizes mesuring 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?
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.
6 X 3 em
40 X 20 pt
1.2 X 0.6 cm
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 flexable and useable web for all of us.
What's the catch?
EM's 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.
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.