Em vs px things

HTML-CSS
1

When use em for base em need to set on body? From it count the base pixel size? What element on can set base em size? And is need to set 1em or 1 rem? Need that root em? for set default like on body? So from body em will count h1-6 sizes also set with em?

And on body need set 1em for sure that 16px?

Thanks

2

the em takes the first parent font-size while the rem takes the root font-size
so if you want to set a base font-size you can change the html font-size in px or even better in % and use the
rem to define your other lengths

3

Don’t use ems for general font size, you’ll get into all kinds of trouble. rems are best for responsiveness and accessibility. Pixels are easiest, but generally cause accessibility issues and can be painful when you’re trying to build responsive stuff.

Personally, I’d say common practice (though different people have different opinions) is:

  • set a font size on <html> in pixels or % (normally 16px, the default, or 100%).
  • rem units are relative to the root element, which is <html> for a web page. So assuming you’ve set it to 16px, 1rem is 16px, 1.5rem is 24px, 0.5rem is 8px end so on.
  • Set most of your for sizing and padding/margins etc in rems.
  • ems are relative to their parent. So if you say p elements will be 1.5em, then first p will be 24px. But if there’s another p inside that, it will be 36px. And if there’s another one inside that it’ll be 54px and so on.
  • so if you used rems instead of ems, all the p elements would be 1.5 * 16, so 24px.
  • ems are useful for things like superscript, or subscript, or ruby: you have some characters which need to be proportionally smaller than the text they live next to, so you can do something like sup, sub { font-size: 0.75em} or whatever.

I would make a simple HTML page with different things on it (paragraphs, headers, lists, different text elements) and play around, it’s the easiest way to see the differences.

1 Like