Wir erleben es immer wieder: Viele Websites scheitern nicht unbedingt an ihren Inhalten, sondern an ihrer (fehlenden) Wirkung. Man spürt sofort: irgendetwas passt nicht. Der Auftritt wirkt unruhig, anstrengend oder einfach nicht rund – ohne dass man sofort sagen könnte, warum.
Sehr oft liegt die Ursache in der Typografie. Das ist tatsächlich eines dieser Elemente, die kaum jemand bewusst wahrnimmt und die trotzdem sofort wirken: Ein Tick mehr Weißraum, eine saubere Hierarchie, ruhige Zeilenlängen, korrekt gesetzte Anführungszeichen.
Details, die selten benannt werden, aber darüber entscheiden, ob ein Auftritt hochwertig, klar und professionell wirkt.
Und ja: manchmal ist es wirklich dieses eine Detail in einem Buchstaben – wie ein „a“, ein „g“ oder ein „ß“ gebaut ist – das darüber entscheidet, ob eine Schrift einfach „okay“ wirkt oder ob sie plötzlich Charakter hat. Conny hat das im Studium sogar noch ganz klassisch/analog gelernt: Kalligrafie mit Feder und Tinte. Buchstaben skizzieren, Formen verstehen, Details sehen.
Es geht in diesem Beitrag aber nicht um „die perfekte Schrift“, sondern um Regeln, mit denen du auch als Laie typografisch sicher wirst.
Gleichzeitig ist Typografie genau der Bereich, in dem wir im Branding immer wieder sehen: Ein bisschen Wissen hilft zwar ein Stück weiter, echte Stimmigkeit entsteht aber erst durch Erfahrung, den Blick von außen und Konsequenz in der Umsetzung.
Hier geht es um Typografie als stillen Premium-Hebel: Lesbarkeit, Wirkung und Wiedererkennung, und die typischen Fehler, die einen Auftritt ungewollt nach DIY aussehen lassen.
Wir zeigen dir die wichtigsten Grundlagen, unsere häufigsten Aha-Momente aus Kundenprojekten. Und kleine Stellschrauben, die du sofort anwenden kannst, damit deine Website klarer und hochwertiger wirkt.
Schrift ist im Branding nicht Deko. Schrift ist Stimme. Sie entscheidet, ob deine Website klar, ruhig und souverän wirkt, oder unruhig, beliebig und „selbstgebaut“. Und das Beste: Typografie ist einer der wirksamsten Hebel, den man sehr unmittelbar anwenden kann.
Das Wichtigste in Kürze
Typografie ist einer der schnellsten Premium-Hebel in deinem Branding. Die Basics:
- Max. 2 Schriften (und wenige Schnitte) – sonst wird’s schnell unruhig.
- Klare Hierarchie (Headline, Zwischenüberschriften, Fließtext) – damit man deine Seite sofort scannen kann.
- Mehr Weißraum – Websites sind keine Romane: Deine Inhalte müssen gut gegliedert und schnell erfassbar sein.
- Kontrast & Lesbarkeit ernst nehmen (auch wg. Barrierefreiheit) – „edel“ ist nicht „blass“.
- Konsequent durchziehen (Website, Social, PDF/Print) – das macht deinen Auftritt wiedererkennbar und „aus einem Guss“.
- Rechtschreibung prüfen – Eigentlich logisch, aber häufig vernachlässigt und absolut entscheidend: Tippfehler kosten sofort Vertrauen.
Warum Typografie im Branding so viel ausmacht
Typografie beeinflusst gleichzeitig drei Dinge:
- Lesbarkeit – wird dein Text leicht aufgenommen oder ist es anstrengend deine Inhalte zu lesen?
- Wirkung – wirken deine Inhalte optisch modern, elegant, nahbar, kompetent, verspielt …?
- Wiedererkennung – ziehst du deine Typo konsequent durch, damit man dich sofort wiedererkennt (online & offline)?
Wenn du also das Gefühl hast, dein Branding wirkt nicht stimmig, schau mal auf deine Typografie – oft ist das der schnellste Weg zu mehr Ruhe und Professionalität, ohne gleich alles neu zu machen.
Branding ohne Typografie ist wie Architektur ohne Statik.
Achim Schaffrinna
Die 9 Typo-Fehler, die Websites „DIY“ wirken lassen
Diese Liste ist das, was wir in jedem Website-Check zuerst anschauen. Schau, wo du dich wiedererkennst.:
- Zu kleine Schrift (besonders mobil)
- Zu wenig Zeilenabstand (Text wirkt gequetscht)
- Zu lange Textzeilen (man verliert beim Lesen die Zeile)
- Keine klare Hierarchie (Überschriften wirken wie Fließtext. Die H1–H6-Struktur ist durcheinander)
- Zu viele Schriften & Schriftschnitte (Chaos statt Klarheit)
- Blocksatz im Fließtext (bitte lassen – im Web meist unruhig)
- Fancy-Schriften (schön gedacht, aber oft schwer lesbar – Scriptfonts sind als Headline schon heikel und im Fließtext ein klares No-Go)
- Zu wenig Kontrast (hellgrau auf weiß = macht müde)
- Feinschliff fehlt: Typo-Details & Rechtschreibung (Anführungszeichen, Striche, Abstände, Tippfehler)
Wenn du jetzt bei 3–5 Punkten nickst: Keine Sorge, das ist erstmal ganz normal. Wenn wir mit Kundinnen und Kunden in ein Redesign starten oder uns an die Überarbeitung einer Website machen, sehen wir diese Punkte übrigens fast nie einzeln, sondern als durchgängiges Muster, das den gesamten Auftritt unruhig oder unfertig wirken lässt.
Die Basis: Rechtschreibung & Tippfehler
So ehrlich müssen wir sein: Korrekte Rechtschreibung ist kein „Nice-to-have“. Sie ist die Basis und eben alles andere, als ein charmantes Detail, wie es in letzter Zeit häufig suggeriert wird. Wenn deine Texte voller Tippfehler sind, wirkt selbst das schönste Design und die perfekte Schrift sofort weniger professionell, weil es unbewusst das Signal sendet: Hier wurde nicht sauber gearbeitet. Egal ob Freebie, Angebot oder Premium-Programm. Zu viele Rechtschreibfehler lassen auf Nachlässigkeit schließen und kosten sofort Vertrauen.
Tipp: Lass einmal die Rechtschreibprüfung über deine Texte laufen, lies dir wichtige Seiten laut vor und hol dir im Zweifel eine zweite Person zum Gegenlesen.
Das sind die kleinen Dinge, die kaum jemand bewusst sieht, aber alle spüren: Wirkt dein Text „sauber“ und hochwertig oder eher irgendwie schludrig? Gerade bei Premium-Auftritten machen Typo-Details den Unterschied. Hier die Klassiker, die wir oft in Kundentexten finden:
- Falsche Anführungszeichen: Im Deutschen ist typografisch korrekt „so“ (unten/oben bzw. 99/66) – nicht ”so“ (beide oben) wie auf der Tastatur. https://de.wikipedia.org/wiki/Anführungszeichen
- Bindestrich ≠ Gedankenstrich:
- Bindestrich (-) verbindet Wörter: Premium-Branding, Vorher-Nachher, Grafik- und Webdesign
- Gedankenstrich (–) setzt eine Pause oder einen Einschub.
Und ja: Gedankenstriche sind gerade so ein „KI-Ding“, weil sie in vielen generierten Texten übertrieben oft vorkommen. Wir nutzen sie allerdings schon seit Ewigkeiten – lange bevor KI angefangen hat, überall Gedankenstriche reinzustreuen (haha – hier ist er wieder!). Aber der Gedankenstrich ist nicht das Problem. Die Dosis ist es. Bewusst eingesetzt gibt er einem Text Rhythmus und Klarheit.
- Abstände & Sonderzeichen:
- Preise/€: Entscheide dich für eine Schreibweise (99€ oder 99 €) – und nutze sie dann überall gleich, damit deine Texte „aus einem Guss“ wirken.
- Slash /: Als Trennzeichen in Listen lieber mit Leerzeichen: rot / gelb / blau. In festen Begriffen/Abkürzungen ohne: w/m/d
- Prozent %: Auch hier (wie bei der €-Schreibweise) wäre die typografisch richtige Lösung mit einem schmalen Leerzeichen (Achtelgeviert). Wir wählen für Websites aber gerne die Schreibweise ohne Leerzeichen, also 20%.
Einzeln betrachtet sind das vielleicht eher Kleinigkeiten. In der Summe machen sie aber den Unterschied zwischen „nett gemacht“ und „premium“. In unserem Designprozess denken wir solche Details natürlich immer gezielt mit. Wir legen sehr viel Wert auf einen Auftritt, der insgesamt ruhig, klar und hochwertig wirkt. Gute Typografie ist für uns kein Extra, sondern ein Grundprinzip – und einer unserer Ansprüche an jedes Branding.
Quick Wins:
5 Tipps, die deine Website klarer & hochwertiger machen
Diese Punkte können natürlich kein perfektes Design ersetzen, zeigen dir aber, an welchen Stellschrauben Typografie ihre Wirkung entfaltet. Du musst nicht alles komplett neu denken. Oft reichen ein paar saubere Basics:
1) Maximal 2 Schriftfamilien
Eine für Überschriften, eine für Fließtext. Innerhalb einer Familie kannst du mit Schnitten arbeiten (Regular/Medium/Bold), aber bleib minimalistisch.
Weniger Auswahl = mehr Klarheit.
2) Fließtext größer, als du denkst
Viele Websites verschenken Wirkung, weil alles zu klein gesetzt ist.
Als grobe Orientierung:
- Fließtext am Desktop oft 16–20px
- am Handy eher 16–18px
- Zeilenabstand (line-height) häufig 1.4–1.7
Es geht in erster Linie um leichte und angenehme Lesbarkeit.
3) Zeilenlänge begrenzen
Wenn deine Textzeile über den ganzen Bildschirm läuft, wird’s anstrengend.
Ziel: ca. 60–90 Zeichen pro Zeile (inkl. Leerzeichen).
Das erreichst du über Container-Breite oder gezielte Textspalten.
4) Mehr Weißraum, weniger Textblock
Welche Seiten gefallen dir besonders gut? Du wirst merken, dass sie selten „voll“ oder überladen wirken. Gutes Design hat eine klare Struktur und wirkt luftig.
Kürzere Absätze, mehr Abstand zwischen den Absätzen, klare Zwischenüberschriften.
Weißraum ist kein leeres Loch – er ist die Bühne für deine Botschaft.
Ohne Weißraum wirkt alles gleich wichtig, gleich laut und vor allem gleich anstrengend. Mit sinnvoll genutztem Weißraum an den passenden Stellen führst du den Blick, machst Inhalte leichter konsumierbar und dein Auftritt wirkt automatisch edler und kompetenter.
Eine Website ist kein Roman, dafür gelten andere Regeln. Deine Leser:innen scannen, springen, suchen Orientierung und wollen in Sekunden verstehen: Bin ich hier richtig? Was wird mir hier angeboten? Was habe ich davon? Was ist der nächste Schritt?
Weißraum, Zwischenüberschriften und visuelle Pausen (Bilder, farblich gekennzeichnete Abschnitte etc.) helfen genau dabei.
5) Kontrast nicht unterschätzen
„Edel“ ist nicht „blass“. Das hast du weiter oben schonmal gelesen. Damit ist gemeint, dass z.B. Hellgrau auf Weiß nicht minimalistisch wirkt, sondern oft einfach nur … schwach.
Gute Kontraste sind nicht nur eine „Design-Sache“, sondern es geht auch um Barrierefreiheit. Wenn Text zu hell ist, wird er für viele Menschen (z. B. bei Sehschwäche, Müdigkeit oder am Handy in der Sonne) schwer lesbar. Je besser der Kontrast, desto einfacher kommt deine Botschaft an.
Wenn dir ein reines Schwarz für deinen Fließtext zu hart ist, wähle ein dunkles Grau oder eine sehr dunkle Variante einer deiner Brandingfarben, das wirkt weicher.
Schriftauswahl: Wie man die passende Typo findet
Gute Typografie beginnt nicht bei der Frage „Welche Schrift ist schön?“, sondern bei der Markenwirkung.
In unserem Branding-Prozess arbeiten wir deshalb immer von innen nach außen: erst Identität, Haltung, Tonalität und Positionierung – dann die typografische & gestalterische Übersetzung.
Schriften transportieren Charakter. Sie können ruhig oder laut, nahbar oder distanziert, modern oder klassisch wirken. Welche Richtung passt, lässt sich nicht isoliert entscheiden, sondern nur im Zusammenspiel mit Inhalt, Angebot und Zielgruppe.
Was in Tutorials oft wie ein klarer Entscheidungsprozess aussieht, ist in der Praxis ein Abwägen: Lesbarkeit, Wirkung, technische Umsetzbarkeit und Konsistenz über alle Medien hinweg.
All diese Überlegungen fließen bei uns in einen klaren typografischen Rahmen. Denn wir wollen sicherstellen, dass Schrift nicht nur gut aussieht und sich richtig anfühlt, sondern dass das komplette Konzept auch dauerhaft funktioniert.
So machen wir’s bei Delicious Design:
Wir nutzen z. B. Cormorant Garamond für Headlines (weil sie diesen ruhigen, hochwertigen Editorial-Vibe bringt) und Open Sans im Fließtext (weil sie super lesbar und nicht zu „hart” ist). Und je nach Seite darf es auch pragmatischer sein: Auf Landingpages oder Social Media-Visuals, wo es darum geht, schnell und klar auf den Punkt zu kommen, verwenden wir Open Sans auch als Headlineschrift – dann oft in ExtraBold. Das wirkt klar, fokussiert und funktioniert gut als Eyecatcher.
Schriften kombinieren oder: Typografie funktioniert nur als System
Wir sehen in Brandings häufig ein wildes Mix & Match aus Schriften.
Spoiler: Das macht einen Auftritt selten besser.
Schriften zu kombinieren ist kein kreatives Glücksspiel und auch kein Baukasten-Prinzip.
In der professionellen Typografie geht es nicht darum, zwei „schöne“ Fonts nebeneinanderzustellen, sondern ein System zu schaffen: klare Hierarchien, ruhige Kontraste und eine konsistente Wirkung über alle Medien hinweg.
Was online oft als einfache Pairing-Regel verkauft wird, funktioniert in der Praxis nur dann, wenn Proportionen, Schnitte, Laufweiten und Einsatzbereiche sauber aufeinander abgestimmt sind.
Genau hier entsteht der Unterschied zwischen einem Auftritt, der „ganz OK aussieht“, und einer echten Brand, die souverän wirkt – unabhängig davon, wo sie auftaucht – und durch ihre visuelle Botschaft die richtigen Menschen anzieht.
Goldene Regel: Kombiniere nie zwei sehr ähnliche Schriften, wenn du keinen Plan hast.
Setze entweder einen ganz bewussten Kontrast oder entscheide dich für eine Familie mit verschiedenen Schnitten.
Welche Kombination eine Marke und ihre Botschaft wirklich trägt, hängt immer von Markenkern, Inhalt und Zielgruppe ab.
Mini-Typo-Checkliste für deine Website
Nimm dir die Zeit und mach diesen Check:
Hierarchie
- Gibt es klar erkennbare H1/H2/H3?
- Sind Überschriften deutlich größer als Fließtext?
- Wirken CTA-Buttons wie CTA-Buttons? (Einheitliche Akzentfarbe, einheitliche Schrift)
Lesbarkeit
- Ist der Fließtext am Handy/Desktop angenehm lesbar?
- Ist der Zeilenabstand großzügig genug?
- Sind die Zeilen nicht zu lang (vor allem in der Desktop-Ansicht)?
- Gibt es seltsame Zeilenumbrüche/Wortumbrüche (vor allem mobil)?
Konsistenz
- Sind maximal 2-3 Schriftfamilien im Einsatz?
- Werden Schnitte sparsam genutzt?
- Sind die Abstände zwischen Absätzen/Elementen ruhig und gleichmäßig?
- Nutzt du deine gewählten Schriften auch in SocialMedia & PDF/Print
Wirkung
- Entspricht das Look&Feel deinem Markenkern?
- Würde dein:e Wunschkunde:in deinen Auftritt als kompetent und professionell einstufen?
Wenn du hier strauchelst: kein Drama und erst recht kein Zeichen für Unfähigkeit (du hast deine eigene Expertise). Es ist einfach ein Hinweis darauf, dass eine professionelle Beratung Sinn machen würde. Genau dafür gibt’s unseren kostenlosen Website- & Design-Check. Da schauen wir von außen drauf und sagen dir glasklar, was schon funktioniert und welche Stellschrauben den größten Unterschied machen.
Häufige Fragen unserer Kunden:innen
Wie viele Schriften brauche ich wirklich?
Meist: ein bis zwei, maximal drei (z.B. für Zitate noch eine extra Scriptschrift). Alles darüber macht es selten besser.
Sind Freefonts okay?
Ja, wenn Lizenz, Qualität und Lesbarkeit stimmen. Kostenlos heißt ja nicht automatisch minderwertig, aber du musst sauber prüfen. Vor allem auch Umlaute & Sonderzeichen (bei US-Anbietern fehlen die häufig). Checke unbedingt auch die Lizenzbestimmungen, meist gibt es einen Unterschied zwischen „Personal Use“ und „Commercial Use”.
Woran merke ich, dass eine Schrift nicht zu mir passt?
Wenn du sie nur „schön“ findest, sie aber nicht zu deinem Markenkern und deiner Botschaft passt. Oder wenn du ständig an ihr „rumfummelst“, damit sie wirkt.
Typografie ist dann gut, wenn sie deine Marke unterstützt und ihre Botschaft trägt, statt sie zu ersetzen.
Delicious Design
Diese Punkte können sofort das gesamte Erscheinungsbild verbessern:
- klare Typo-Hierarchie
- bessere Lesbarkeit
- weniger Chaos
- mehr Ruhe
Wenn du willst:
Mach den nächsten Schritt
Wenn du herausfinden möchtest, wo dein Außenauftritt schon stark ist und was ihn eventuell noch „unrund“ wirken lässt, dann hol dir doch gleich mal unsere Branding-Checkliste. Sie ist deine Roadmap und der verlässliche rote Faden durch die wichtigsten Branding-Basics. Damit dein Auftritt am Ende wirklich stimmig und unverwechselbar wirkt.
Und wenn du direkt Feedback willst, ob deine Website (nicht nur) typografisch gut aufgestellt ist, buch dir unseren kostenlosen Website- & Design-Check. Das ist der schnellste Weg zu Klarheit.
