Overview of Spacing

Spacing in design systems is crucial for creating visually appealing and user-friendly interfaces. It involves using consistent margins, padding, gutters, and whitespace to separate and organize UI elements. Defined spacing scales help ensure uniform application across components and responsiveness across devices. Proper spacing enhances the readability, navigability, and overall aesthetic of digital products, making it foundational to good design.

Spacing Steps

The Telerik and Kendo UI spacing system defines 40 steps, each using 1 rem (16 px) as the base unit, with every step representing a precise multiple of this unit.

Step	Value	Example
0	0px
1px	1px
0.5	0.125rem
1	0.25rem
1.5	0.375rem
2	0.5rem
2.5	0.625rem
3	0.75rem
3.5	0.875rem
4	1rem
4.5	1.125rem
5	1.25rem
5.5	1.375rem
6	1.5rem
6.5	1.625rem
7	1.75rem
7.5	1.875rem
8	2rem
9	2.25rem
10	2.5rem
11	2.75rem
12	3rem
13	3.25rem
14	3.5rem
15	3.75rem
16	4rem
17	4.25rem
18	4.5rem
19	4.75rem
20	5rem
21	5.25rem
22	5.5rem
23	5.75rem
24	6rem
25	7rem
26	8rem
27	9rem
28	10rem
29	11rem
30	12rem

Spacing Types

Different types of spacing are used strategically within a layout to create clear separation and intuitive flows. Here’s an overview of the primary types of spacing used in design systems:

Margins—Space outside of borders that separates elements from each other.
Padding—Space inside of borders that creates padding around an element's content.
Gutters—Space between columns or rows in a grid system.
Gaps—Space between flex items.

Key Principles

Spacing is a critical component in design that helps structure content, enhance visual appeal, and guide user interactions. The Telerik and Kendo UI design system endorses several basic principles related to spacing:

Visual Hierarchy and Emphasis—Spacing helps to establish visual hierarchy by creating distinct groups of elements or isolating important elements, making it easier for users to quickly understand which parts of the design are meant to be focal points.
Readability—Proper use of spacing improves readability by breaking text into manageable chunks. Adequate space around text and between lines (leading) ensures that content is easier on the eyes, which is also critical for accessibility.
Aesthetic Balance—Spacing contributes to the overall balance and symmetry of a design. Consistent and thoughtful spacing creates a more harmonious layout that is aesthetically pleasing and feels well-organized.