This is an update of a post that originally appeared on October 23, 2013.
There are ways today of avoiding any thought of what units of measure the Web page you’re working on uses. For example, I use products like WordPress all the time now to make the task of creating content quickly a lot easier. I don’t ever think about the units of measure I’m using when working with these products. However, when designing an interface for an Android or C# application (as examples), I sometimes do need to think about units of measure because I’m more intimately involved in the user interface design process. Today, applications need to work everywhere on a large number of devices, all of which have different characteristics, so units of measure can become an issue. So, it’s entirely possible that you could create a nearly unlimited amount of content for a website without ever worrying about units of measure, but this blog post is for those times when it does matter.
Some units of measure work better than others do in obtaining a specific result. For example, when you specify placement in pixels (px), you tell the browser to define element placement with regard to the physical units of a display. This is the most precise, yet least flexible, method of defining units of measure. In addition, it can create issues with mobile devices because these devices typically don’t offer that many pixels of display area and may not allow scrolling of information that doesn’t appear in a single screen (the part that appears to the right and toward the bottom of the page).
More flexible units of device-specific measure include the inch (in), centimeter (cm), and millimeter (mm). In this case, the browser converts the measurement to pixels using the device’s conversion metric. For example, a typical PC display uses 96 pixels-per-inch. However, the user can change the metric so that an inch could consume 120 pixels instead (making the elements larger than normal). Whether this flexibility solves the problem of working with mobile devices depends on the mobile device and the metric it uses to convert physical units to pixels.
Besides device and physical measures, you can also use printer’s measures that include the point (pt) and pica (pc). These units of measure theoretically work the same as physical measures because a point is 1/72nd inch and a pica is 12 points (or 1/6th inch). In reality, it’s possible that a browser will convert the units of measure based on the size of the fonts that the device uses. However, you can’t count on this flexibility and must assume that these printer’s measures are simply a different kind of physical measure.
Fortunately there are two units of measure that are guaranteed to reflect the size of a font on the display. The em is a measure of the actual font size. One device may use a 12 point font while another device uses a 10 point font. An em will equal 12 points on the first device and 10 points on the second device without any modification of the code on your part. This feature makes the page quite flexible and usable with any device. The other unit of measure is the ex, which is the measure of the x-height of a font (the median of all of the characters in a particular letter set). As with the em, the ex automatically scales to consider the point size of characters used by a particular device.
All of the units of measure so far are absolute. You place elements on a screen in a precise position. Modern Web design dictates that pages employ Responsive Web Design (RWD) to ensure that the page will work on any device. A part of RWD is to use relative placement wherever possible so that the page and its elements automatically resize to meet the needs of a device. You use the percentage (%) unit of measure in this case, where an element uses a percentage of the available space, whatever that space might be. Of course, this approach means that all devices see the entire page. However, a disadvantage of this approach is that the elements might be so small on some devices as to make them unusable.
The article, CSS values and units, provides you with more information about units of measure as they apply to Cascading Style Sheets (CSS). These guidelines generally apply to other working environments as well. What are your thoughts about units of measure? Which do you use most often? Let me know at [email protected].
