Layout chevron_right Metrics & keylines

Metrics & keylines

Baseline grids Expand and collapse content An arrow that points down when collapsed and points up when expanded.

All components align to an 8dp square baseline grid. Type aligns to a 4dp baseline grid. Iconography in toolbars align to a 4dp square baseline grid. This applies to mobile, tablet, and desktop.

Example of baseline grid

Example of baseline grid

Example of baseline grid

Example of baseline grid

Example of typography in a baseline grid

See detailed information on typography.

Keylines and spacing Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Mobile

The mobile layout template includes a wide variety of screens and information about how keylines and spacing work across screen edges and elements. Here is a sample of the screens included in the download.

List

Layout

A two-column, left-aligned list with a 56dp floating action button.

Keylines and margins

Screen edge left and right margins: 16dp
Content associated with an icon or avatar left margin: 72dp
Horizontal margins on mobile: 16dp.

Vertical spacing
  1. Status bar: 24dp
  2. Toolbar: 56dp
  3. Subtitle: 48dp
  4. List item: 72dp

List with subheadings

Layout

A two-column list, subtitle, and right-aligned icons, with a 40dp floating action button.

Keylines and margins

Screen edge left and right margins: 16dp
Content left margin from screen edge: 72dp

Vertical spacing
  1. Status bar: 24dp
  2. Toolbar: 56dp
  3. Title and list items: 72dp
  4. Subtitle: 48dp
  5. Space between content areas: 8dp

Detail view

Layout

A detail card with a 56dp floating action button.

Keylines and margins

Screen edge left and right margins: 16dp
Content left margin from screen edge: 72dp
Right-side icons align 32dp from the right edge to coordinate with the floating action button.

Vertical spacing
  1. Status bar: 24dp
  2. Toolbar: 56dp
  3. Space between content areas: 8dp
  4. List item: 72dp

Mixed content

Layout

Icons, avatars, and text align on the left. A floating action button, icons, and text align on the right.

Keylines and margins

Icons alignment from left and right edges: 16dp
Content associated with an icon or avatar left margin: 72dp

Vertical Spacing
  1. Status bar: 24dp
  2. List items: 56dp
  3. Subtitles and list items: 48dp
  4. Space between content areas: 8dp

Navigation drawer

Layout

A side navigation menu with icons, avatars, and text aligned on the left. Other icons align on the right.

Keylines and margins

Screen edge left and right margins: 16dp
Content associated with an icon or avatar left margin: 72dp
Side nav width: The screen width minus the height of the action bar. Here, the width is 56dp from the right screen edge.

Vertical spacing
  1. Account menu and list items: 48dp
  2. Space between content areas: 8dp
  3. Navigation right margin: 56dp

Tablet

The tablet layout template includes 14 different screens and shows how keylines and spacing work across screen edges and elements. Below is a sample of the 14 screens included in the download.

List with detail view

Example of tablet layout

Keylines and margins

Screen edge left and right margins: 24dp
Content left margin from screen edge: 80dp
Card left and right padding: 24dp
Card content left padding: 104dp

Vertical spacing
  1. Status bar and space above list: 24dp
  2. List item: 64dp
  3. Space between content areas: 8dp
  4. List item: 72dp

List with detail view

Example of tablet layout

Keylines and margins

Screen edge left and right padding: 24dp
Icons’ vertical center distance from screen edge: 52dp
Nav item left padding from screen edge: 104dp
Content left margin from screen edge: 80dp
Card left and right padding: 32dp
Card nav item left padding: 96dp

Vertical spacing
  1. Status bar: 24dp
  2. Toolbar and list item: 64dp
  3. Space between content areas: 8dp
  4. Subtitle, list item, and slider: 48dp
  5. Title: 80dp

Desktop

The desktop layout template includes four different screens, each with four different window sizes, and shows how keylines and spacing work across windows and elements. Based on the window size, the keylines and spacing blocks will inherit grid rules from both tablet and mobile. Here is a sample of a screen available in the download.

Desktop full screen

Resized windows

Ratio keylines Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Specific aspect ratios, or the proportion of an element’s width to its height (written as width:height), apply to both UI elements and mobile screen sizing. The following keyline images depict these recommended ratios:

  • 16:9
  • 3:2
  • 4:3
  • 1:1
  • 3:4
  • 2:3

Applicable to mobile, tablet, and desktop.

For example:

  • For a 1:1 aspect ratio, an element has equal height and width.
  • For a 2:3 aspect ratio, an image 360dp wide (full-screen) would have a height of 540.

Use one of the aspect ratios above to determine the appropriate width or height of your element:

Width = Aspect ratio * Height

Height = Width/Aspect ratio

(In both formulas, the aspect ratio is expressed as a fraction. For example, 3:2 becomes 3/2, and 16:9 is 16/9).

Screen width

 

Example of screen width on mobile

Element width

Example of element width on mobile

Incremental keylines Expand and collapse content An arrow that points down when collapsed and points up when expanded.

An incremental keyline defines an increment, like the height of the action bar, and uses a multiple of that increment to determine the size and position of other elements in the app.

Incremental keylines apply mostly to desktop, often to tablet, and rarely to mobile. The number of increments varies based on window size.

The space allocated for a hero image has a vertical increment of 3x.

This example card width has a horizontal increment of 8x.

The height of the example extended app bar is 2x the increment, and the width of the right panel is 5x the increment.

Increments can work across many elements in Material UI.

Touch target size Expand and collapse content An arrow that points down when collapsed and points up when expanded.

To ensure usable apps, touch targets should be at least 48 x 48 dp. In most cases, the space between touch targets should be 8 dp or more.

Keep this in mind when spacing icons (24dp) or avatars (40dp) in a layout. The touch targets shouldn’t overlap.

On average, 48dp translates to a physical size of about 9mm (with some variability). This is comfortably in the range of recommended target sizes (7-10mm) for touchscreen objects and ensures that users will be able to reliably and accurately target them with their fingers.

If you design your elements to be at least 48dp high and wide, you can ensure that:

  • Your targets won’t be smaller than the minimum recommended target size of 7mm regardless of the screen on which they are displayed.
  • You strike a good compromise between overall information density and targetability of UI elements.

Above: The element is 48dp wide and the avatar is 40dp wide.
Below: The element is 48dp wide and the icon is 24dp wide.

Example of touch targets

Touch target height: 48dp
Button height: 36dp

Example of touch targets and buttons