Dustin Curtis is a superhero.

dustincurtis.com

Dustin Curtis is a superhero
 

iPhone 4: Who cares about pixel density? It's about interface definition.

Edit below

There has been a lot of discussion about the pixel density in iPhone 4’s Retina display, but most of those discussions are missing the point. The Retina display isn’t revolutionary because of pixel density — some Android phones have featured almost 300ppi for months. iPhone 4 is revolutionary because it has increased interface definition.

For the past twenty years or so, almost all screen-based user interfaces have been calibrated around a single point of reference — about 72 pixels per inch (which was determined by the first mass-produced CRT screens, which had that pixel density). Every interface element drawn on the screen in Windows or Mac OS X takes up a certain definite number of pixels that remains constant no matter how many pixels the screen has. Every element on the screen is designed to look decent when the screen has about 72 pixels per inch.

This means that if you draw the letter “a” in 12pt Helvetica on any screen, it will take up exactly 8x9 pixels (almost all the time). As you increase the number of pixels on the whole display, the number of pixels that it takes to draw the letter “a” in 12pt Helvetica stays the same, the letter just becomes smaller. As you increase the number of pixels on the screen, the amount of room you have for displaying stuff increases, but the interface definition stays the same.

iPhone 4’s operating system doesn’t work this way. It decouples the density of the pixels on the screen from the visual interface that it draws. Because OS X is built from the ground up to be resolution independent, all the default iOS interface elements are already vectorized graphics (PDFs, to be specific). This means that when iOS scales the elements in physical size to fit the 3.5-inch iPhone 4 screen, they take up the same amount of space as the elements drawn on the iPhone 3GS but they use four times the number of pixels.

Because so many more pixels are being used to render the same sized graphics, the definition increases to levels no one has ever seen before — because almost all screens have been calibrated at 72 pixels per inch. The letter “a” in 14pt is actually drawn with 16x18 pixels, meaning its curves and edges are far better defined.

iPhone 4’s Retina display isn’t really about the physical pixels (although they are necessary); it’s about increasing the definition of the interface as it’s drawn on the screen.

You should follow me on twitter here.


Android has some support for resolution independence, but it is not system-wide. The operating system itself enlarges most of its own elements, but because most apps are not built for random pixel densities, they generally do not look stunning.