Compounded relative font-sizes: a clean way to adopt the font-size of the child, not the parent element

Question

For example, if I have:

td { font-size: 1.3em }

h2 { font-size: 2em }
h3 { font-size: 1.6em }
p { font-size: 1.2 }

And I have headings/paragraphs inside my table-cells, I know that I can avoid compounding the font-sizes by the following:

td h2, td h3, td p { font-size: 1em }

Which would result in the headings/paragraphs in my table-cells having font-size of 1.3em (that of the td).

But what I'm looking for is a nice, clean way for each child element to have it's original font-size, not that of the parent.

I'd really like to avoid doing the following (and of course I'd like to avoid using px):

td h2 { font-size: 1.54em }  // 1.3 x 1.54 ~ 2
td h3 { font-size: 1.23em }  // 1.3 x 1.23 ~ 1.6
td p { font-size: 0.92em }  // 1.3 x 0.92 ~ 1.2

For anyone familiar with LESS, I'm using that, and thought I should be able to use it to do the calculations for me, e.g. Using accessors:

td h2 { font-size: h2['font-size'] / td['font-size'] }

This at least would use the original values to do the calculation but feels just as clumsy as the above and besides, it seems LESS no longer supports accessors anyway.

This seems so simple in concept, I feel like the answer's staring me in the face, but I've been banging my head against this for a while and can't find the answer anywhere.

Answer 1

What you want can be achieved by using rem units.

rems are relative ems which base their calculations on the font-size declared on the body element.

Compounding issues simply disappear.

http://snook.ca/archives/html_and_css/font-size-with-rem is an excellent article to articulate this.

note: IE8 requires a px fallback, but this won't be an issue since you're already making use of a preprocessor.

EDIT: I've written a Sass mixin which outputs rems with their respective px fallbacks for most CSS properties: https://gist.github.com/larrybotha/4153104

Answer 2

I'll answer the same as my question, use Pixels!

A pixel is a relative unit, it's relative to the screen resolution, users can set their own desired minimum pixel size, and zoom zooms pixels. I'd venture that it is more difficult for a designer to approximate non pixel font-sizes at every perceivable resolution than it is to relax and let the browser tools take care of it?

It used to be that a font declared in pixels wouldn't resize in IE which was very annoying for some, not very accessible if a user deliberately chose to view on a lower resolution for instance for eyesight reasons - that's where the "em's were best for fonts" thing came from, but that was never true IE could be foiled using percentages instead which then offers the same problems ;).. I remember getting annoyed when the fad was for "teeny text", but then the joys of discovering CTRL+ in non-ie .. anyway now the pixel sized fonts will scale perfectly well, if you're building a fluid site you can build it with a mixture of em's for widths and pixels for font-sizes - if it looks OK at your resolution try zooming it, both up and down - you have to go pretty far up or down before it becomes illegible, and who's zooming it that far up/down except designers ;)

Answer 3

Have you considered adding a class to the headings that are in table cells? The extra level of specificity would override the effect of the cascading styles compounding each other, I think.