Pixel

‘Pixel’ is the abbreviation of the word Picture Element (Pi x El ). It is the smallest square block (element) of color that forms an image on a screen.

‍

‍

Up until 2010, a pixel meant a pixel, it was measurable and life was easy.

‍

Before the iPhone 4’s retina display, the number of pixels that could fit on a square area of 1 inch was 163 pixels. It was fixed or at least was the standard.

All that changed when the iPhone introduced retina display. An inch of a retina display could now house 326 pixels. And as it is a convention, other companies started following suit with crazy pixel counts included per inch of screen.

‍

‍

Here’s where all the problem started-

Say you designed a button 2 pixels high and 4 pixels wide, the size would now vary hugely depending if your website or app is viewed on a phone screen with 163 pixels per inch or 326 pixels per inch display. You would now have to make the design over and over again every time for a range of devices with the same sizes, let alone different aspect ratios.

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

Apple solved this problem by introducing the Point (pt)

A point was defined to be exactly equal to a pixel when it was viewed on the original iPhone. i.e 1 px = 1 pt when viewed on a screen of density 163 pixels/inch. As different versions of the iPhone came with different screen resolutions, iOS would then internally convert the points to pixels to make a button look the same size no matter how many pixels fit in an inch of the screen.

‍

‍1 pt = (ppi of your sceen/163) px

‍

A designer could now design a 4 x 2 pt button and they would look the same everywhere.

‍

‍

Android did a similar thing with their density-independent pixels (dp)

While Apple did it first, it became even more important for Android to come up with a measurement unit, that did not depend on the number of physical pixels in an inch, as it was used in anything ranging from a smartphone to a refrigerator. Hence, they introduced the density-independent pixel or dp. A dp in concept is the same as the Apple pt. The only difference being that a dp uses 160 pixels/inch as a base.

‍

‍1 dp= (ppi of your sceen/160) px

‍

‍What we talked about so far was about physical pixels. This is not to be mistaken with the CSS pixel (logical pixel) used by websites or the px measure you use on Figma. Similar to the definition of pt and dp, a CSS pixel (logical pixel) is exactly equal to a physical pixel when viewed on a screen with 96 pixels/inch, at an arm’s length.

‍

Similar to the definition of pt and dp, a CSS pixel (logical pixel) is exactly equal to a physical pixel when viewed on a screen with 96 pixels/inch, at an arm’s length.

‍

But there is a major difference here -

An arms-length is very arbitrary (different people have different arm lengths) and the definition of a pixel has more to do with the design and visibility of elements on a screen rather than physical pixels or standard measures of length, say inches or centimeters.

‍

Let us simplify it further:

‍

A logical pixel could be defined as the smallest dot that could be viewed on a screen by a user without strain. So, a line of height 1px could comfortably be considered the thinnest and clearest line that could be drawn on a screen.

‍

However, for or all practical purposes, a CSS pixel is equal to a physical pixel when viewed on a screen with 96 pixels/inch.

‍

‍

‍

‍