⚡Design

Typografie Grundlagen

Die richtige Schrift macht dein Design professionell

90 Prozent von Webdesign ist Typografie. Die falsche Schrift oder schlechte Abstufungen zerstoeren jedes Design. Mit ein paar Grundregeln und den richtigen Google Fonts sieht deine App sofort professioneller aus.

Pro-Tip — Der schnelle Weg
Beschraenk dich auf maximal zwei Schriftarten: eine fuer Ueberschriften und eine fuer Fliesstext. Inter fuer UI, Geist fuer Tech, Plus Jakarta Sans fuer modern.
Seite 1
1

Font waehlen und laden

Next.js hat Google Fonts eingebaut. Importiere die Schrift und sie wird automatisch optimiert und lokal gehostet. Kein externer Request, bessere Performance.

import { Inter, Plus_Jakarta_Sans } from 'next/font/google'


const inter = Inter({ subsets: ['latin'] })
const jakarta = Plus_Jakarta_Sans({
 subsets: ['latin'],
 weight: ['400', '600', '700']
})
2

Type Scale definieren

Eine Type Scale gibt dir harmonische Groessenabstufungen. Starte mit 16px als Basis und nutze einen Faktor von 1.25 fuer jede Stufe nach oben.

/* Type Scale (Faktor 1.25) */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31px */
--text-3xl: 2.441rem; /* 39px */
3

Zeilenhoehe anpassen

Fliesstext braucht eine Zeilenhoehe von 1.5 bis 1.7. Ueberschriften koennen enger sein bei 1.1 bis 1.3. Zu enge Zeilen sind schwer lesbar, zu weite wirken zerstreut.

h1, h2, h3 { line-height: 1.2; }
p, li { line-height: 1.6; }


/* Oder in Tailwind */
<h1 className="text-3xl font-bold leading-tight">
<p className="text-base leading-relaxed">
4

Maximale Lesebreite

Text sollte nie breiter als 65 bis 75 Zeichen pro Zeile sein. Laengere Zeilen sind anstrengend zu lesen. Setz max-width auf deine Textbloecke.

.prose { max-width: 65ch; }


/* Oder in Tailwind */
<article className="max-w-prose mx-auto">
Seite 2
Warum das funktioniert
  • Gute Typografie erhoeht die Lesbarkeit und Verweildauer
  • Harmonische Groessenabstufungen wirken professionell
  • next/font optimiert Schriften automatisch ohne Extra-Aufwand
  • Maximale Zeilenlaenge reduziert Lesemuedigkeit
Tipps
  • Inter ist die sicherste Wahl fuer UI-Design
  • Variable Fonts sparen Ladezeit weil nur eine Datei geladen wird
  • font-display swap verhindert unsichtbaren Text beim Laden
  • Teste Typografie auf dem Handy, dort wird schlecht Lesbares sofort sichtbar
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen