Provide alternative high or low density spacing layouts
About density
We design products that help users navigate through large amounts of data. As such, they may want to adjust their experience depending on content or situation.
Increased density can play a crucial role in helping users focus by reducing the space between actions and allowing more content to fit on a single screen. On the other hand, less dense UI can help users navigate complex interfaces while giving content more emphasis. By providing options for different densities, we cater to individual user preferences and needs.
Density modes
We use relative measurements for dimensions. Values here have been converted to pixels for easier preview.
We recommend you expose density setting contextually, for entire page or larger UI blocks. This allows users to customize their experience and provides flexibility in designing your UI.
Keep in mind that densities will work independently of other modes in the system. If you want to set density per breakpoint or viewport, you'll need to do so manually.
Do
Provide ways to change UI density on certain page, f.e. when viewing large tables.
Don't
Combine multiple densities in a single piece of UI, f.e. setting table header to different density than its rows and columns.