Vertical Spacing
Durch die Anwendung strenger vertikaler Abstandsprinzipien können wir eine konsistente Konstruktion auf der Y-Achse erreichen. Es regelt den Abstand zwischen gestapelten Elementen innerhalb einer Komponente sowie den Abstand zwischen Objekten auf einer Seite. Bei Nennwerten zwischen 10 und 80 Pixeln, gibt es viel Spielraum für kreative Flexibilität und die Verwendung von negativem Raum, während man sich immer noch an einer zugrunde liegenden Grundlage von Regeln hält.
Abstände
Da sich der Pixelwert einiger Abstände innerhalb der Komponenten auf unterschiedlichen Endgeräten verändert, arbeiten wir mit einer Benamung von XS bis XXL, welches in der Umsetzung im Frontend mehr Flexibilität und Stringenz gewährleistet.
Anwendungsbeispiel
Um die Konsistenz des vertikalen Abstands zwischen typografischen Elementen und anderen UI-Elementen zu gewährleisten, wird der vertikale Abstand IMMER von der Höhe der Textzeile bis zur Zeilenhöhe gemessen, wie das folgende Beispiel zeigt.