Menu
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?
503
For most font-relative units (such as em and ex ), the font size is relative to the parent element's font size. For font-relative units that are root-based (such as rem ), the font size is relative to the size of the font used by the <html> (root) element.
This is not about inheritance at all. When you set font-size on an element, the element certainly does not inherit font size. This is about the effect of the relative nature of the em unit.
Absolute units are fixed and (mostly) relate to some physical measurement. Once they are declared, their size cannot be altered by changing the font size of some other element. Relative units do not have an objective measurement. Instead, their actual size is determined by the size of a parent element.
thts true but font is inherited by default .
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.
161
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,
44
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.
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
