UI-Dichte-Rechner

Interface-Dichten Compact, Default und Comfortable aus Basisgrößen ableiten – Höhen, Abstände und Icons mit CSS-Export.

Der UI-Dichte-Rechner leitet aus Basisgrößen für Buttons, Inputs, Abstände, Schrift, Icons und Listenzeilen drei Interface-Dichten ab: Compact, Default und Comfortable. Du stellst die Faktoren und das Raster ein und siehst die Varianten nebeneinander. Ausgabe als CSS-Variablen mit data-density-Attribut, für Tailwind und als JSON.

Höhe Button/Input

Innenabstand seitlich

Abstand (Gap)

Schriftgröße

Icon-Größe

Eckenradius

Zeilenhöhe Listen

Faktor Compact

Faktor Comfortable

Raster

Token	Compact × 0.8	Default × 1	Comfortable × 1.2
Höhe von Buttons und Inputs	32px	40px	48px
Innenabstand seitlich	12px	16px	20px
Abstand zwischen Elementen	6px	8px	10px
Schriftgröße	14px	14px	14px
Icon-Größe	16px	20px	24px
Eckenradius	8px	8px	8px
Zeilenhöhe in Listen und Tabellen	38px	48px	58px

Compact

Speichern E-Mail-Adresse

Projekt Alpha
Projekt Beta
Projekt Gamma

Default

Speichern E-Mail-Adresse

Projekt Alpha
Projekt Beta
Projekt Gamma

Comfortable

Speichern E-Mail-Adresse

Projekt Alpha
Projekt Beta
Projekt Gamma

:root {
  --control-height: 40px;
  --padding-x: 16px;
  --gap: 8px;
  --font-size: 14px;
  --icon-size: 20px;
  --radius: 8px;
  --row-height: 48px;
}

[data-density='compact'] {
  --control-height: 32px;
  --padding-x: 12px;
  --gap: 6px;
  --font-size: 14px;
  --icon-size: 16px;
  --radius: 8px;
  --row-height: 38px;
}

[data-density='comfortable'] {
  --control-height: 48px;
  --padding-x: 20px;
  --gap: 10px;
  --font-size: 14px;
  --icon-size: 24px;
  --radius: 8px;
  --row-height: 58px;
}

.button {
  height: var(--control-height);
  padding-inline: var(--padding-x);
  font-size: var(--font-size);
  border-radius: var(--radius);
}

Was bedeutet UI-Dichte?

Die Dichte legt fest, wie eng ein Interface gepackt ist. Design-Systeme bieten häufig mehrere Stufen an, damit dieselben Komponenten in Dashboards kompakt und in Formularen oder auf Touch-Geräten großzügig erscheinen. Der Rechner erzeugt die Werte konsistent aus einer Basis.

Wann welche Dichte?

Dichte	Geeignet für
Compact	Tabellen, Admin-Bereiche, Power-User mit Maus
Default	Die meisten Webanwendungen
Comfortable	Touch-Bedienung, Onboarding, Lese-Oberflächen

So gehst du vor

Default-Werte eintragen und Faktoren festlegen.
Ergebnis in der Vorschau prüfen. Mindestgrößen für Touch kontrollierst du mit dem Touch-Target-Prüfer.
Variablen kopieren und mit data-density umschalten. Abstände fasst der Spacing-Skala-Generator in eine Skala.

Beispiel

Mit 40 px Höhe als Default ergibt der Faktor 0,8 bei 2-px-Raster 32 px für Compact, der Faktor 1,2 ergibt 48 px für Comfortable. Der Eckenradius bleibt gleich, die Schrift ändert sich nur um einen Pixel.

Häufige Fragen

Was ist UI-Dichte?

Sie beschreibt, wie viel Platz Elemente und Abstände einnehmen. Kompakte Oberflächen zeigen mehr Inhalt, etwa in Tabellen und Admin-Tools. Großzügige Oberflächen sind ruhiger und besser mit Touch bedienbar.

Welche Faktoren sind üblich?

Häufig um 0,8 für Compact und 1,2 für Comfortable. Material Design verkleinert Komponenten pro Stufe um etwa 4 dp. Wähle die Faktoren so, dass Controls nie unter die Touch-Mindestgröße fallen, wo Touch eine Rolle spielt.

Warum runde ich auf ein Raster?

Werte auf 2 oder 4 px gerundet halten Höhen und Abstände konsistent zum restlichen Design. Schrift und Radius bleiben davon getrennt: Die Schrift ändert sich nur leicht, der Radius bleibt gleich.

Wie schalte ich die Dichte im Code um?

Setze das Attribut data-density auf ein Wurzelelement, etwa <html data-density="compact">. Alle Komponenten, die die CSS-Variablen nutzen, passen sich an.

Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.