Does it make sense to use relative font size in CSS?

Question

I read a lot about the pros and cons of calibrating with relative or absolute font sizes. Fixed sizes don't increase IE6, but lately it's not that much. Is accessibility important, but I believe all good accessibility software has been created to solve these problems?

I assume that it mostly depends on whether you want to change all font sizes with a single rule (i.e. the default font size you set) or if you want to change the font size somewhere without affecting the nested elements (this what upsets me the most!).

Does anyone have any clues?

Answer 1

According to YUI Font CSS ,

Always use percentages as units because they are more consistent than ems, and because they allow user resizing (as opposed to pixels).

Relative font sizes work very well when they are part of a structure such as YUI. Moreover, they normalize the work of fonts in browsers.

Personally, I periodically re-throw absolute pixels, but usually only for text, which should somehow fit the size with some other design elements (like a menu).

% stuff does not work when you assign% to a specific element and then another% to the contained element. But this is the only real booty I have found.

Answer 2

As explained in this CSS font size :

Ideally? The best unit of measure NONE AT ALL! Let the user-agent determine the display in accordance with the user's preference - BUT! We also know that with most projects this is not a very practical approach. Personally? I prefer the flexibility of "mix" n match ".m" and .px. As user agents become more “convenient,” the size of the designer’s design will NOT be as problematic or controversial as it is now.

Remember that relative font size can be used for things other than ... font size!

• CSS text with text
• css em scale image

Answer 3

Besides the ability to resize in IE6 (which is still, alas, a very popular browser), relative fonts give you a greater likelihood of matching the needs of users by default without changing them (or knowing how to do this if we talk about inexperienced users here). The user - or someone on their behalf - may have an increased font size as a DPI, OS, or browser setting for valid reasons (for example, blurred vision) and with a relative size, you can use this information to your advantage.

Use 'px for text that should fit with other elements on the page that are in pixels (i.e., images). For others, '%. The question suggests that using relative font sizes is somewhat difficult; I do not think so.

Usually you set one font size to '% on the body, and some on other page elements that are more or less important than the general body text. You rarely need to have enough nesting levels and nested fonts that you cannot easily track.

There is nothing about sizes relative to their parent size, which is especially difficult to understand, and this property can be useful: if you want to change the main font size on your page or part of it, you can just change it once, and you don’t have to fix each size declaration font on the contained elements.

The only real difficulty with relative is when you measure the size of a block relatively, but want to change something inside it back to its original size. You can work out a percentage that is inverse to the parent percent, but it is likely to be an ugly number, and you can get 1px rounding errors if you cannot / cannot specify it fully. In this random case, it might be a good idea to step back and look at the selector, see if you can apply the selection more selectively to avoid undoing it.

It would be, admittedly, nice if we had a unit that applied only to the user's default size, and not to the parent sizes, to attack such problems. Unfortunately, the only values ​​that work are the smallest / smallest / small / medium / etc. keywords that are pretty crude in addition to historical browser consistency issues.

Answer 4

OS X and Windows handle at least the pt font size differently, so this is definitely a complete non-go. On the other hand, is there any good reason not to use relative font sizes? Actually, this is not the case as if it were a balanced debate with good arguments on both sides. Rather, on the one hand there are several advantages (which may not always be obvious). But, on the other hand, there are only obvious advantages, which, with the slightest sounding, are useless. ^one

Actually, I can only think of one argument for absolute font sizes, namely, to simplify the CSS implementation for the finished design by copying the font sizes used in the design software. In fact, a consistent design will use only a few different font sizes, which are simple relationships of each other (e.g. 80%) and therefore can be trivially expressed in terms of em or % .

---

¹⁾ You said:

or want you to be able to resize the font somewhere without affecting the nested elements

What do you mean? The whole point of CSS is that you (usually) change the attributes of the elements relative to your parents. Why should this be a problem?

All debates are slightly reminiscent of the “don't use layout tables” discussion. Arguments may seem dogmatic for laypersons ² but they simply cannot fail to follow them. This does not mean to say that it is wrong to ask for arguments! But there are many meaningless violations of this rule.

---

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

Answer 5

think of your parents or grandparents looking at your web page, with or without their bifocal (or trifocal). If they cannot read this because you made all the 8px fonts, they will probably go somewhere else. If they click "text size → largest" and nothing happens, they will probably go somewhere else.

Considering that, at least in the USA, many web surfers are older people with time, money and poor eyesight, using em for fonts for public websites seems very useful; -)

Answer 6

The only serious reason is that many people still use IE6. This is simple. Probably at the end of 2008 it would be nice not to pay more attention to IE6. But it's hard to ignore IE6. I work as a web designer / devolper for a large company in Italy, and many of our employees or clients, on their work computers, are now browsing the Internet with IE6.

Why? They do not have administrator rights and cannot set up anonymization in their machines, and system administrators are always too busy to update the computers of each office. Perhaps these people will switch to IE7 (something like Firefox is a dream) when their hard drives need to be changed.

Perhaps such things happen only in Italy. But I would not argue about this.

Answer 7

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