How can I change default height?

Ah, the wonderful world of em and rem units, and the sizes they use. You're probably aware that the (r)em has a default value of 16 pixels. What you might be less aware of is that these units default to the container that they are set in. For example, suppose I create a representation of a container which I call peter (for vanity's sake). If I set this

.peter {
  font-size: 10px;
}
p {
  font-size: 2em;
}

When I see a paragraph element in .article, it will take the value 20 pixels because the container has been set to 10 pixels. Now, rem units are slightly different in that, they are set relative to the root container. So, suppose we wanted to change the font size using rem, how would we do this? As we know that rems are set relative to the root container, then we set the default in the root element. What this looks like is

html {
  font-size: 10px;
}
p {
  font-size: 2rem;
}

Now, unless we override the font size with a local container, our font size is going to be 20 pixels for each paragraph.