Home/ Questions/Q 7047489
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T02:46:39+00:00

I am learning CSS, and was reading questions about Relative vs Absolute font-sizes on

  • 0

I am learning CSS, and was reading questions about Relative vs Absolute font-sizes on StackOverflow. I came across two threads.

1. In one thread (CSS font size: relative vs. absolute values. Which to use?), one of the answers is actually a question that hasn’t been answered: [QUOTE]

Question, many here say that Pt are only for print. But isn’t it nice to have a simple ability to make the text the size you want fast without remembering what DIV has what Em or % value. For example, when you have:

<body>
 <div id="box1">
   test text sample1
   <div id="box2">
     test text sample2
     <div id="box3">
       test text sample3
        <div id="box4">
          test text sample4
        </div>
     </div>
   </div>
</div>

I know it is a kind of weird structure, but let’s say that a layout needs a structure like that for graphic purposes and CSS image layering. So I would like to make box1 font = 100%, box2 = 1.2em. box3 = .8em, and box4 = 1.6em

Now, the problem is that Em from box 1 also transfers to all its children, correct me if I am wrong, so it means that box2 is not exactly 1.2em, and by the time when we get to box 4 font size it’s really hard to say what it is. Whereas when we use Pt or Px it stays the way we want it to stay.

However, Px sizes, are inflexible and I do like to make the fonts larger in my browser’s menu when I sit far away from the screen. Let’s face it, it is convenient. So Px size is out. So why not use Pt? How big is the browser difference?

2. Another thread has the same question (Compounded relative font-sizes: a clean way to adopt the font-size of the child, not the parent element) with numbers, calculations – – more explanative, without a proper answer:

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, eg. 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.

Please help! At this point if someone tells me it can’t be done and that it’s OK to go ahead and use pixel values, I’ll quite happily believe them!

It may be obvious now what my question is… Is there a better way to use relative font sizes (or any relative size — like width, height, etc — for that matter) without the child elements being effected by the parent element?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0