Pixel density

Screen pixel density and resolution vary depending on the platform.


Pixel density

The number of pixels that fit into an inch is referred to as pixel density.

Screen density variations

High-density screens have more pixels per inch than low-density ones. As a result, UI elements of the same pixel dimensions appear larger on low-density screens,...

High-density screens have more pixels per inch than low-density ones. As a result, UI elements of the same pixel dimensions appear larger on low-density screens, and smaller on high-density screens.


Calculating pixel density

To calculate screen density, you can use this equation: Screen density = Screen width (or height) in pixels / Screen width (or height) in inches

To calculate screen density, you can use this equation:

Screen density = Screen width (or height) in pixels / Screen width (or height) in inches

High-density display
Lower density display

Density independence

Density independence refers to the uniform display of UI elements on screens with different densities.

Density-independent pixels

Density-independent pixels, written as dp (pronounced "dips"), are flexible units that scale to have uniform dimensions on any screen. They provide a flexible way to...

Density-independent pixels, written as dp (pronounced "dips"), are flexible units that scale to have uniform dimensions on any screen. They provide a flexible way to accommodate a design across platforms.

Material UIs use density-independent pixels to display elements consistently on screens with different densities.

1. Low-density screen displayed with density independence
2. High-density screen displayed with density independence

Pixel density on Android

When developing an Android app, use dp to display elements uniformly on screens with different densities.

Dps and screen density

A dp is equal to one physical pixel on a screen with a density of 160. To calculate dp: dp = (width in pixels *...

A dp is equal to one physical pixel on a screen with a density of 160.

To calculate dp:

dp = (width in pixels * 160) / screen density

Screen physical width Screen density Screen width in pixels Screen width in dps
1.5 in
1.5 in
1.5 in
120
160
240
180 px
240 px
360 px
240 dp

Scalable pixels (sp)

Scalable pixels (sp) serve the same function as density-independent pixels (dp), but for fonts. The default value of an sp is the same as the...

Scalable pixels (sp) serve the same function as density-independent pixels (dp), but for fonts. The default value of an sp is the same as the default value for a dp.

The primary difference between an sp and a dp is that sp's preserve a user's font settings. Users who have larger text settings for accessibility will see font sizes match their text size preferences.


Pixel density on iOS

iOS determines density using logical resolution, which measures its units in points.

Logical resolution

With logical resolution, points are scaled using a Native Scale factor, which map to a device's native resolution (in pixels). For example, when designing for...

With logical resolution, points are scaled using a Native Scale factor, which map to a device's native resolution (in pixels).

For example, when designing for the iPhone X, you would design for a logical resolution of 375 x 812 points. When rendered, elements are processed by the graphics hardware to fill the iPhone X's 1125 x 2436 pixel screen.


Units for iOS

When designing for iOS, use points (pts). Learn more:

When designing for iOS, use points (pts).

Learn more:


Pixel density on the web

Logical resolution

Use the device's logical resolution, which scales to the device's screen resolution.

Units for the web

When designing for the web, replace dp with px (for pixel).

Up next