Density & resolution

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,...

Read More

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

Read More

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...

Read More

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 *...

Read More

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

120

180 px

240 dp

1.5 in

160

240 px

1.5 in

240

360 px

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...

Read More

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...

Read More

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:

Read 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).