Farben und Typografie auf der Website: Grundlagen für Einsteiger

Besucher entscheiden innerhalb von Sekunden, ob sie einer Website vertrauen oder sie wieder schließen. Diese Entscheidung fällt lange vor dem ersten Satz, den jemand liest. Farben und Schriften kommunizieren Kompetenz, Branchenzugehörigkeit und Verlässlichkeit, noch bevor der Inhalt überhaupt wahrgenommen wird.

Ich begleite seit über einem Jahrzehnt kleine und mittelständische Unternehmen beim Aufbau ihrer Websites, und das Muster wiederholt sich: Unternehmen, die inhaltlich überzeugen, verlieren Besucher durch ein visuelles Erscheinungsbild, das keine Orientierung gibt. Dieses Grundlagenwissen möchte ich hier so konkret wie möglich weitergeben.

Warum Farben mehr sind als Dekoration

Eine Farbe transportiert Bedeutung, ob man das beabsichtigt oder nicht. Blau steht branchenübergreifend für Zuverlässigkeit und Sicherheit, kein Zufall, dass Banken, Versicherungen und viele Technologieunternehmen auf diesen Farbton setzen. Grün signalisiert Gesundheit, Natur und Nachhaltigkeit. Rot erzeugt Aufmerksamkeit und Dringlichkeit, funktioniert aber auch als Signal für Angebote und Aktionen. Grau und Dunkelblau wirken seriös und nüchtern, ideal für B2B-Dienstleister.

Für Ihr Unternehmen bedeutet das: Die Farbwahl sollte aus Ihrer Branche und Ihrer Zielgruppe heraus entwickelt werden, nicht aus persönlichem Geschmack. Ein Kindersalon kann mutig mit Gelb und Orange arbeiten. Eine Steuerberatungskanzlei tut das besser nicht.

Die drei Farbrollen: Primär, Sekundär, Akzent

Jede gut strukturierte Website arbeitet mit drei Farbrollen. Sie lassen sich mit einer Faustregel verteilen, die im professionellen Webdesign als 60/30/10-Regel bekannt ist.

Die Primärfarbe belegt rund 60 Prozent der sichtbaren Fläche. Das klingt nach viel, ist aber in der Praxis meist der Hintergrund der Seite: Weiß, ein sehr helles Grau oder ein dezentes Pastellton. Die Primärfarbe gibt dem Gesamtauftritt seine Grundstimmung.

Die Sekundärfarbe nimmt etwa 30 Prozent ein. Sie erscheint in Navigationsleisten, Trennflächen, Karten oder Abschnitten. Sie ergänzt die Primärfarbe und sorgt für Tiefe und Struktur, ohne zu dominieren.

Die Akzentfarbe macht die verbleibenden 10 Prozent aus. Genau diese 10 Prozent sind der wichtigste Teil des Schemas. Die Akzentfarbe erscheint auf Buttons, Handlungsaufforderungen und Links. Sie darf auffällig sein, ja sie muss es sogar, damit Besucher auf Anhieb erkennen, wo sie klicken sollen.

Bei einem Kunden aus dem Handwerksbereich haben wir diese Regel direkt angewendet: Weißer Hintergrund als Primärfarbe, ein kräftiges Dunkelblau für Navigationsleiste und Abschnitte, ein warmes Orange für alle Buttons. Das Ergebnis wirkte sofort professionell, obwohl das Farbschema in wenigen Minuten festgelegt war.

Farbharmonien: Wie Farben miteinander funktionieren

Farben stehen in Beziehung zueinander, und diese Beziehungen lassen sich auf dem Farbkreis ablesen. Für Einsteiger sind drei Grundprinzipien relevant:

Komplementärfarben liegen sich auf dem Farbkreis gegenüber, zum Beispiel Blau und Orange oder Rot und Grün. Der Kontrast ist stark, was Energie erzeugt. Für Akzentfarben ist dieser Ansatz gut geeignet, für großflächige Hintergründe in Kombination aber oft zu anstrengend.

Analoge Farben liegen nebeneinander auf dem Farbkreis, etwa Blau, Blaugrün und Grün. Sie wirken harmonisch und ruhig, eignen sich gut für Websites, die Vertrauen und Stabilität betonen.

