Question

A straight-forward css question. Let’s say we have this styles:

  body { 
    font-size : 16px;
  }

  p {
   font-size : 0.875em; // relative to parent, 14px
   line-height : 1em; //relative to this element, 14px
   margin-bottom : 1em; //relative to this element, 14px
  }

This will mean that <p>s will have a font-size of 14px, a line-height of 14px and a margin-bottom of 14px.

What I would like is the equivalent of:

body : {
  font-size : 16px;
}

p { 
  font-size : 0.875em; // relative to parent, 14px;
  line-height : 1em; // relative to parent line-height, 16px;
  margin-bottom : 1em; // relative to parent margin-bottom, 16px;
}

The reason I want this is because I want to have a responsive font size which respects its baseline.

Answer 1

Technically, you could use the rem, though it refers to the font size of the html element (so you would need to use the html selector, not body, and let body inherit from html). However, browser support is limited.

So it’s a better idea to use the em unit, just taking into account of your other settings. If p has font-size: 0.875em, then to set a margin to a value that its the font size of the parent (calculating 1/0.875), you would use the inverse value: margin-bottom: 1.143em.

On the other hand, it is natural to regard the font size of the body element as the size of copy text, and p elements are normally copy text. So it would be more natural to set font-size of body (if you set it at all) to the desired copy text size. This would make things a bit easier.