10

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?

Machavity
  • 30,841
  • 27
  • 92
  • 100
its_me
  • 10,998
  • 25
  • 82
  • 130

4 Answers4

2

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.

Shauna
  • 9,495
  • 2
  • 37
  • 54
  • Does using too many relative font-sizes in CSS mean page loads slow (at least compared to using absolute values) as they require more processing to be done? – its_me Jan 12 '12 at 15:03
  • It might technically load more slowly, but the computer calculating it is going to be too fast it won't likely matter unless you're doing it on the order of thousands of times. Your biggest issue is with a) maintainability (keeping track of what the sizes actually are) and b) overall design (most designs are most effective when there are only a few variances in things like size or color). Writing your code to use HTML best practices will likely have a larger impact on load speed than using ems vs pixels. – Shauna Jan 12 '12 at 16:29
1

Box two is exactly 1.2em, but it is not necessarily 1.2 rem.

rem almost the same as em, but it is part of css3, and it's... (from the docs)

Equal to the computed value of ‘font-size’ on the root element.

When specified on the ‘font-size’ property of the root element, the ‘rem’ units refer to the property's initial value.

uber5001
  • 3,864
  • 4
  • 23
  • 44
1

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,

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • So, in a way, too many relative font-sizes in CSS means, page loads slow (at least compared to using absolute values) as they require more processing to be done? Is that right? – its_me Jan 12 '12 at 14:53
  • 2
    @Kr1s, I don’t think the efficiency issue is relevant. I was referring to calculations in *authoring*, i.e. the author needs to do some computations to find suitable factors if there are nested elements with their own font size settings. – Jukka K. Korpela Jan 12 '12 at 15:01
0

For font-size, one way I can imagine of is by specifying the font-size as close to the element that you want to set font-size on as possible, and also you might need to introduce some other elements to by-pass the nesting rule.

For example for your code in question, for each piece of text wrap it with a span and then set font-size on the spans. As these spans are not nested, all the font-sizes are relative to box1, here is the result https://jsfiddle.net/davenkin/pLype465/:

<div id="box1">
<span id="span1">test text sample1</span>
<div id="box2">
    <span id="span2">test text sample2</span>
    <div id="box3">
        <span id="span3">test text sample3</span>
        <div id="box4">
            <span id="span4">test text sample4</span>
        </div>
    </div>
</div>

davenkin
  • 131
  • 2
  • 8