Menu
For anything involving width units in CSS, I've always used px when I need fixed widths and em when I need widths relative to the size of the font.
Then I realized em really is a measurement of the height of the font, not the width. Thus ch seems much more appropriate.
Ignoring that ch is a relatively new CSS unit (older browsers may not support it), when specifying any horizontal length that should scale with the size of the font, is it best to use ch, em, or something else?
849
Don't think of em in terms of height or width of the font, it's derived from a font's metrics metadata and is technically in no way related to individual letters in the font, or even the average height or width of a specific set of letters. It's simply a value that you know is always the same no matter where you load that font, which is why it's fine to use as long as you make sure to load the correct font.
If you specify which font to use, you can safely use em and know your content is always sized the same no matter which device/browser combination is used. On the other hand, if you leave any of the fonts used implied (like relying on system names or using "serif" or even simply never specifying the topmost font for <html> or <body>) then you'll have to think twice about using em, or indeed any relative unit.
Bottom line: enforce the fonts on your page(s), and then em units are 100% reliable, because the fonts used in each contexts are always guaranteed to be the ones you designed against.
Update: CSS3 came out about 2 years after this answer which redefined what an em means. Under current rules (April 2017) em are defined as "whatever the current font-size is". As such, a font-size: 16px straight-up means that for any element to which that rule applies, 1em corresponds to 16px.
93
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
