Typography - AI Hub Design System

Schriftfamilie

Inter ist eine speziell für Bildschirme optimierte Schriftart mit ausgezeichneter Lesbarkeit in allen Größen.

font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

Schriftgrößen

Display

60px / 3.75rem - Font Weight: 800

Heading 1

48px / 3rem - Font Weight: 800

Heading 2

36px / 2.25rem - Font Weight: 700

Heading 3

30px / 1.875rem - Font Weight: 700

Heading 4

24px / 1.5rem - Font Weight: 600

Heading 5

20px / 1.25rem - Font Weight: 600

Heading 6

18px / 1.125rem - Font Weight: 600

Body Text

16px / 1rem - Font Weight: 400

Small Text

14px / 0.875rem - Font Weight: 400

Caption Text

12px / 0.75rem - Font Weight: 400

Schriftgewichte

Light (300)

Regular (400)

Medium (500)

Semibold (600)

Bold (700)

Extra Bold (800)

Black (900)

Textfarben

Primary Text - Für Überschriften und wichtige Inhalte

Secondary Text - Für normale Texte und Beschreibungen

Muted Text - Für weniger wichtige Informationen

Accent Text - Für Hervorhebungen und Links

Verwendungsbeispiele

/* Überschriften */
h1 {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--ai-text-primary);
}

/* Fließtext */
p {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--ai-text-secondary);
}

/* Kleine Texte */
.caption {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ai-text-muted);
}