The topic of pixels and points is a cause of confusion for designers in creating designs for mobile. Let us dissect this for you as this is extremely important in mobile design.
A pixel refers to the smallest unit that makes up what you see on screen. It is a physical unit and screen resolutions refer to the number of pixels on your device’s screen. Pixel density is the number of pixels in a physical amount of space, often an inch on your screen.
When Apple released iPhones with a retina display back in 2010, they managed to double the pixel density on their retina display, i.e. the pixel dimensions were doubled within the same amount of physical space on your screen. This resulted in razor-clear images on your iPhones. Android followed through with their own high-density screens.
As a result, designers had to cater to 2 different sizes for mobile namely, 1x and 2x pixel densities. A banner at 200 pixels tall on 1x had to be 400 pixels tall on a different device at 2x. There was no unit of measurement for these pixels that was density independent.
Enter points. A point is an abstract form of measurement for iOS devices, referred to as DIP (Density Independent Pixels) on Android. With points, designers simply design a banner at 200 points tall, and the multiply it by the pixel density of the device it is being displayed on i.e. banner dimension of 200px on 1x and 400px on 2x.
Where possible, build your design on vectors in the 1x dimension, and export it accordingly for the different pixel densities at 100% (1x), 200% (2x) and 300% (3x) etc. This is much easier than designing individual banners for each pixel density.
Explore Our Work
View our portfolio