Coming from a typography background, ems (actually mostly rems) come naturally. Knowing the history behind it — the width of the box that holds the movable type letter M, which in most classic typefaces used to be to be the widest character — helps to understand the meaning behind it. Some other useful em-related characters include the em space (a space as large as a typographical em), can be accessed with  , and the em dash (—), which is used to separate ideas, similarly to parentheses. On Mac, you can type it using option+shift+hyphen: —.
Fun fact: Similarly to ems, there are also ens. Like the em space, there's also an en space ( ), and an en dash (–), achieved with option+hyphen. It is technically measured as the width of half an em, though in some typefaces' designs the en dash width isn't the right width. Bonus fun fact, an en dash is the correct typographic symbol to use when referring to a minus (as in 4–1=3), however, if you use it in programming, it's not going to work. The hyphen, what we normally use as a minus symbol, is just a hyphen, the symbol used at the end of a line to separate a word when it doesn't fit in the line (called hyphenation). The en dash is properly used in text in some cases, like when denoting time ranges (2017–2019).
Back from typography nerd talk... I personally use rems 99% of time in CSS because it's most predictable. I set it to be 16px in my html or body CSS declaration, and then I know I can work in multiples or divisions of 16. I even have a handy chart written on the wall.
Coming from a typography background,
ems (actually mostlyrems) come naturally. Knowing the history behind it — the width of the box that holds the movable type letterM, which in most classic typefaces used to be to be the widest character — helps to understand the meaning behind it. Some other useful em-related characters include the em space (a space as large as a typographical em), can be accessed with , and the em dash (—), which is used to separate ideas, similarly to parentheses. On Mac, you can type it using option+shift+hyphen: —.Fun fact: Similarly to
ems, there are alsoens. Like the em space, there's also an en space ( ), and an en dash (–), achieved with option+hyphen. It is technically measured as the width of half an em, though in some typefaces' designs the en dash width isn't the right width. Bonus fun fact, an en dash is the correct typographic symbol to use when referring to a minus (as in 4–1=3), however, if you use it in programming, it's not going to work. The hyphen, what we normally use as a minus symbol, is just a hyphen, the symbol used at the end of a line to separate a word when it doesn't fit in the line (called hyphenation). The en dash is properly used in text in some cases, like when denoting time ranges (2017–2019).Back from typography nerd talk... I personally use
rems 99% of time in CSS because it's most predictable. I set it to be 16px in my html or body CSS declaration, and then I know I can work in multiples or divisions of 16. I even have a handy chart written on the wall.Very interesting! Thanks for sharing!