Triadische Schemata nutzen drei Farben, die gleichmäßig auf dem Farbkreis verteilt sind. Diese Kombination ist für erfahrene Designer interessant, für Einsteiger aber schwierig zu kontrollieren. Wer kein Designhintergrund hat, sollte hier lieber bei zwei Farben plus Akzent bleiben.

Kostenlose Online-Werkzeuge wie Coolors oder das Adobe Color Rad helfen, passende Kombinationen schnell zu finden und zu testen, ohne ein Design-Studium absolviert zu haben.

Kontrast: Die unterschätzte Grundlage der Lesbarkeit

Kontrast ist keine Frage des Geschmacks, sondern der Zugänglichkeit. Hellgrauer Text auf weißem Hintergrund sieht modern aus, macht aber einen erheblichen Teil der Besucher zur Anstrengung beim Lesen. Das betrifft nicht nur Menschen mit Sehbeeinträchtigungen, sondern auch alle, die auf einem Smartphone in der Sonne lesen.

Die Web Content Accessibility Guidelines (WCAG) definieren ein Mindestkontrastverhältnis von 4,5:1 für normalen Text und 3:1 für große Überschriften. Das klingt technisch, lässt sich aber einfach überprüfen: Kostenlose Kontrast-Checker im Web, zum Beispiel der des WebAIM-Projekts, zeigen in Sekunden an, ob zwei Farben diesen Wert erfüllen.

In der Praxis bedeutet das: Dunkler Text auf hellem Hintergrund ist fast immer sicher. Sehr helles Grau als Textfarbe, bei vielen modernen Designs beliebt, fällt dagegen oft unter die Grenze. Ich empfehle meinen Kunden #333333 oder #222222 statt reines Schwarz, das leuchtet nicht zu stark vom Bildschirm, aber erfüllt alle Kontrastwerte mühelos.

Typografie: Warum weniger wirklich mehr ist

Schriften erzählen eine Geschichte über das Unternehmen. Eine elegante Serifenschrift in der Überschrift signalisiert Tradition und Sorgfalt. Eine klare, serifenlose Schrift im Fließtext wirkt sachlich und modern. Die Kombination beider funktioniert auf vielen Websites deshalb so gut, weil sie Persönlichkeit in den Überschriften mit Lesbarkeit im Text verbindet.

Die Grundregel lautet: zwei Schriftarten, maximal drei. Wer drei verwendet, nimmt eine für Überschriften, eine für den Fließtext und eine für besondere Elemente wie Zitate oder Preistabellen. Vier oder mehr Schriftarten auf einer Seite wirken unruhig und unprofessionell, ähnlich wie wenn jemand in einem Geschäftsbrief jede zweite Zeile in einer anderen Handschrift schreibt.

Schriftarten lassen sich in drei Hauptkategorien einteilen:

Serifenschriften (wie Georgia, Playfair Display, Lora) haben kleine Abschlussstriche an den Buchstabenenden. Sie wirken klassisch, seriös und vertrauenswürdig. Im Fließtext auf dem Bildschirm sind sie gut lesbar, wenn die Schriftgröße stimmt.

Serifenlose Schriften (wie Inter, Open Sans, Roboto, Lato) haben klare, gerade Linien. Sie wirken modern, neutral und sachlich. Im Fließtext bei längeren Texten sind sie auf dem Bildschirm oft etwas angenehmer als Serifenschriften.

Display-Schriften sind für große Überschriften oder Logoschriften gedacht. Sie haben oft starke Persönlichkeit, sind aber für Fließtext ungeeignet.

Schriftgrößen: Was auf dem Desktop funktioniert, reicht auf dem Smartphone nicht

Eine häufige Anfängerfehler ist die Annahme, eine Schriftgröße passe für alle Geräte. Das stimmt nicht. Auf einem Desktop-Monitor betrachten Besucher den Text aus etwa 60 bis 80 Zentimeter Entfernung. Auf dem Smartphone halten sie das Gerät oft näher, aber der Bildschirm ist kleiner und heller, was die Augen stärker beansprucht.

Bewährte Ausgangswerte:

• Fließtext Desktop: 16 bis 18 Pixel
• Fließtext Smartphone: 18 bis 20 Pixel
• Kleine Untertexte und Fußnoten: nicht unter 14 Pixel
• H1-Überschriften Desktop: 32 bis 48 Pixel
• H1-Überschriften Smartphone: 24 bis 32 Pixel
• Zeilenhöhe: 1,5- bis 1,7-facher Wert der Schriftgröße, zum Beispiel 28 Pixel Zeilenhöhe bei 18 Pixel Text

