View Full Version : em vs px

Mar 30th, 2007, 08:22 AM
was wondering when and where it's good to use em's instead of pixels? i have been reading up on a few books and they all use em's, especially for padding, but it seems like a lot more work than just using a pixel value... any opinions/ideas would be appreciated!

Mar 30th, 2007, 09:08 AM
The exact size of the em unit depends on the font type and size used, and can therefore create dimensions that are relative to the text.

Mar 30th, 2007, 09:35 AM
Use px in using font sizes and ems in padding/margin for layouts and etc.

Mar 30th, 2007, 09:57 AM
Ems are great because they're relative…sizing elements with ems lets the elements resize when the text resizes. This demo page (http://gigcal.littlethinky.com) I used for a client is styled completely in ems and percentages — resize the text and the whole page, including templates, scales to match.

Pixels are nice for fonts and elements because they are exact. It's nice to know that a pixel value is the same across browsers. But Internet Explorer won't resize text defined in pixels, making for bad accessibility.

I tend to use ems for fonts, margins, padding; pixels for element widths and height. Depends on the layout, and whether or not resizing page elements suits the action of resizing text.

Mar 30th, 2007, 12:26 PM
The spacing around text should be relative to the text since it makes things more readable. When text is larger, more surrounding space is required to maintain readability; conversely, when text is smaller, less space is required. That’s why people use ems for things like margins, padding, and text indentation.

Ems also work for font sizes if you want to respect the user’s font size preferences. For normal text, you would assign a font size of 1 em; for headers, which are typically larger than the norm, you might assign a size above 1 em; and, for super and subscript, which is typically smaller, you might assign a font size of half an em. Thus, users with a default font size of, say, 16 pixels will see text relatively larger than users with default font sizes of 12 pixels.