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. Accessibility is important, but I assume that all good accessibility software is built to deal with these issues?

I guess it mainly comes down to whether you want to be able to change all font sizes with one rule (i.e. the default font size you set) or whether you want to be able to change a font size somewhere without affecting nested elements (this is the thing that frustrates me most!).

Anyone have any tips?

Answer 1

The only big reason valid is that a lot of people is still using IE6. Just this. Probably could be a good thing, at the end of 2008, to give no more attention at IE6. But is difficult to ignore IE6. I work as web designer/devolper for a big company in Italy, and many of ours employes or clients, in their work computers, are browsing the internet with IE6 right now.

Why? They don't have administrator rights and can't install anithing in their machines, and the system admistrators are always too busy to upgrade the computers of every office. May be this people will upgrade to IE7 (something like Firefox is a dream) when their hard disks will need to be changed.

Is possible that this sort of things happens only in Italy. But I would not bet on this.

Answer 2

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 3

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.

Answer 4

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 5

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 6

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 7

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 =)