Design basics: Measurements

Introduction

In this post I want to talk a bit more about different kinds of measurements. When you are working on a design, website or user-interface it’s good to know the basic measurements. But there are so many and what exactly are they?

Most of my blog readers are also developers and I would like to share some of my knowledge I have learned in the past years. So although this post might be about design basics, it is written with my audience in mind.

Pixels (PX)

Every computer display is made out of pixels. If we would zoom into our screen real close we would see some sort of raster. Each pixel can display a color, this color is made out of red, green and blue light and by mixing them together they form the actual color.

When identifying the resolution of a display we measure this in pixels. For example a display may have the resolution of 1680 x 1050, this number is written in horizontal pixels x vertical pixels. So in this example we have 1680 pixels horizontal and 1050 pixels vertical.

Bitmaps

When working with graphics on a computer these are stored in memory as a bitmap. (Note that when storing a graphic on disk you might use a compression like jpg or png) These bitmaps are just one large chunk of memory representing the pixels of the graphic. Depending on the color depth each pixel is stored as 1 or more bits, but in most cases 1 or more bytes.
Consider a bitmap as a large array of bytes. If we are working with an 8 bit graphic every pixel is exactly 1 byte, 16 bit would be 2 bytes etc. So the color depth of a graphic will change the size of memory needed to store the bitmap in memory. (Use this knowledge to your advantage when trying to reduce the memory usage of your applications.)

When zooming in to a picture real close the pixels become visible.

When zooming in to a picture real close the pixels become visible.

As I mentioned the bitmap is made out of pixels just like a computer screen would be. To make matters a bit simpler for developers most development frameworks will have some sort of bitmap classes to help you identify the pixels, these will let you manipulate the pixels in an X, Y grid. (X stands for horizontal axis and Y is the vertical axis)

If you are creating material that will need to be printed in magazines or flyers, its good to know most magazines require the source image to be at least 200 PPI. I Myself normally create the designs at 300 PPI or higher. These companies have very high quality printing equipment so your image will look sharper in a higher resolution. For your home printer you should be fine creating your images in 200 or 300 PPI, please note that a printer may need multiple dots to render one pixel so if you are printing your images on high resolution paper just use the highest DPI value on your printer for the best result.
Some design software can calculate the size of a new image depending on the PPI value and size in centimeters or inches. If you need to calculate the size yourself you can use the following formula:

wp = wi * PPI
hp = hi * PPI

wp = width in pixels
wi = width in inches
hp = height in pixels
hi = height in inches

If you are using centimeters you need to multiply your cm with 2.54 to convert to inches.

Pixels are an absolute measurement, for example if a graphic has a height of 10 pixels it will be exactly 10 pixels on all screens. Screens may vary in size and resolution so 10 pixels on screen A might be smaller in inches than 10 pixels on screen B.

Pixels per inch (PPI)

Computer displays vary in size and resolution. Some might be the exact same size in inches but have a different resolution. The density of the pixels of a display is measured in PPI. PPI stands for pixels per inch. The higher the density the smaller each individual pixel is.

If we would have a screen of a width 10 inches and a resolution of 1000 pixels in width. The density of the screen would be 1000/10 = 100 PPI. Now if we have a screen of 20 inches in width with a resolution of 2000 horizontal pixels the density of the screen would be 2000/20 = 100 PPI. So although the total pixels of the second screen might be much higher, the density of both screens are exactly the same and therefor an image of 10 pixels wide would be exactly the same width in inches on both screens.

For the example above I have used a crude way of calculating the PPI value. The correct way is to use the number of pixels divided by the diagonal size of the screen in inches. If we have a screen with a diagonal of 17 inches and a resolution of 1680×1050 we would calculate the PPI like this:

dp = √(1680² + 1050²) = 1981
PPI = dp / di = 1981 / 17 = 116,5

dp = diagonal in pixels
di = diagonal in inches

Our screen has a density of 116,5 PPI.

Dots per inch (DPI)

Looked up close you can see the dots in this print.

Looked up close you can see the dots in this print.

In the modern world of printing images are printed with small dots of colors. The density of these dots are measured in DPI (dots per inch).

Printing materials are often looked at very close range. The closer the eye is to the printed material the easier it would be to see the individual dots. For this reason big banners will be printed at a lower density than a magazine.

Now there is some confusion when using the terms DPI and PPI. They are very similar and therefor a lot of the times computer monitor density will be stated as DPI in the specifications. Also other densities like a scanner or optical mouse will also be measured either DPI or PPI. Wikipedia states that all input is measured in PPI and all output as DPI, but in the real world you will see both being used. The only rule manufacturers are agree to is that printed material is measured in DPI, which makes sense since one pixel might need multiple dots to render the correct color in printing. As far as computer displays or other devices it’s very common to see the term DPI instead of PPI.

Points (PT)

A Point is a measurement for printed text sizes. 12 Points is one pica and that corresponds with 1/6 of an inch.

Software that edits text that will be printed use points as measurement, for example Microsoft Word. When you print out your document the text will be exactly the size specified. But when displaying the text on screen there is an issue. This problem go’s back to the early years of home computers, the software at that time did not know the exact PPI value of the computer monitor, and so could not scale the text exactly to the correct size. Because if you do not know how many pixels there are in an inch you can not calculate how many pixels it would take render a text in a certain point size. Most monitors of that time were about 72 PPI. Now the problem with 72 PPI is that it’s a very low density to render fonts nicely. So Microsoft used 96 PPI in Windows, therefor everything would be drawn a bit bigger that the actual size and on modern monitors smaller. Apple used 72 PPI. This virtual PPI value of 96 is still used today, that’s why a 12pt text might look bigger or smaller on two different monitors.

