Spacing methods

Spacing methods use baseline grids, keylines, padding, and incremental spacing to adjust ratios, containers, and touch targets.


Baseline grid

8dp grid

All components align to an 8dp square baseline grid for mobile, tablet, and desktop.

All components align to an 8dp square baseline grid for mobile, tablet, and desktop.

8dp grid diagram of a layout with an app bar and floating action button
The app bar and floating action button align to the 8dp grid.

4dp grid

Icons, type, and some elements within components can align to a 4dp grid.

Icons, type, and some elements within components can align to a 4dp grid.

4dp grid diagram with bottom navigation bar and three icons spaced to align with the 4dp grid
Elements of the bottom navigation bar align to the 4dp grid.

4dp baseline grid

Type aligns to the 4dp baseline grid. Type can be placed outside of the 4dp grid when it’s centered within a component, such as a...

Type aligns to the 4dp baseline grid.

4dp baseline grid lines with text message type aligned to the baseline grid
4dp baseline grid

Type can be placed outside of the 4dp grid when it’s centered within a component, such as a button or list item. When placed outside of the grid but centered within a component, text can still appear vertically center-aligned.

4dp baseline grid with list items and off-center vertical spacing of text within the list item component
The text appears vertically aligned in the center of the list item, though the type is placed outside of the 4dp grid.

Spacing

Spacing methods

Spacing methods are more granular than the responsive layout grid. Spacing methods are a set of rules around how to place elements within layouts and...

Spacing methods are more granular than the responsive layout grid. Spacing methods are a set of rules around how to place elements within layouts and components.

Button with plus icon and padding

Padding

Padding is the space between elements within a component.

Button with plus icon and padding

Dimensions

Dimensions describe the width and height of component elements.

Button with plus icon and padding

Alignment

Alignment is the placement of elements within a component.


Padding

Padding refers to the space between UI elements. Padding is an alternative spacing method to keylines and is measured in increments of 8dp or 4dp....

Padding refers to the space between UI elements. Padding is an alternative spacing method to keylines and is measured in increments of 8dp or 4dp.

Padding can be measured both vertically and horizontally and does not need to span the whole height of a layout.

A mobile layout with 24dp padding identified between a list items and again between two icons
A layout with 24dp padding between components.

Dimensions

Dimensions refer to the width and height of component elements. Some components, such as an app bar or list, only outline the height of an...

Dimensions refer to the width and height of component elements.

Some components, such as an app bar or list, only outline the height of an element. The heights of these elements should align to the 8dp grid. Their widths are not specified because it’s responsive to a viewport width.

Messaging app with three messages about a Big Sur camping trip
1. Status bar height: 24dp
2. App bar height: 56dp
3. List item height: 88dp

Alignment

Alignment is the placement of elements within a component. Keylines are an alignment tool that enables consistent placement of elements outside of the layout grid....

Alignment is the placement of elements within a component.

App screen with page title with menu, share and search icons and three list items
1. Layout Grid
2. Alignment

Keylines

Keylines are an alignment tool that enables consistent placement of elements outside of the layout grid. They are vertical lines that show where elements are placed when they don’t align to the grid. Keylines are determined by each element’s distance from the edge of the screen and are measured in increments of 8dp.

Mobile layout with grid alignment, keyline intersects the column
1. Layout Grid
2. Keyline

Keylines can create more or less space between elements in a layout. They are adjustable per breakpoint range.

Text placement showing a range of keyline placement from 48dp to 56dp to 64dp to 72dp
Keylines can expand or reduce the space between elements.

Containers and ratios

Containers

A container is a shape used to represent an enclosed area. Containers can hold UI elements such as images, icons, or surfaces. Containers can be...

A container is a shape used to represent an enclosed area. Containers can hold UI elements such as images, icons, or surfaces.

An image, an icon, and a button, each surrounded by a border to show the container
200%

1. Image container
2. Icon container
3. Surface container

Containers can be rigid and restrict the size or cropping of elements within them. Alternatively, they can be flexible and grow to support the size of the content they hold.

Image container maintains its size on changing background shape. Image and container expand vertically and horizontally
1. Rigid image container that crops the original image size.
2. Flexible image container that scales to hold the original image size.

Aspect ratios

An aspect ratio is the proportion of an element’s width to its height. Aspect ratios are written as width:height. To maintain consistency in your layout,...

An aspect ratio is the proportion of an element’s width to its height. Aspect ratios are written as width:height.

To maintain consistency in your layout, use a consistent aspect ratio on elements like images, surfaces, and screen size.

The following aspect ratios are recommended for use across your UI: 16:9; 3:2; 4:3; 1:1; 3:4; 2:3

Aspect ratios depicted by outlines for each recommended ratio

Flexible ratios

Flexible ratio sizing is determined by the layout grid: Use a flexible ratio to allow content form determine the height of the container.

Flexible ratio sizing is determined by the layout grid:

  • Container width is determined by the screen layout and grows to fill the maximum space available
  • Container height is determined by the height of the image in the container

Use a flexible ratio to allow content form determine the height of the container.

Image cards with various heights and widths showing flexibility; both are 156dp width, 112dp and 172 dp in height
Container widths are determined by the column widths in the layout grid.


Touch targets

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

An avatar, a search icon and a button with 48 dp touch targets
Touch target minimum of 48 x 48 dp

Up next