EM Vs. PX in CSS

When designing your website, you may find yourself wanting to specify your website's font size in CSS and be certain that it will appear the same no matter what browser your readers use. The "font-size" CSS property accepts many different types of values; the most commonly used for styling website text are pixels and ems. Either of these will allow you to style your text consistently, but each presents some issues that you will have to overcome.

Ems

Em sizing is relative to the font size set for the entire website. The default font size for normal text, when no sizing is specified, is 16 pixels; thus, setting the text size to 1 em will cause text to be displayed with a size of 16 pixels. You can calculate larger or smaller font sizes by dividing your text's desired size in pixels by 16; for example, if you want the text of a heading to display as 28 pixels in size, you would set it to 1.75 ems. Em sizes are relative and therefore will cascade; if you set the font size of all <div> tags to 1.2 ems and the font size of all lists to 1.2 ems, the font size of any list contained within a <div> will be equal to 1.44 ems.

Pixels

Specifying your font size in pixels allows fine-grained control over the size of your website's text. Text set to the size of 16 pixels will always occupy 16 pixels in height, no matter what font the text is set in or which browser your readers are using. Pixel sizes are absolute and do not cascade; if you set the font size of all <div> tags to 16 pixels and the font size of all lists to 14 pixels, the font size of any list contained within a <div> will remain 14 pixels.

Issues With Pixel Sizing

Setting your font size in pixels presents some usability issues. People who visit your website using Internet Explorer will be unable to adjust the text's size without using the browser's zoom function; as a result, readers who suffer from vision impairments may be unable to read the text your website. Additionally, the text size may not scale downwards properly on some mobile browsers, lowering readability when your website is viewed through smartphones or other mobile devices.

Issues With Em Sizing

Text set in ems scales upwards and downwards when necessary; unfortunately, this type of sizing will also cause some issues with Internet Explorer. When increasing or decreasing the text size, the text scaling is disproportionate, resulting in much larger or smaller text than would be appropriate. This issue, though, can easily be solved by setting a percentage-based default font size for the body of the website:

body { font-size: 100%; }

Once this font baseline has been set, any text set in ems will scale correctly.

References

• W3Schools: CSS Font