Picchu

Spacing

Guidance

Spacing, as a standard in this guide, refers to the vertical spacing between elements. Horizontal spacing is determined by factors such as the grid, column width, gutters, and so on.

Default vertical spacing is built in to each individual component. To accommodate various design scenarios, each component also has a tighter and looser option available.

Default font spacing

Segoe UI has prebuilt spacing of roughly ⅓ above and ¼ below. Margin-bottom gets added AFTER this spacing. If two adjacent items have margin, those margins will overlap each other and the larger of the two will be the perceived spacing.

In addition to the default margin-bottom (values in the chart below) there are tighter and looser spacing options. These are acheived by placing the class .tighter or .looser in the element container.

Ramp & weight

HTML Element Font size Default margin-bottom Rough px eqv from baseline

Headline

62px 0.33em 44px

Header

46px 0.4em 36px

Subheader

34px 0.4em 28px

Title

24px 0.5em 24px

Subtitle

20px 0.66em 24px

Body

18px 1em 28px

Body alt

15px 1.25em 28px

Section & element spacing

By default, stacked grid elements (rows, grids, or columns) have no built in spacing. In this way, vertical elements/containers will touch unless a helper class is applied at some parent level.

There are six options for vertical element/container spacing: sp1, sp2, sp3, sp4, sp5, and yep, you guessed it, sp6. These are seperate from typography spacing and are not prebuilt into the element/container.

To mirror the responsive behavior of the Picchu grid and typography, these numbers are dynamic and will change from device to device.

Optically measured as white-space, the six values from desktop to mobile are roughly…

Spacing call Desktop Mobile
sp1 12px 12px
sp2 20px 18px
sp3 32px 28px
sp4 48px 40px
sp5 64px 52px
sp6 84px 64px

Demo

See the Pen Content block builder by Microsoft.com (@microsoft) on CodePen.