Moderne WordPress-Themes und Seitenbauer erlauben es, Schriftgrößen für Desktop und Smartphone getrennt einzustellen. Diese Funktion sollte konsequent genutzt werden, sie ist einer der einfachsten Wege, die Benutzerfreundlichkeit spürbar zu verbessern, ohne das Design zu verändern.

Für eine professionelle Firmenwebsite gehört die Kontrolle der Schriftgrößen auf allen gängigen Bildschirmgrößen zur Mindestanforderung. Wer eine Website aufbauen oder überarbeiten lässt, sollte diesen Punkt ausdrücklich ansprechen.

Ein einfaches Farbschema wählen, ohne Designer zu sein

Der praktische Einstieg ist einfacher, als die meisten denken. Hier ist der Weg, den ich Kunden empfehle, die ihr erstes Farbschema selbst entwickeln möchten.

Zuerst: Schauen Sie sich drei bis fünf direkte Mitbewerber an. Welche Farben dominieren? Welche Stimmung erzeugen sie? Das gibt eine Orientierung, was in der Branche funktioniert und wie man sich visuell abgrenzen kann.

Dann: Wählen Sie eine Hauptfarbe, die zu Ihrer Branche und Unternehmensidentität passt. Falls Sie bereits ein Logo haben, nehmen Sie die dominante Logofarbe. Daraus leiten Sie mit einem Farbrad eine harmonische Sekundärfarbe ab.

Schließlich: Wählen Sie eine Akzentfarbe, die deutlich von den anderen abweicht und auf Ihrem Hintergrund gut sichtbar ist. Wenn Ihre Primär- und Sekundärfarben im Blaubereich liegen, wählen Sie Orange oder Gelb als Akzent. Das ist Komplementärkontrast in der Praxis.

Wer mehr über die grundlegende Struktur einer Firmenwebsite verstehen möchte, findet in meinem Artikel Was ist eine Firmenwebsite? den passenden Einstieg. Und wer sich fragt, welcher Website-Typ für das eigene Unternehmen passt, lohnt es sich, den Überblick über Arten von Webseiten für KMU zu lesen.

Eine Schriftkombination wählen, ohne Designer zu sein

Auch hier gilt: Bewährt funktioniert besser als experimentell. Für Einsteiger empfehle ich einen von drei Wegen.

Weg 1 - Schriftfamilien mit Serifen- und Serifenlos-Variante: Manche Schriftfamilien bieten beides an, zum Beispiel Source Serif Pro und Source Sans Pro von Adobe (kostenlos). Die Varianten harmonieren automatisch, weil sie dieselben Proportionen teilen.

Weg 2 - Klassische Paarung: Serifenschrift für Überschriften, serifenlose Schrift für den Fließtext. Zum Beispiel Playfair Display als Überschrift und Open Sans als Fließtext. Diese Kombination funktioniert für Onlineshops, Unternehmenswebsites und Blogs gleichermaßen.

Weg 3 - Einheitliche serifenlose Schrift: Eine einzige gut gewählte serifenlose Schrift, zum Beispiel Inter oder Roboto, für alle Textelemente. Die Hierarchie entsteht dann allein durch Größe, Gewicht (fett, normal, dünn) und Farbe. Das ist am einfachsten umzusetzen und funktioniert technisch immer.

Bei einem Kunden aus dem Bereich Beratungsdienstleistungen haben wir genau Weg 2 umgesetzt: Lora als Überschriftenschrift gibt dem Auftritt Seriosität, Inter als Fließtextschrift hält alles klar und leicht lesbar. Besucher berichten das Gefühl von "vertrauenswürdig, aber nicht altmodisch", was genau das war, was der Kunde wollte.

Konsistenz ist das eigentliche Ziel

Das beste Farbschema und die eleganteste Schriftkombination verlieren ihre Wirkung, wenn sie nicht konsequent eingesetzt werden. Jede Seite der Website sollte dieselben Farben, dieselben Schriften und dieselben Größenverhältnisse verwenden. Abweichungen erzeugen Unsicherheit beim Besucher, auch wenn er nicht benennen kann warum.

