Abstände
Abstände werden verwendet, um Ränder und Abstände konsistent über Elemente, Komponenten und Layouts hinweg anzuwenden. Mit einem festgelegten Abstandsmaßstab können Informationen so strukturiert werden, dass eine konsistente und intuitive Benutzeroberfläche auf der gesamten Website entsteht.
Wie werden Abstände in einem Design genutzt
Abstände werden genutzt, um Hierarchien und visuelle Beziehungen zu schaffen. Durch die Verwendung der Abstände können Sie eine visuelle Gruppierung und andere Assoziationen sowohl zwischen als auch innerhalb der Komponenten erreichen. Zusammen mit der Typografie tragen sie zu einer visuellen Gesamthierarchie bei und bieten Benutzern eine strukturierte Möglichkeit.
4
8
12
16
20
24
32
40
56
64
| Name | Größe |
|---|---|
| XXS | 4 px - 0,25 rem |
| XS | 8 px - 0,5 rem |
| S | 12 px - 0,75 rem |
| M | 16 px - 1 rem |
| L | 20 px - 1,25 rem |
| XL | 24 px - 1,5 rem |
| 2XL | 32 px - 2 rem |
| 3XL | 40 px - 2,5 rem |
| 4XL | 56 px - 3,5 rem |
| 5XL | 64 px - 4 rem |