Komplementärfarben richtig kombinieren
Wie du Farbkontraste nutzt, um Markenidentität zu schaffen. Mit praktischen Beispielen für Websites und Print.
WeiterlesenFarbtheorie und Typografie für Web-Designer
Lerne die Grundlagen von Farbpaletten, Schriftpaarungen und Lesbarkeit. Speziell für deutschsprachige Designer mit Fokus auf Fraktur-Traditionen und digitale Optimierung.
Empfohlene Artikel
Entdecke praktisches Wissen über Farbpsychologie, Schriftauswahl und Lesbarkeitsoptimierung.
Schriftpaarung für bessere Lesbarkeit
Welche Schriftarten funktionieren zusammen? Tipps zur Auswahl von Heading- und Body-Schriften für Desktop und Mobilgeräte.
Weiterlesen
Deutsche Typografie-Traditionen im Web
Fraktur verstehen, aber nicht missbrauchen. Wie du deutschsprachige Designtraditionen in modernen Websites anwendest.
Weiterlesen
Farbpaletten und Schrift für Mobile optimieren
Warum Farben und Schriftgrößen auf kleinen Bildschirmen anders wirken. Konkrete Richtlinien für responsive Design.
WeiterlesenFünf Grundprinzipien für erfolgreiche Farbauswahl
Bevor du deine nächste Farbpalette designst, solltest du diese essentiellen Konzepte verstehen.
1
Kontrastquoten nach WCAG AA
Text und Hintergrund müssen ein Kontrastquoten-Verhältnis von mindestens 4,5:1 haben. Das ist nicht nur für barrierefreie Websites wichtig — es macht deine Inhalte auch insgesamt lesbar.
2
60-30-10 Regel funktioniert wirklich
60 Prozent Primärfarbe, 30 Prozent Sekundärfarbe, 10 Prozent Akzentfarbe. Das Verhältnis schafft Harmonie und lässt deine wichtigsten Elemente hervorstechen — ohne zu chaotisch zu wirken.
3
Schrifthierarchie braucht Größe und Gewicht
Nicht nur Farbe, sondern auch Schriftgröße und Schriftstärke zeigen, was wichtig ist. Ein großer, fetter Heading wirkt ohne zusätzliche Farbeffekte schon prominent.
4
Zeilenabstand macht Unterschied
Guter Zeilenabstand (line-height: 1.5–1.8) verbessert die Lesbarkeit mehr als viele Anfänger denken. Besonders bei längeren Texten merken Leser sofort den Unterschied.
5
Markenpersönlichkeit durch konsistente Paletten
Deine Farbpalette sollte die Persönlichkeit der Marke widerspiegeln. Konsistente Farbnutzung über alle Touchpoints schafft Vertrauen und Wiedererkennung.
Best Practices für Lesbarkeit auf allen Geräten
Mindestschriftgröße: 16px für Body-Text
— Das ist kein Zufall. 16px ist der Browser-Standard und funktioniert auf mobilen Geräten am besten. Wer kleiner geht, zwingt Nutzer zum Zoomen.
Maximale Zeilenlänge: 60–75 Zeichen
— Längere Zeilen sind schwer zu lesen. Die Augen verlieren die Position. Nutze max-width auf Textblöcken.
Keine reinen Schwarzweiß-Kontraste bei langen Texten
— #000000 auf #FFFFFF ermüdet die Augen. Verwende etwas dunkleres Grau für Body-Text (#1a1a1a auf #f9f9f9 ist besser).
Responsive Schriftgrößen mit clamp()
— Nicht einfach zwei verschiedene Größen für Mobile und Desktop. Verwende CSS clamp() für sanfte Skalierung.
Webfonts sparsam nutzen
— Jeder zusätzliche Font verlangsamt deine Website. Maximal 2–3 Schriftfamilien. Eine für Headings, eine für Body-Text, fertig.
Farbenblindheit testen
— Nicht alle Nutzer sehen Farben gleich. Tools wie Coblis zeigen, wie deine Website für Menschen mit Rot-Grün-Sehschwäche aussieht.
Ausreichend Leerraum um Text
— Padding und Margin sind deine Freunde. Text, der direkt am Rand klebt, wirkt erdrückend und ist anstrengend zu lesen.