Add a little space
Whitespace is a key ingredient in visual design. It helps group things together when close and separate things when further apart.
The starting point or base spacing of the modular scale is the height of a
h1, i.e. the largest font-size in the system. Spacings can then be either two steps up the modular scale or five steps down.
Spacing, sizes used for whitespace
The default size is used for page margins and whitespace below a
The larger sizes are used for vertical whitespace between blocks of content and page areas like the main header and footer.
Smaller sizes are used for adding whitespace within an element. E.g. the distance between two
p-tags is one step down the scale, making the two paragraphs visually appear as a coherent piece of content in comparison to the page margins. This spacing is also used as the inside padding of the above list of spacings.
The base-size and ratio of the modular scale varies across viewport-widths rendering whitespace that suit the screen.
Narrow viewports, default spacings
Use the picker at the bottom right corner of the screen to switch between spacings. Use to set the default sizes, for the medium sizes, and for the largest sizes.