For a long time I've been using
body {font-size:62.5%;}
in CSS documents since it's supposed to make 1em
equal 10px
. However, I recently noticed that this isn't the case for me in Internet Explorer. So instead I tried the code:
html {font-size:100%} body {font-size:10px}
Now this works like a charm for me. My question is:
What's the drawback of this solution since I can't find anyone else using it?
To clarify: I later specify all my font-sizes, widths, heights and so forth in em
. It's just in the body I use 10px
instead of 62.5%
.
Using em Units A more suitable CSS unit for font sizes is the em. The em is a scalable unit, 1em is equal to the current font size; so if the parent's font size is 16px, 1em is 16px and 2em is 32px.
Font size specifications may come in points or pixels where: 1 pixel (px) is usually assumed to be 1/96th of an inch. 1 point (pt) is assumed to be 1/72nd of an inch. Therefore 16px = 12pt.
The 12px is the height of the font in pixels. The 13px is the height of the line in pixels.
An em is a unit of measurement, relative to the size of the font; therefore, in a typeface set at a font-size of 16px, one em is 16px. The em square is the “box” that each glyph is sized relative to. So, at 12 points, the em square is 12 points wide.
You're going to get arguments for both sides of this issue. I'm guessing a majority are going to argue for %. But you asked for drawbacks or pitfalls
The main drawback you would encounter would be if you ran across a browser or device that honored your pixel setting instead of a percentage of whatever it's default is, and that pixel setting happened to be problematic or too small to read. If that browser didn't offer the user an opportunity to either scale the font or zoom in on the page, then you could have a potential problem.
All that said, almost every browser these days has that default set at 16px. I can't speak to why IE in your case is sizing it differently. If you are going for a pixel perfectly sized design, then use px, otherwise I'd suggest staying with the %.
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