Typografie

Unsere Typografie-System sorgt für Lesbarkeit, Hierarchie und eine einheitliche visuelle Sprache über alle Berührungspunkte hinweg.

Schriftfamilien

Poppins (Brand)

Für Marketing, Brand-Kommunikation und allgemeine Überschriften

Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()

Inter (Produkt Helix)

Für UI-Elemente, technische Inhalte und Produkt-Interfaces

Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()

Typografie-Skala

Display 60px · font-bold · Poppins
Heading 1 48px · font-bold · Poppins
Heading 2 36px · font-bold · Poppins
Heading 3 30px · font-bold · Poppins
Heading 4 24px · font-semibold · Poppins
Heading 5 20px · font-semibold · Poppins
Body Large 18px · font-normal · Poppins
Body Regular 16px · font-normal · Poppins
Body Small 14px · font-normal · Poppins
Caption 12px · font-normal · Poppins

Schriftverwendung

Brand

Poppins

  • Marketing-Materialien
  • Website-Überschriften
  • Präsentationen
  • Social Media Posts
  • Kampagnen
Produkt

Inter

  • App-Interfaces
  • Buttons & Navigation
  • Formulare & Inputs
  • Daten-Tabellen
  • Technische Texte

Beispiele

Überschriften

Innovation

Innovation beginnt hier

Klare Kommunikation schafft Vertrauen und stärkt die Marke.

Poppins Brand & Marketing
Produkt-Interface
1.234
Aktive Nutzer
+12,5 %

Vergleich zum Vormonat

Inter UI & Produkt

Best Practices

Hierarchie

Nutze maximal 3–4 visuelle Ebenen durch Größe, Gewicht und Farbe. Klare Hierarchie führt den Blick.

Tipp: H1 → H2 → Body → Caption

Lesbarkeit

Zeilenlänge 60–80 Zeichen, Zeilenabstand 1,5–1,8 für Fließtext. Zu enge Sätze ermüden das Auge.

Optimal: max-width ~65ch

Kontrast

Mindest-Kontrastverhältnis 4,5:1 für Normaltexte (WCAG AA). Barrierefreiheit ist kein Kompromiss.

AA: 4,5:1 · AAA: 7:1