css - Using percent for font size?

Question

I've read a fair bit about resizing fonts recently, most of it deriding using px as an unforgivable crime (ok, maybe not that bad, you get the idea) because it doesn't resize properly in older browsers.

I really want to have a standard that I use myself, in the past that has been px, simply because it's simple, easy to understand and fairly easy to achieve the exact font sizes that are specified in designs - but I'm now doubting using px.

I used em on a project recently because it needed text-resizing functionality which I made using jQuery. But I found it quite frustrating because of the way that em amplifies if you have two elements inside of each other both with an em size specified (hope that makes sense)

So I was wondering about using % for font resizing, I've seen a couple of big websites use this technique (namely, Yahoo) and from what I understand it seems to have all of the advantages of em without the incredibly annoying amplification thing.

So in short, I'm just wondering if there are any issues with using % for font-sizing in CSS? Would it be better than using PX in terms of font-resizing? And are there any noticeable draw backs?

Apologies if the blurb before the question is a little much :/ I'm still kind of getting used to the whole QA thing

Answer 1

In CSS3, use rem (root em). Sizing will not be affected by em size of the parent element.

The root font size is set by setting the font size on the :root pseudo-element, like so:

:root {
    font-size: 16px;
}