Density

Material Design uses low-density space by default (with large tap targets and margins) but offers high-density space when it improves the user experience.


Usage

Density principles

Dense UIs improve browsing and interaction with large amounts of content. Dense UIs help users focus by reducing space between actions. Density exposes more content...

Read More

Scannable

Dense UIs improve browsing and interaction with large amounts of content.

Prioritized

Dense UIs help users focus by reducing space between actions.

Available

Density exposes more content and actions on a single screen.

When to apply density

Whether to increase your UI’s density can be determined by how users interact with a component. Components with high density enable users to process and...

Read More

Whether to increase your UI’s density can be determined by how users interact with a component.

Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.

  1. Default density, 48dp row height
  2. High density, 32dp row height
  1. Default density, 56dp text field height
  2. High density, 44dp text field height

Apply density consistently to a component and any components nested within it.

  1. Default density, 40dp row height, and 36dp action height.
  2. High density, 32dp row height, and 24dp action height.

When not to apply density

Don’t apply density to components that involve focused tasks, such as interacting with a dropdown menu or picker. Increasing density on these components reduces their...

Read More

High density should not be applied to task or alert-based components.

Focused tasks

Don’t apply density to components that involve focused tasks, such as interacting with a dropdown menu or picker. Increasing density on these components reduces their usability.

Don’t.

Don’t apply high density to a date picker, as this reduces usability.

Alerts and messaging

Don’t apply density to components that alert the user of changes, such as snackbars or dialogs. Applying high density to alerts reduces their ability to command attention.

Don’t.

Don’t apply high density to dialogs, which reduces their readability and prominence.


Layout

Grid and component density

To create more scannable groups of content, use a less-dense grid layout with high-density components. The higher the density of components, the larger their margins...

Read More

To create more scannable groups of content, use a less-dense grid layout with high-density components. The higher the density of components, the larger their margins and gutter widths should be.

High-density component row height, with wide margins and gutters

Default density component row height, with narrow margins and gutters

Don’t.

Don’t use both a dense layout grid and dense components, as this will make it difficult to differentiate content groups.


Touch and click targets

Touch target specs

Touch targets apply to any device that receives both touch and non-touch input. To balance information density and usability, touch targets should be at least...

Read More

Touch targets apply to any device that receives both touch and non-touch input. To balance information density and usability, touch targets should be at least 48 x 48 dp, with at least 8dp of space between each target.

Touch target minimum of 48 x 48 dp

There are some edge cases when touch target sizes must be smaller than the recommended minimum 48dp.

  1. Smaller touch targets for links within a paragraph.
  2. Smaller touch targets for a date selection in picker.

Applying density

Default density in a list

Do.

In this high-density list, the minimum space (48px) is defined by the tap target on each list item.

Don’t.

Don’t use less than the minimum touch target size of 48dp for touch devices or devices that support both touch and click input methods.

Click targets

On non-touch UIs, click targets should be at least 24 x 24 dp, with at least 8dp of space between each target.

Read More

On non-touch UIs, click targets should be at least 24 x 24 dp, with at least 8dp of space between each target.

Click target minimum 24 x 24dp

Applying Density

When using high-density icons (18dp), the minimum space (24px) is defined by the click target.


Typographic density

Line height

Line height is the space between lines of text. Line height can be used as a way to create density in typographic layouts. When tightening...

Read More

Line height is the space between lines of text. Line height can be used as a way to create density in typographic layouts. When tightening line height be sure to still use the 4dp baseline grid.

  1. Larger line height
  2. Smaller line height