Use PT only when working with material for printing.

Ems (EM)

An Em is a term used for text sizes in printed text. This term is now also being used in web design. An EM is a measurement of text size depending on the base text size. So if the basis text size is 12 pt, one em is 12 pt, 2 em is 24 pt and 0.5 em would be 6 pt. Its a relative measurement and changes when the base text size changes.

In web design the EM measurement is very useful. Because of it’s relative feature you can easily create adaptive layouts. When you set the size of the font in the body you can use EM measurements for all other fonts. For example a headline could be 1.5 EM making it 1.5 times the size of the body text. Ems in websites are always relative to their parent and cascade. Here is a small list to explain:
Document 10 pt
Document – > Child1: 0.5em = 5pt
Document – > Child2: 0.4em = 4pt
Document – > Child2 – > Child 3: 0.5em = 2pt

Root EM (REM)

Sometimes the cascading effect of using ems can be unwanted when creating a web page. For this problem CSS 3 introduced a new measurement called REM (root em). This behaves exactly like an EM but always references to the document base font. If we would use the same example list as before you can see the effect.
Document: 10 pt
Document – > Child1: 0.5rem = 5pt
Document – > Child2: 0.4rem = 4pt
Document – > Child2 – > Child 3: 0.5rem = 5pt

As you see child 3 now has the same text size as child 1. Be aware not all browsers support the REM measurement.

Android

The Android available hardware is very fragmented, there are many screen sizes and resolutions. But lucky for us Android has some of the best sizable units for us to use. In this chapter I will cover some important measurements for the Android platform.

Density independent pixel (DIP)

The most important measurement on the Android platform is the density independent pixel or short DIP or DP. This measurement scales depending on the screen density. Where one DP stands for one pixel on a 160PPI screen. The developers reference states the following formula:

px = dp * (dpi / 160)

px = Pixels
dp = Density independent pixels
dpi = Screen density (they mean PPI)

Now when you look at this formula you would say this sizes exactly the same as the inches or millimeter measurement (those are also available on Android) so what’s the benefit of using DP? Well it seems the developers reference is a bit short in their description and the formula is not exactly right. Because Android really calculates the actual pixels in steps. 1 DP on a 150 PPI screen might be the exact same amount of pixels as on a 160 PPI screen. Why is this?
Lets start with the correct formula:

px = dp * DisplayMetrics.density

Let’s take a closer look at DisplayMetrics.density. This is what the developers reference has to say about this field:

“The logical density of the display. This is a scaling factor for the Density Independent Pixel unit, where one DIP is one pixel on an approximately 160 dpi screen (for example a 240×320, 1.5″x2″ screen), providing the baseline of the system’s display. Thus on a 160dpi screen this density value will be 1; on a 120 dpi screen it would be .75; etc.

This value does not exactly follow the real screen size (as given by xdpi and ydpi, but rather is used to scale the size of the overall UI in steps based on gross changes in the display dpi. For example, a 240×320 screen will have a density of 1 even if its width is 1.8″, 1.3″, etc. However, if the screen resolution is increased to 320×480 but the screen size remained 1.5″x2″ then the density would be increased (probably to 1.5).”

What they are saying is that the factor to which the actual pixels are calculates is created in steps. Why is this so important? Well by using steps the calculation will ignore small screen variations. Let’s say we have two devices, both with the exact same resolution in pixels but one screen is just a little bigger than the other. If the size of the layout would be calculated to the exact PPI value the app would look different on both devices, but as an app developer we don’t want the app too look different on devices with small screen variations. So by using these steps they are ignoring the small variations and so limiting the number of variants of your layouts.

It’s all a bit complicated, so I have created a few mockups to illustrate the effect. In this example I will be using three devices, the first one is our base device with a medium resolution. The second device has the exact same resolution in pixels as the first device but the screen is a bit smaller in inches. The third device has the same size in inches as the first one but has a PPI that is twice as high as our first device.

Layouts with PX

When using PX the second device shows a correct layout. But a PX size does not scale and so the third device with a higher PPI will display a layout with too small elements.

When using PX the second device layout is correct. But the layout on the third device is too small.

When using PX the second device layout is correct. But the layout on the third device is too small.

Layouts with IN or MM

When using a real size like inches or millimeters the layout will scale to the exact size. But this might be unwanted for small variations. The higher PPI device has a correct layout in this example, but using inches as size will make the UI elements too large on our second device and leave less room for the app to use. You can see the effect clearly on the body text.

When using inches or mm the third device layout is correct, but the second device layout is too large.

When using inches or mm the third device layout is correct, but the second device layout is too large.

Layouts with DP

In our final example we are using the DP for sizes. Now all three devices show a correct layout.

When using DP all three layouts are correct.

When using DP all three layouts are correct.

Using DP will give you the best result in most cases and should be used as default measurement when developing for Android. Note that the images used to illustrate the DPI workings are not real mockups, on real devices the result may not be as perfect as shown here.

Scale-independent Pixels (SP)

Scale-independent pixels are used for text sizes in Android. This size specification works almost the same as density independent pixels but adds one extra parameter when scaling. On an Android device the user can set the text size to larger or smaller than default. This setting can help people with visual limitation to read the text more easily. SP takes this setting in account and scales the text accordingly.

When using SP with text your app does not know the exact size of the text beforehand, to make sure your layout scales correctly use wrap_content for layout heights or widths that should size with the text.

Conclusion

In this post I have shown the most used measurements when working with digital designs. If you like you can bookmark this page to use as a reference for later. You can also read my other post on design and/or subscribe to my blog for future posts.

Leave a Reply

Your email address will not be published. Required fields are marked *