2

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.

double-beep
  • 5,031
  • 17
  • 33
  • 41
Karen Brooks
  • 21
  • 2
  • OK I'll tell you to use pixels ;) - it's a relative unit just like em, why do you feel you can't use them? – clairesuzy Mar 22 '11 at 17:50
  • 1
    px's pose accessibility issues (no zooming), and are much more difficult to maintain than using a relative unit, such as rems. – Larry Apr 18 '13 at 13:05

3 Answers3

2

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

Larry
  • 1,238
  • 2
  • 20
  • 25
1

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

clairesuzy
  • 27,296
  • 8
  • 54
  • 52
  • 1
    Thanks clairesuzy, that's great news! – Karen Brooks Mar 23 '11 at 09:23
  • 3
    This is an awful advice. When you say *screen resolution* you probably mean *desktop size* (e.g. 1600×1200px). You completely disregard the *dots per inch* setting (e.g. 120dpi) and I'm not even talking about modern Retina displays—the feature has been around for many years. Even if all decent browsers have decent zoom, fonts set in pixels will look tiny by default in high resolution displays. You might say that first impression is not important and user can zoom anyway, but then, you could just use `pt` and disregard about small differences between browsers. – Álvaro González Apr 17 '13 at 12:16
  • 2
    px's are, unfortunately, not relative - they are fixed. em's and rem's are relative, as they are calculated based on the value of a parent / grandparent / root element's value. Rem's have the added bonus that they don't compound, and you can modify the font size across your whole document in a single declaration - such as on the body selector. Using px's affects accessibility (no zooming) and are a maintenance nightmare. – Larry Apr 18 '13 at 13:01
0

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.

David Rhoden
  • 913
  • 5
  • 15
  • 30
  • not with ems David they inherit from their parent no matter what (unless you set the class to be in pixels of course!). They, ems, are the same as specifying a percentage, as soon as you specify a percentage it becomes a "percentage of what" that 'what' will be the existing (computed) font-size of the parent – clairesuzy Mar 22 '11 at 22:32