Pixels or Ems in Your Web Designs
Q: What is the practical difference between px (pixel) and em (pronounced m)? When is it best to use one over the other?
The short answer is that pixels measure dimensions relative to the screen while ems measure dimensions relative to type size.
The slightly longer answer is that pixels are the natural unit for measuring dimensions on a screen and are often used when precise design is required. Ems are the natural unit for measuring type and used when you want to allow maximum design flexibility.
Understand relative and absolute unit types
In Web design, sizes can either be expressed in absolute or relative terms. I’ll explain later in this article which to use for a particular situation, but first review the different measurement types and the units at your disposal.
Absolute value units (Table 1) are used to precisely control sizes, so that they do not vary regardless of the particular screen size, browser, or operating system being used. That said, even absolute units can vary between computers, generally because of the operating system. This was the case with point sizes between Mac and Windows.
Table 1 - Absolute Units
|pt||point||72pt = 1inch||12pt|
|pc||pica||1pc = 12pt||1pc|
|mm||millimeter||1mm = .24pc||4.17mm|
|cm||centimeter||1cm = 10mm||.42cm|
|in||inch||1in = 2.54cm||.17in|
Relative value units (Table 2) have no fixed size, but instead are calculated relative to another value, such as the parent elements size or to the screen itself. Although less precise, relative values have the advantage for screen that they can be quickly scaled and changed without having to recalculate all of their dependent values. For example, if you are using relative values to set the font size and line height, simply changing the font size will also change the line height proportionally.
Table 2 - Relative Units
|%||percent||relative to size of parent element||150%|
|em||em||1em = 100%||1.5em|
|ex||x-height||from baseline to top of lowercase x in the font||4.17mm|
|px||pixels||relative to monitors resolution||12px|
Use pixels for precision control, but know that you are taking control from the user
Although it is possible to precisely control the position of elements with any of the absolute units, pixels are the most natural way to define measurements for screen based media. Despite being a “relative” size, pixels behave absolutely in context to the screen resolution, and many modern Web designs will be specified in pixels because it is the most universal measurement regardless of screen size, OS, or browser. Like atoms in molecules, pixels are irreducible as the smallest unit on the screen—you can't move something half a pixel.
While pixels give the designer precise control over where elements appear, they are not without their issues and inconsistencies. Most Web browsers allow users to enlarge text and zoom the page size, which is imperative for anyone with poor vision. Locking the font size with pixels or absolute values prevents Internet Explorer from changing their size. Internet Explorer 7 goes some way in rectifying this limitation by allowing for the entire page to be zoomed, but there is still some debate over their use when accessibility is an issue. So, by using pixels you get precision in your design at the sacrifice of versatility.
Use ems and percentages for fluid design
In order to provide the reader with highest level of control over the content they are viewing, it is increasingly considered a best practice to define sizes (both font sizes and other length measurements) using ems.
The em is the fundamental unit of measurement in typography, defined as the size of the type as computed relative to the current size of the type of the parent element. For example, if you set the font size of your Web page to 12px, then:
If you change the font size to 14px, then:
So, really, ems work like percentage values for the purpose of font sizing. However, percentage and ems work differently for margins and padding, with percentages being based on the parent width or height and ems being based on the parent font size.
One reason that ems are not generally a popular solution for general use becomes obvious: since their computed size is relative to their parents size, you have to keep track of the current parent size to know how large or small an element will be. That said, one advantage to this is that it makes creating a typographic scale more straightforward and easier to scale.
Despite their complexity, though, the advantage of using ems is that you can quickly change the scale of your design by simply changing a single font-size value. Since they are relative to the parent’s font-size, changing the parent’s value changes the values for all of its children. Additionally, since some older browsers, most notably IE 6, will not re-size text set in pixels, using ems guarantees that all of your readers get the same experience.
So, which should I use?
The bottom line is that your decision to use pixels or ems depends on whether you want precise control or a fluid layout. Pixels will place elements exactly where you want them, but will not adjust to the needs of the viewer. Ems will adjust to the screen context, but are harder to control and less predictable.
I recommend keeping your use of the units consistent within a document to avoid confusion, even if you are using both ems and pixels for different purposes. For example, I will often use pixels for positioning of elements, but ems for font sizes, so that I can get the advantage of creating a more versatile typographic scale.
Parts of this article appear in Jason’s new book, Fluid Web Typography. Jason is also the author of over 13 book on digital media, including Speaking In Styles: The Fundamentals of CSS for Web Designers.
Follow Jason on Twitter:@jasonspeaking .