Is there really any point to using relative font sizing in CSS?

Question

I\'ve read a lot about the pros and cons of sizing with either relative or absolute font sizes. Fixed sizes don\'t zoom in IE6 but that\'s not much of an issue these days. A

Answer 1

think about your parents or grandparents looking at your web page, with and without their bifocals (or trifocals). If they can't read it because you made all the fonts 8px, they'll probably go somewhere else. If they click 'text size >> largest' and nothing happens, they'll probably go somewhere else.

given that - at least in the USA - a lot of web surfers are older people with time, money, and failing eyesight, the use of em for fonts for public web sites would seem to be of great benefit ;-)

Answer 2

Apart from the ability to resize in IE6 (which is still, alas, a very popular browser), relative fonts give you a greater likelihood of matching the user's needs by default without them having to resize (or knowing how to, if we're talking inexperienced users here). The user — or someone on their behalf — may have increased font size as a DPI, OS or browser customisation for good reasons (eg. visual impairment) and with relative sizing you can use that information to their advantage.

Use ‘px’ for text that has to match sizes with other on-page elements that are sized in pixels (ie. images). For the rest, ‘%’. The question assumes that using relative font sizes is in some way difficult; I don't think it is.

Typically you'll set one font-size in ‘%’ on the body, and a few on other page elements which are more or less important than general body text. You should rarely have enough levels of nesting and nested font-sizes that you can't easily keep track of them.

There is not anything about sizes being relative to their parent's size that is particularly hard to understand, and this property can be useful: should you want to change the basic font size on your page or a part of it, you can just change it once rather than having to go through fixing up every font-size declaration on contained elements.

The only real difficulty with relative is when you've sized a block relatively, but you want to size something inside it back to the original size. You can work out a percentage that's the inverse of the parent's percentage, but it's likely to be an ugly number, and you may get 1px rounding errors if you don't/can't state it in full accuracy. In this occasional case it may be a good idea to step back and look at the selector, see if you can't apply the sizing more selectively to avoid having to undo it.

It would, admittedly, be nice if we had a unit that was relative only to the user's default size, not parent sizes, to attack problems like this. Unfortunately the only values that work like that are the smallest/smaller/small/medium/etc. keywords, which are rather coarse-grained in addition to the historical browser consistency problems.

Answer 3

Using relative units for font-size, line-height, and top/bottom margin and padding will also keep the typographic scale intact as users increase/decrease text size. Typography and design people will appreciate it =)

Answer 4

According to YUI Font CSS,

Always use percentages as the units because they render more consistently than ems, and because they allow user-initiated resizing (unlike pixels).

Relative font sizes work pretty well when they are part of a framework like YUI. Especially because they normalize how fonts work across browsers.

Personally, I do throw in absolute px every once in a while, but typically only for text that must somehow match up size-wise with some other design elements (like a menu).

The % stuff does break down when you assign % to a certain element and then a different % to a contained element. But that's the only real gotcha I've found.

Answer 5

As explained in this CSS font size article:

Ideally? The very best unit of measure is NONE AT ALL! Let the user-agent determine the display according to the user's preference - BUT! We also know that with most designs, this is not a very practical approach. Personally? I prefer the "mix 'n match" flexibility of .em and .px - As user-agents become more "user-friendly" designer sizing will NOT be as potentially problematic OR controversial as it stands now.

Do not forget though relative font size can be used for other things than... font size!

• css image text wrap
• css em scale image

Answer 6

OS X and Windows handle at least pt font sizes differently so this is certainly a complete no-go. On the other hand, is there any good reason not to use relative font sizes? It's not really as if this were a weighted debate with good arguments on both sides. Rather, on one side are several advantages (that might not be apparent all the time). But on the other hand there are only apparent advantages that, upon the slightest probing, prove worthless.¹

Actually, I can only think of one argument for absolute font sizes, namely that it makes it easier to implement the CSS for a finished design, by copying the font sizes used in the design software. In reality, a consistent design will only use a handful of different font sizes that are simple ratios of each other (say, 80%) and can thus trivially be expressed in terms of em or %.

---

¹⁾ You said:

or whether you want to be able to change a font size somewhere without affecting nested elements

What exactly do you mean by that? The whole point of CSS is that you (generally) change an element’s attributes relative to its parents’. Why should this ever be a problem?

The whole debate is slightly reminiscent of the “don’t use layout tables” debates. The arguments might seem dogmatic to nonprofessionals² but there’s simply no reason not to follow them anyway. This isn’t to say that it’s wrong to ask for arguments! But there are soo many pointless violations of this rule.

---

²⁾ For the record, I’m not a web design professional. Take my technical opinions here with just a grain of salt. But the argument is really independent of the technology used.