Font-size relative to body? - css

Question

Is there any way I can have font-sizes relative to the body font-size setting?
I know I could use percentages like this:
body{
font-size: 14px;
}
p{
font-size: 150%;
}
But this produces unwanted results on nested elements, where the font-size becomes relative to the parent element:
li{
font-size: 150%;
}
li li{
/* ... */
}

Answer 1

CSS3 introduced rem(root em), which is html. Unlike em, which sets the unit relative to the parent font-size, rem will set the unit relative to the root. Here is a great article on rem: >>>CLICK HERE<<<
CSS:
html {
font-size: 14px;
}
p {
font-size: 21px; /*cross browser fall-back hack*/
font-size: 1.5rem; /*same as 150%*/
}
li {
font-size: 21px; /*cross browser fall-back*/
font-size: 1.5rem;
}
li li {
font-size:18px; /*cross browser fall-back*/
font-size: 1.25rem;
}
For cross browser compatibility concerns, you can use a fall-back by also including px for desired results.
I am adding my response to Jukka K. Korpela's comment, as I think it is relevant to the original post.
The functionality of rem is an attempt to remove the compounding effect of em/% throughout your document (especially in lists) and also gain elasticity that you do not get with px. em/% requires a great deal of maintenance and with the ever evolving internet environment, this means a-lot of time. Additionally early IE would still require a hack to set the base percentage (most commonly the root [HTML] to 100%) then set the parent element to the necessary size. However, this hack would cause issues with newer browsers that follow the cascade properly. Again, my recommendation is to use rem for the a flexibility and ease of maintenance and a fall-back (for unsupported browsers) of px.

Answer 2

When using relative values, such as font-size: 150%; this is relative to the parent element. You can't change that.
For example if you had:
<div>
<p id=p1>
<p id=p2>
<p id=p3>
...
With this CSS:
div { font-size: 10pt }
p { font-size: 200% }
The result would be p1 would have a font size of 20pt, p2 would be 40pt, p3 would be 8-pt and so on.
You could get around this by overriding the font-size of everything, and then doing a relative font-size on only the relevant elements such as:
* { font-size: 100% }
body { font-size: 10pt }
#p3 { font-size: 150% }
div { font-size: 120% }
But again, any nesting of elements, like <div>s in the above example would again cause the relative font-size to grow or shrink with each nesting.

Answer 3

The best solution in your case is to switch to the use of variables and compile your css in SASS or LESS.
Although, if you don't want to go over the trouble, you can rely on %, em, or javascript...

Answer 4

The absolute unit, the pixel, is used if you want absolute control or in case you need a "pixel perfect" result. On the other hand, the relative units, like em or rem are usually used if the font size needs to change according to the screen size. It provides easier manipulation and requires fewer media query usages.
The em unit is relative to the parent font-size, while the rem unit is relative to the root element.
Here is an example of the usage of the rem unit:
html { font-size: 100% } //usually this is 16px
p,
div {
font-size: 1rem; //this will equal to 16px
}
section,
article {
font-size: 1.5rem; //this will equal to 24px
}
There is a great article here https://kolosek.com/css-relative-font-size/ that explains the absolute and relative font sizes in detail.