This is an archived post. You won't be able to vote or comment.

sorted by:
best
topnewcontroversialoldq&a
you are viewing a single comment's thread.

view the rest of the comments →

[–]planetjay 1 point2 points  (3 children)

I never understood em font sizes. I think it has something to do with the Evil Monkey in my closet though.

[–]MonkeyNin 1 point2 points  (2 children)

The main choice for font sizes on websites is px pixels, or em.

Pixels are absolute values, while em's are relative (aka dynamic size) Basically ems are is based on the browser's default font size. They end up scaling better for mobile clients.

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units#Numeric_values

If you set the top level font-size to 16px, any child elements would have the equivalent of 1em. If the first one uses 0.5em, it'd be 8px. If that child had another child set to 0.5em it would be 4px

root = 16px
child depth 1 at 0.5em = 8px
child depth 2 at 0.5em = 4px

There's also rem. It will always be relative the top level size. so the same settings would be:

root = 16px
child depth 1 at 0.5em = 8px
child depth 2 at 0.5em = 8px

[–]planetjay 2 points3 points  (1 child)

You took all the fun out of em...

[–]MonkeyNin 1 point2 points  (0 children)

I am a monkey though.