Relative font sizes tricky on child elements?

The short answer - no, that's not how CSS works.

The longer answer - CSS, as you may know, stands for Cascading Style Sheets. Part of that cascade is that child elements will inherit the properties of its parent elements.

The technique I've seen a number of people use (including Dan Cederholm in his book Bulletproof CSS, which I recommend), is to make the base font size equivalent to 10px, instead of dealing with the typical default base font size of 16px. I don't know how much it would help your example design, but it would likely help working with em-based fonts overall.

I also found this article on the differences between percent and em-based font sizing. It's a little old, but the comparison between percent and em is still valid.

That said, modern browsers zoom the whole page, so unless you have to support IE6, you may be able to get away with using pixel font sizes, particularly if your designs really do need to be that convoluted (because if you're nesting that many elements and have that many different font sizes, there's probably a better way to design it).

Also, as @JukkaK.Korpela said, tables don't normally contain heading tags, that's what the <th> and <thead> elements are for.

No, there is no better way to use adaptive (relative) font sizes than to set them as relative to the parent element’s font size. The reason is that they have been designed to work that way. If this means too many computations in authoring, then the real reason is probably that the overall design is too complicated or you are using too many font sizes.

Normally tables don’t contain headings, for example, unless you are using tables for layout. Some people might say that table layout is a problem them, but I would rather say that the problem is setting font size for the table. You don’t need to do that; you can just set font sizes for the different elements inside the table,