Diese Website verwendet Cookies, um Ihnen ein gutes Surferlebnis zu bieten.

Dazu gehören unverzichtbare Cookies, die für den Betrieb der Website erforderlich sind, sowie andere, die nur für anonyme statistische Zwecke, für Komfort-Einstellungen oder zur Anzeige personalisierter Inhalte verwendet werden. Sie können selbst entscheiden, welche Kategorien Sie zulassen möchten. Bitte beachten Sie, dass aufgrund Ihrer Einstellungen möglicherweise nicht alle Funktionen der Website verfügbar sind.

Diese Website verwendet Cookies, um Ihnen ein gutes Surferlebnis zu bieten.

Dazu gehören unverzichtbare Cookies, die für den Betrieb der Website erforderlich sind, sowie andere, die nur für anonyme statistische Zwecke, für Komfort-Einstellungen oder zur Anzeige personalisierter Inhalte verwendet werden. Sie können selbst entscheiden, welche Kategorien Sie zulassen möchten. Bitte beachten Sie, dass aufgrund Ihrer Einstellungen möglicherweise nicht alle Funktionen der Website verfügbar sind.

Ihre Cookie-Einstellungen wurden gespeichert.
Typography System

Schriftgrößen & Typografie

Alle verfügbaren Textgrößen von xs bis 9xl für Überschriften und Text-Elemente im CDK Design System.

Überschriften-Größen

Alle verfügbaren Textgrößen von xs bis 9xl für Überschriften und Text-Elemente.

text-xs (0.75rem / 12px)

The quick brown fox jumps over the lazy dog

<h1 class="text-xs">...</h1>

text-sm (0.875rem / 14px)

The quick brown fox jumps over the lazy dog

<h1 class="text-sm">...</h1>

text-base (1rem / 16px)

The quick brown fox jumps over the lazy dog

<h1 class="text-base">...</h1>

text-lg (1.125rem / 18px)

The quick brown fox jumps over the lazy dog

<h1 class="text-lg">...</h1>

text-xl (1.25rem / 20px)

The quick brown fox jumps over the lazy dog

<h1 class="text-xl">...</h1>

text-2xl (1.5rem / 24px)

The quick brown fox jumps over the lazy dog

<h1 class="text-2xl">...</h1>

text-3xl (1.875rem / 30px)

The quick brown fox jumps over the lazy dog

<h1 class="text-3xl">...</h1>

text-4xl (2.25rem / 36px)

The quick brown fox jumps over the lazy dog

<h1 class="text-4xl">...</h1>

text-5xl (3rem / 48px)

The quick brown fox jumps over the lazy dog

<h1 class="text-5xl">...</h1>

text-6xl (3.75rem / 60px)

The quick brown fox jumps over the lazy dog

<h1 class="text-6xl">...</h1>

text-7xl (4.5rem / 72px)

The quick brown fox jumps over the lazy dog

<h1 class="text-7xl">...</h1>

text-8xl (6rem / 96px)

The quick brown fox jumps over the lazy dog

<h1 class="text-8xl">...</h1>

text-9xl (8rem / 128px)

The quick brown fox jumps over the lazy dog

<h1 class="text-9xl">...</h1>

Responsive Textgrößen

Responsive Überschrift

<h1 class="text-2xl md:text-4xl lg:text-6xl xl:text-8xl">
  Responsive Überschrift
</h1>

Diese Überschrift passt sich automatisch an die Bildschirmgröße an: 2xl (mobil), 4xl (tablet), 6xl (desktop), 8xl (large desktop).

Mit Poppins (Heading Font)

CDK Design System

<h1 class="text-6xl font-heading font-bold">
  CDK Design System
</h1>

Die Klasse font-heading verwendet Poppins für markante Überschriften.

Schriftgewichte

Verfügbare Font Weights für Montserrat und Poppins.

font-normal (400)

The quick brown fox jumps over the lazy dog

<p class="font-normal">...</p>

font-medium (500)

The quick brown fox jumps over the lazy dog

<p class="font-medium">...</p>

font-semibold (600)

The quick brown fox jumps over the lazy dog

<p class="font-semibold">...</p>

font-bold (700)

The quick brown fox jumps over the lazy dog

<p class="font-bold">...</p>

font-extrabold (800)

The quick brown fox jumps over the lazy dog

<p class="font-extrabold">...</p>

Zeilenhöhen

Verschiedene Line Heights für optimale Lesbarkeit.

leading-none (1)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p class="leading-none">...</p>

leading-tight (1.25)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p class="leading-tight">...</p>

leading-snug (1.375)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p class="leading-snug">...</p>

leading-normal (1.5)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p class="leading-normal">...</p>

leading-relaxed (1.625)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p class="leading-relaxed">...</p>

leading-loose (2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p class="leading-loose">...</p>

Schriftarten

Die verwendeten Font Families im CDK Design System.

Montserrat (Body)

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

<p class="font-sans">...</p>

Standard-Schriftart für Body-Text und allgemeine Inhalte.

Poppins (Headings)

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

<h1 class="font-heading">...</h1>

Schriftart für Überschriften und markante Textelemente.

Diese Website verwendet Cookies, um Ihnen ein gutes Surferlebnis zu bieten.

Dazu gehören unverzichtbare Cookies, die für den Betrieb der Website erforderlich sind, sowie andere, die nur für anonyme statistische Zwecke, für Komfort-Einstellungen oder zur Anzeige personalisierter Inhalte verwendet werden. Sie können selbst entscheiden, welche Kategorien Sie zulassen möchten. Bitte beachten Sie, dass aufgrund Ihrer Einstellungen möglicherweise nicht alle Funktionen der Website verfügbar sind.

Diese Website verwendet Cookies, um Ihnen ein gutes Surferlebnis zu bieten.

Dazu gehören unverzichtbare Cookies, die für den Betrieb der Website erforderlich sind, sowie andere, die nur für anonyme statistische Zwecke, für Komfort-Einstellungen oder zur Anzeige personalisierter Inhalte verwendet werden. Sie können selbst entscheiden, welche Kategorien Sie zulassen möchten. Bitte beachten Sie, dass aufgrund Ihrer Einstellungen möglicherweise nicht alle Funktionen der Website verfügbar sind.

Ihre Cookie-Einstellungen wurden gespeichert.