Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Pew Pew Laser Blog Archives — by Blog ID

Pixels versus Ems.


In CSS, pixels are an easy-to-understand unit of measurement. A pixel is the smallest possible display unit on an electronic device. The most common computer screens are 1280 pixels wide, and 1024 pixels high. Both the iPhone and Pre have a 480 by 320 pixel screen. Pixels are best used when precise positioning of elements is required - such as with images.

Let's take a moment to consider the full implications of a common practice: using pixels to specify text size on a web page. As manufacturers continue to develop monitors with more pixels, the physical screen dimensions tend to stay the same. Therefore, it appears that pixels (or font sizes declared in pixels) are getting smaller, and more difficult to read.

EMs are a little trickier to grok. Ems are relative to the current text size. To quote Robert Bringhurst:

The em is a sliding measure. One em is a distance equal to the type size. In 6 point type, an em is 6 points; in 12 point type an em is 12 points and in 60 point type an em is 60 points. Thus a one em space is proportionately the same in any size.
Ems are best when specifying text size and spacing where you want the user to have the ability to read your content with the text size that's best for them. Font sizes specified with ems will respect operating system or browser changes to default font size that the user has made.

You should avoid using ems when slight variances in size would cause layout problems - such as if a floated item were bumped out of place. Small text size differences may exist even between two computers with the exact same browser and operating system.


Tags: css

Authorized users may log-in to leave a comment.

Last Blog: A Mythbusters Limerick.

Next Blog: The Correct Use of "Literally".