Updated on May 9, 2007
EM and PX are two of the most popular ways of defining a font’s size with CSS. There is a lot of confusion about the definition of the two formats, this is my attempt to make it understandable for everyone.
EM
EM depends on the default size of a letter. 1 EM = the “normal” size for that font, 1.1 EM = slightly larger, .9 EM = slightly smaller… etc. The actual pixel size of a character is dependant upon the parent elements font size. EMs are are good for text resizing, but they can also be a pain to use at times.
Here are some quick examples (The middle one is .5 em by the way, which is half the normal size for this font):
The “normal” size for EMs (relative to the HTML document) will usually be anywhere from 10 to 12px, but like I said above, it changes depending on the parent element’s font size.
PX
You can set an exact pixel size using PX. The size will remain constant no matter which font, browser, or operating system you are using. Well, actually it can change depending on the viewing device and DPI. I wouldn’t worry about that too much, however.
Many pro web designers say PX isn’t good because it isn’t as flexible because it is fixed. They do, however, admit it is very useful for making a print style sheet.
Here are some examples of various pixel sizes (middle one is 6 pixels):
Which Is Better?
Each method has its advantages and disadvantages. The best thing you can do is experiment, experiment, experiment!
I find PX to be easier to work with, since I know exactly how it will display. In fact, I will be switching Nusuni.com over to all EM at some point. I am also experimenting with percents, which is a relative value as well.
EMs tend to be a little more screen resolution independent, and since we can view web pages at so many resolutions it may not be a bad idea to use them. Plus EM is generally viewed as the accepted standard.
Can They Be Converted?
It is possible if you do all the math and calculate in the default size for the font, etc. But generally speaking you should avoid trying to create math formulas for EM to PX conversion, and vice versa. It is a headache just waiting to happen. For the most part the sizes go like this (relative to the HTML document):
.8em = 8px
.9em = 9px
1 em = 10 px
1.1em = 11px
1.2em = 12px…
Plus or minus a few pixels, of course.
Should I Round To The Tenth When Using EMs?
Usually it helps format your CSS file better if you round to the tenth (1 becomes 1.0, .9 becomes 0.9, etc), but I haven’t heard of any compatibility issues when not doing that. It is all up to you.
What About The Others?
You can also define fonts using percents, points, etc. The other methods are not nearly as popular as EMs and pixels, however.
Points, like pixels, are a fixed size. It will look almost the same on everything. A 12 pt character will look the same as a 12 pt character in your text editor.
Percents on the other hand depend on the default font size, just like EMs.
Last Minute Notes
As always, just experiment. If you have access to other operating systems, experiment on them as well. Try to find the size that works 99.9% of the time. Don’t forget to try setting your screen to different DPIs (if you can), screen resolutions, and color settings.
Please subscribe, or else I will cry. Do you really want to make a programmer cry?
Leave a Reply