Absolute Units

We’ve had our absolute units since CSS began, and they are most useful to us when the output format is known.

The CSS Layout Workshop: Absolute Units

We’ve had our absolute units since CSS began, and they are most useful to us when the output format is known. If you create a print stylesheet for a website and especially if you work with the CSS specifications for creating printed books, you’ll become familiar with working with real-world units such as in for inches.

The units mm (millimeter), cm (centimeter), in (inch), pt (point) and pc (pica or 12 points) are not units you would be recommended to use for CSS layouts for screen use. So we’ll concentrate on the px pixel unit here.

What is a pixel?

Good question! We tend to think about pixels as being a single dot on a screen. However, as with many things in CSS, it turns out to be a bit more complicated than that.

The CSS specification (both CSS2 and the CSS Values and Units Level 3) says,

“The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch). ”

It turns out that px is actually a visual angle unit, for a technical explanation of what that means see this article. More importantly though in a world of high resolution devices we need to understand the difference between a hardware pixel and the reference pixel that our CSS is using.

Hardware pixels

A hardware pixel is a physical point on the screen, the smallest point that could be displayed. It can’t change size or be zoomed. Working with a non “retina” screen the reference pixel and the hardware pixel appear the same. If we use CSS to draw a box on the screen that is 200 pixels wide and 200 pixels in height, that would directly map to our hardware pixels.

If a “retina” or high resolution display was to draw the box using the same hardware pixels then it would appear to be half the size we expected. On a high resolution display the hardware pixels are smaller, and the number used doubled. There are more “pixels per inch”, and so what happens is the actual reference pixel that is used to draw the box is now two hardware pixels. This achieves a box of the size we were expecting but also means that the display looks smoother and crisper, you can’t see the individual pixels.

The reference pixel

We’ve learned that the reference pixel is a pixel that is visually consistent to what we expect. It might contain 2 or 3 or more reference pixels depending on the pixel density of the display we are using.

Where you tend to need to care about this is when you use images in your designs. The rest of the time the hardware is taking care of this mapping of hardware pixels to reference pixels. When you use images you might decide to create multiple versions of icons - for retina and non retina displays. Or use SVG instead, as this scalable format makes more sense with displays that double the number of pixels used to display an image.

Pixels in CSS layout

When you use a pixel measurement you fix the size of the element on screen. Below I have created a container in which I might place a site design, giving it a width of 940 pixels. If the user stretches their screen wide they will get a lot of empty space to the right of the container, if the screen is smaller than 940 pixels then they will get a scrollbar.

<div class="wrapper">
    <p>This div is set to 940 pixels width.</p>
</div>
.wrapper {
  width: 940px;
}

An absolute unit therefore isn’t ideal if we are trying to create a fluid grid for a responsive design.

We might want to use pixels however if it makes sense for an element to be a particular size in a component we are building. For example you might have a fixed size image such as a logo and want the text beneath it to line up neatly below the image.

In my first example I demonstrated the problem of a fixed size container creating a scrollbar. However it can be useful to declare a size past which a container will not grow.

In this example I have given my container a width of 90%, a length unit relative to the container which happens to be the viewport. So we don’t get a scrollbar. To stop the container growing too wide, making lines hard to read, I set a max-width in pixels.

<div class="wrapper">
    <p>This div is set to 90% of the viewport to a maximum of 940 pixels width.</p>
</div>
.wrapper {
  width: 90%;
  max-width: 940px;
}

When to use absolute length units?

As we have seen you should avoid using absolute units when your aim is to create a flexible and responsive site. However they can be useful in components when you know you do not want the area to stretch. They can also be helpful in defining max and min widths to stop areas becoming too narrow or too wide.

Next lesson: Relative Units