Style base typography off of html instead of body

[tysongach]

Because rem units calculate their value off of the root element
(html), setting our base font size on the html element instead of
the body element means that we can adjust the global font size and all
relative units will follow.

Here’s an example:

I have a component, sized in rems…

.component {
  padding: 1rem;
}

Currently, if I adjust Bitters’ base font size from 1em to 2em, my expectation would be for the padding above to then equate to 2em/32px. But since we are setting this base font size on body and not html, this isn’t true and that padding will still equal 1em/16px.

[smharley]

I'm not sure I have a strong opinion, but this post has some good thoughts:

https://css-tricks.com/html-vs-body-in-css/

Do we need to put font-family, color, and line-height in the html selector?

PR looks good to me ⛴

[tysongach]

Thanks for sharing that article, @smharley, I hadn’t seen that.

I could be missing something, but I’m not finding many valuable insights from that article. Specifically, I was looking for drawbacks when styling directly off of html.

Given that these CSS properties originated from inline attributes that were written for , it would seem appropriate that they should be applied directly to in the CSS as well, rather than pushing them into the element.

“…it would seem appropriate…” isn’t a convincing stance.

Do we need to put font-family, color, and line-height in the html selector?

Without specific drawbacks, I think doing this so to not have another ruleset is fine.

[smharley]

Yeah, I'm not sure there's a set rule or anything. It just sounded like the way we had it before was ideal, except for rem styles. So I was just proposing moving only the font-size to the html selector.

I don't think it matters, I'm just not used to putting a lot of styles on the html. I agree that it's probably not worth it to create another ruleset

👍