Praktisch heißt das: Notieren Sie Ihre Farbwerte als sechsstellige Hex-Codes (#1A3C6E statt "irgendein Dunkelblau") und speichern Sie diese mit den Schriftarten in einer zentralen Stelle, zum Beispiel im Customizer Ihres WordPress-Themes oder als globale Stile im Seitenbauer. Dann sind Abweichungen kaum möglich.

Wer sich intensiver mit dem Aufbau einer professionellen Website für sein Unternehmen beschäftigen möchte, kann mich gerne direkt ansprechen. Farben und Typografie sind oft der erste Schritt, bevor wir über Inhalte, SEO oder Online-Shop-Funktionen sprechen. Der erste Eindruck zählt, und der ist visuell.

Häufige Fragen

Wie viele Farben sollte eine Unternehmenswebsite haben?

Drei Farben reichen in den meisten Fällen vollständig aus: eine Primärfarbe für Hintergründe und Hauptflächen, eine Sekundärfarbe als Ergänzung und eine Akzentfarbe für Buttons und Handlungsaufforderungen. Mehr als vier Farben führen schnell zu einem unruhigen Erscheinungsbild, das Vertrauen kostet statt aufzubauen.

Welche Schriftgröße ist auf der Website richtig?

Für den Fließtext auf dem Desktop gilt 16 bis 18 Pixel als bewährte Untergrenze, auf dem Smartphone sind 18 bis 20 Pixel sinnvoll, weil der Leseabstand größer ist. Überschriften beginnen sinnvollerweise bei 24 Pixel aufwärts. Alles darunter zwingt Besucher zum Zusammenkneifen der Augen, was sie die Seite schnell schließen lässt.

Muss ich einen Designer beauftragen, um ein Farbschema zu wählen?

Nicht unbedingt. Mit der 60/30/10-Regel und einem kostenlosen Farbrad-Werkzeug können Einsteiger ein funktionsfähiges Farbschema entwickeln. Entscheidend ist, dass die Farben zur Branche passen, genug Kontrast bieten und konsequent eingesetzt werden. Ein Designer bringt Erfahrung und Feingefühl, ist aber für den ersten professionellen Auftritt nicht zwingend erforderlich.

Was bedeutet das Kontrastverhältnis 4,5:1 für die Praxis?

Dieses Verhältnis beschreibt, wie stark sich Text und Hintergrundfarbe in ihrer Helligkeit unterscheiden. Dunkler Text auf weißem Hintergrund erfüllt diesen Wert mühelos. Hellgrauer Text auf weißem Hintergrund fällt hingegen oft darunter und ist damit für ältere oder sehschwache Besucher kaum lesbar. Es gibt kostenlose Online-Prüfer, mit denen sich zwei Farben in Sekunden überprüfen lassen.

Kann ich Google Fonts kostenlos auf meiner Website nutzen?

Google Fonts bietet eine große Auswahl hochwertiger Schriften ohne Lizenzkosten. Für den deutschen Markt ist es allerdings ratsam, die Schriftdateien auf dem eigenen Server zu speichern statt sie direkt von Google-Servern zu laden, da dabei IP-Adressen der Besucher übertragen werden. Das ist mit gängigen WordPress-Plugins ohne technischen Aufwand umsetzbar.

Welche Schriftart passt zu welcher Branche?

Serifenschriften wirken klassisch und vertrauenswürdig, sie eignen sich gut für Kanzleien, Berater oder Handwerksbetriebe mit langer Tradition. Serifenlose Schriften wirken modern und klar, was für Technologie-, Gesundheits- und Dienstleistungsunternehmen passt. Eine gemischte Kombination aus beiden liefert oft das beste Ergebnis: charakterstark in den Überschriften, neutral und leicht lesbar im Fließtext.

Wie finde ich heraus, ob mein Farbschema zur Zielgruppe passt?

Der einfachste Weg ist ein direkter Vergleich mit den führenden Mitbewerbern in der Branche. Welche Farbtöne dominieren dort? Wenn alle Konkurrenten Blau verwenden, kann ein bewusstes Abweichen die eigene Marke sichtbarer machen, vorausgesetzt, die Alternativen wirken trotzdem seriös. Kurze Umfragen bei bestehenden Kunden oder einfache A/B-Tests im kleinen Maßstab liefern schnell erste Rückmeldungen.