Zwei Websites, derselbe Text, dieselben Bilder. Die eine wirkt wie eine Firma, der man ein Projekt anvertraut, die andere wie ein Bastelprojekt vom Wochenende.
Der Unterschied liegt fast immer in der Typografie. Sie ist das Handwerk, mit dem aus Text eine Seite wird, und genau dieses Handwerk lernst du in dieser Lektion.
Kurzantwort
Was bedeutet Typografie im Webdesign?
Typografie im Webdesign umfasst alle Entscheidungen rund um die Schrift einer Website: welche Schriftart, in welchen Größen und Gewichten, mit welcher Zeilenhöhe und Zeilenlänge. Weil eine Website ganz überwiegend aus Text besteht, prägt Typografie den ersten Eindruck stärker als jedes andere Gestaltungsmittel.
Gute Typografie ist Handwerk mit wenigen, lernbaren Regeln. Wer sie kennt, sieht nicht mehr “wirkt irgendwie billig”, sondern “die Zeilen sind zu lang und der Text zu hellgrau”, und kann beides beheben.
📌 Für wen ist das relevant: Für alle, die eine Website beauftragen, abnehmen oder selbst bauen und wollen, dass sie professionell wirkt und Anfragen bringt.
- Du lernst jede Regel am durchlaufenden Beispiel der Schreinerei Brenner
- Eine Schrift, eine Staffel, klare Grenzen: mehr braucht eine Seite selten
- Am Ende führst du die Typo-Inventur auf deiner eigenen Seite durch
Das lernst du in dieser Lektion
Du kannst eine Schrift begründet auswählen und erkennen, ob sie als Textschrift trägt.
Du kannst eine Typo-Staffel aus Größen, Gewichten und Zeilenhöhen für deine Seite festlegen.
Du kannst ein Schrift-Pairing bauen oder ein schlechtes auf den ersten Blick erkennen.
Du kannst Lesbarkeitsfehler wie schwachen Kontrast oder überlange Zeilen finden und beheben.
Inhalt
01 ·
Warum Typografie über den ersten Eindruck entscheidet
Blende auf einer beliebigen Website gedanklich alle Bilder aus. Was übrig bleibt, ist fast die ganze Seite: Headlines, Menüpunkte, Absätze, Buttons, Formulare, alles Text.
Deshalb ist Typografie keine Dekoration, die man dem Text nachträglich anzieht. Sie ist das Interface selbst: Jede Information, die deine Seite vermittelt, und jede Handlung, zu der sie auffordert, läuft durch gesetzte Schrift.
Diese Lektion arbeitet wie der ganze Kurs am Beispiel der Schreinerei Brenner, einer frei erfundenen Handwerksfirma, deren Website Beratungsanfragen bringen soll. Ihr Willkommenstext steht unten zweimal: einmal so, wie er aus dem Textdokument in den Baukasten kopiert wurde, einmal typografisch gesetzt.
Ein Rahmensatz vorweg, damit du weißt, worauf du dich stützt: Die Regeln dieser Lektion sind Handwerkskonvention, keine Naturgesetze. Aber sie sind der geteilte Standard des Fachs, und mit ihnen kannst du jede Typografie-Diskussion führen, ob mit deiner Agentur oder mit dir selbst am Baukasten.
Schaubild: derselbe Brenner-Text, einmal lieblos und einmal gesetzt. Kein Wort wurde besser, nur die Schrift wurde geführt.
Der linke Block ist inhaltlich in Ordnung und trotzdem der Grund, warum Besucher weiterziehen. “Wirkt billig” lässt sich hier präzise festmachen: keine erkennbare Überschrift, alle Zeilen gleich groß und gleich grau, die Zeilen zu dicht und zu lang. Rechts wurde nichts hinzugedichtet, sondern nur gesetzt, und plötzlich liest sich dieselbe Firma wie ein Profi-Betrieb.
Genau diese Handgriffe lernst du in den nächsten Sektionen: Schrift wählen, Größen staffeln, kombinieren, Lesbarkeit sichern. Was auf die Seite gehört und in welcher Reihenfolge, hast du in der Lektion zu Wireframes und Seitenstruktur geklärt, hier geht es um die Form, die dieser Inhalt bekommt.
💡 Merke
Typografie ist nicht die Dekoration des Texts, sie ist das Interface. Eine Website besteht ganz überwiegend aus Text, also ist die Schrift das Erste, was ein Besucher von deiner Sorgfalt sieht. Wer an der Typografie spart, spart am sichtbarsten Teil der Seite.
Für die Conversion heißt das: Der erste Eindruck entscheidet, ob überhaupt gelesen wird. Und nur wer liest, findet den Weg zur Anfrage.
02 ·
Eine Schrift wählen: Systematik statt Geschmack
Die Schriftwahl fühlt sich wie eine Geschmacksfrage an, ist aber zuerst eine Systemfrage. Bevor du einzelne Schriften vergleichst, entscheidest du dich für eine Familie, denn jede Familie sendet ein Signal, noch bevor ein einziges Wort gelesen ist.
Vier Familien musst du kennen. Serifenschriften tragen kleine Füßchen an den Buchstaben und signalisieren Tradition, Etabliertheit und redaktionelle Ernsthaftigkeit. Serifenlose Schriften, die Sans Serifs, wirken sachlich, modern und neutral, weshalb sie im Web der Standard für Fließtext geworden sind.
Dazu kommen zwei Spezialisten. Display-Schriften sind auf Wirkung gebaut, laut und markant, aber nur für kurze Worte in großen Größen gedacht, nie für Absätze. Monospace-Schriften geben jedem Buchstaben dieselbe Breite und wirken technisch, wie Code, was für eine Schreinerei das falsche Signal wäre.
Schaubild: die vier Schriftfamilien am Brenner-Schriftzug. Die Wahl der Familie ist die erste und wichtigste Signalentscheidung.
Eine gute Schrift reicht meistens
Die überraschendste Regel des Handwerks: Für die meisten Websites reicht eine einzige gute Schrift mit mehreren Schnitten. Ein Schnitt ist eine Variante derselben Schrift, etwa Light, Regular, Semibold oder Bold, und mit drei bis vier Schnitten baust du bereits alle Rangstufen einer Seite.
Woran erkennst du eine tragfähige Textschrift? Sie bringt mehrere Gewichte mit, damit du Rangfolgen ohne Zweitschrift bauen kannst. Sie hat eine echte Kursive statt nur schräg gestellter Buchstaben, sie bietet Ziffernvarianten für Tabellen und Preise, und ihr Sprachumfang deckt Deutsch vollständig ab, mit echten Umlauten und ß statt ersatzweise gesetzter Zeichen.
Diese vier Kriterien machen aus der Geschmacksfrage eine Checkliste. Zwei Schriften, die dir beide gefallen? Nimm die, die mehr Gewichte, eine echte Kursive und den vollen Sprachumfang mitbringt.
ℹ️ Wo Webschriften herkommen
Die verbreitetsten Bezugsquellen für Webschriften sind Bibliotheken wie Google Fonts und Adobe Fonts. Dort kannst du jede Schrift vor der Entscheidung prüfen: Wie viele Gewichte gibt es, existiert eine echte Kursive, sind die deutschen Sonderzeichen sauber gezeichnet? Tipp die Probewörter selbst ein, am besten ein Wort deiner Branche mit Umlaut, etwa “Maßmöbel” oder “Küchenfront”.
💡 Praxis-Tipp
Mach heute die Schrift-Inventur auf deiner eigenen Website. Öffne die Entwickler-Tools des Browsers mit einem Rechtsklick auf einen Textabsatz und “Untersuchen”, und lies im Bereich “Computed” oder “Berechnet” die Eigenschaft font-family ab.
Wiederhol das für Headline, Fließtext, Button und Menü und schreib die Ergebnisse untereinander. Findest du mehr als zwei Schriftfamilien, hast du das erste konkrete Aufräumziel dieser Lektion gefunden.
Für die Conversion heißt das: Die Schriftfamilie entscheidet mit, ob dein Betrieb auf den ersten Blick als seriös gelesen wird. Und Seriosität ist die Eintrittskarte, ohne die niemand ein Formular ausfüllt.
03 ·
Die Staffel: Größen, Gewichte, Zeilenhöhe
Mit der gewählten Schrift baust du als Nächstes die Staffel: ein festes System aus wenigen Schriftgrößen, das die Rangordnung deiner Seite trägt. Die Staffel ist für die Typografie, was das Abstandssystem für das Layout ist, wenige Stufen mit klaren Sprüngen.
Eine bewährte Staffel für eine kleine Firmenwebsite sieht so aus: 16 Pixel für den Fließtext, 20 für hervorgehobene Einstiege, 28 für Zwischenüberschriften, 40 für die Headline. Die konkreten Zahlen sind Handwerksempfehlung, entscheidend ist das Muster: deutliche Sprünge statt Trippelschritte, denn eine Staffel wie 16, 18 und 20 kann das Auge kaum als Rangfolge lesen.
Eine Untergrenze gehört fest in dein System: Fließtext nie unter 16 Pixel. Kleinere Grade zwingen vor allem mobile Besucher zum Zoomen, und wer zoomen muss, liest nicht weiter. Warum die Größensprünge selbst die Hierarchie einer Seite tragen, vertiefst du in der Lektion zu den Design-Prinzipien.
Schaubild: zwei Staffeln an der Brenner-Hero. Rechts wurde keine Zeile umformuliert, nur die Größensprünge wurden vergrößert.
Zeilenhöhe und Zeilenlänge gehören zur Staffel
Zur Staffel gehört für jede Stufe eine Zeilenhöhe. Im Fließtext hat sich das rund 1,5-Fache der Schriftgröße bewährt, bei 16 Pixel Text also etwa 24 Pixel von Zeile zu Zeile. Headlines vertragen deutlich weniger, etwa das 1,1- bis 1,2-Fache, weil große Zeilen mit viel Luft dazwischen auseinanderfallen.
Die dritte Stellgröße ist die Zeilenlänge. Als gut lesbar gilt im Handwerk ein Bereich von etwa 45 bis 75 Zeichen pro Zeile, deutlich längere Zeilen lassen das Auge beim Zeilenwechsel die Anschlusszeile verlieren. Auf breiten Bildschirmen erreichst du den Bereich, indem du Textspalten in der Breite begrenzst, statt sie über die volle Fensterbreite laufen zu lassen.
Ein Detail für Fortgeschrittene: negative Laufweite, also enger gestellte Buchstabenabstände, gehört ausschließlich zu großen Headlines. Dort lässt sie große Grade kompakt und gesetzt wirken, im Fließtext verklebt sie die Wörter.
💡 Merke
Fließtext nie unter 16 Pixel, Zeilenhöhe um 1,5, Zeilenlänge 45 bis 75 Zeichen. Diese drei Werte sind das Sicherheitsnetz deiner Staffel. Wer sie einhält, kann bei den Größensprüngen mutig sein, ohne die Lesbarkeit zu riskieren.
💡 Praxis-Tipp
Leg heute deine Staffel schriftlich fest, bevor du irgendetwas an der Seite änderst. Vier Zeilen reichen: Fließtext 16, Einstieg 20, Zwischenüberschrift 28, Headline 40, dazu die Zeilenhöhen 1,5 für Text und 1,15 für Headlines.
Dann geh deine Startseite durch und ordne jede vorhandene Textgröße einer dieser Stufen zu. Jede Größe, die keiner Stufe entspricht, wird auf die nächstliegende gerundet, so entsteht Ordnung ohne einen einzigen neuen Text.
Für die Conversion heißt das: Die Staffel ist die Blickführung deiner Seite. Sie sorgt dafür, dass das Auge von der Headline über das Angebot bis zum Anfrage-Button geführt wird, statt irgendwo in gleichförmigem Text zu versanden.
04 ·
Schriften kombinieren, ohne dass es scheppert
Bevor du eine zweite Schrift dazunimmst, stell die Gegenfrage: Wozu? Eine gute Textschrift mit mehreren Gewichten deckt Headline, Fließtext und Button bereits ab, und eine Schrift weniger ist eine Fehlerquelle weniger.
Eine Zweitschrift lohnt sich dann, wenn sie eine echte Aufgabe bekommt: den Headlines einen eigenen Charakter geben, den der Rest der Seite bewusst nicht hat. Die Schreinerei Brenner könnte etwa eine Serif für die Überschriften wählen, die nach Werkstatt und Tradition klingt, während eine nüchterne Sans den Fließtext lesbar hält.
Damit das funktioniert, gilt das Kontrast-Prinzip: deutlich verschieden oder gar nicht. Serif plus Sans ist die klassische, fast immer tragfähige Kombination, zwei ähnliche Sans dagegen sind die klassische Falle. Der Unterschied ist dann zu klein, um als Absicht gelesen zu werden, und zu groß, um unsichtbar zu bleiben, das Ergebnis wirkt wie ein Versehen.
Schaubild: Pairing an der Brenner-Hero. Links konkurrieren zwei ähnliche Schriften, rechts trägt jede eine eigene Rolle.
Rollen fest vergeben, dann durchhalten
Ein Pairing funktioniert nur mit festen Rollen: eine Schrift für Headlines, eine für alles andere, also Fließtext, Buttons, Menü und Formulare. Sobald die Rollen auf einer Unterseite wechseln, zerfällt der Effekt, denn Wiedererkennung entsteht durch Wiederholung.
Die Obergrenze ist ebenso klar: maximal zwei Familien, allenfalls ergänzt um einen sehr sparsam eingesetzten Akzent, etwa eine Handschrift für einzelne Hervorhebungen. Jede weitere Schrift verwässert das Signal und kostet zusätzlich Ladezeit, denn jede Familie muss vom Besucher mitgeladen werden.
💡 Merke
Deutlich verschieden oder gar nicht. Ein Pairing braucht sichtbaren Kontrast wie Serif plus Sans und fest verteilte Rollen. Zwei ähnliche Schriften sind kein dezentes Pairing, sondern ein Fehler, den jeder sieht und niemand benennen kann.
Für die Conversion heißt das: Ein konsistentes Pairing macht deine Seite wiedererkennbar, und Wiedererkennung liest der Besucher als Verlässlichkeit. Wer verlässlich wirkt, bekommt eher die Anfrage als der Wettbewerber mit dem Schriften-Sammelsurium.
05 ·
Lesbarkeit: die harten Grenzen
Alles bisher war Gestaltungsspielraum mit Empfehlungen. Jetzt kommen die Grenzen, an denen der Spielraum endet, weil dahinter Text steht, den ein Teil deiner Besucher schlicht nicht mehr lesen kann.
Die wichtigste Grenze ist der Kontrast zwischen Schrift und Hintergrund. Die WCAG, die international maßgeblichen Richtlinien für barrierefreie Webinhalte, verlangen ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text. Das sind die einzigen normierten Zahlenwerte dieser Lektion, alles andere ist Handwerkspraxis.
Im Alltag scheitert der Kontrast fast immer an einem einzigen Muster: hellgrauer Text auf weißem Grund, weil er “eleganter” wirken soll. Als Faustwert trägt auf Weiß ein Grau ab etwa #595959, hellere Grautöne fallen unter die 4,5:1-Grenze. Was aus den WCAG seit dem BFSG rechtlich folgt, behandelt die Lektion zur Barrierefreiheit.
ℹ️ Was das Kontrastverhältnis misst
Das Kontrastverhältnis vergleicht die Helligkeit von Schriftfarbe und Hintergrundfarbe, von 1:1 (kein Unterschied) bis 21:1 (Schwarz auf Weiß). Du musst es nie selbst berechnen: Kostenlose Kontrast-Checker im Netz und die Entwickler-Tools der Browser zeigen dir den Wert für jedes Farbpaar direkt an, inklusive bestanden oder nicht bestanden.
Drei weitere Grenzen, die keine Geschmacksfragen sind
Neben dem Kontrast gibt es drei Muster, die Fließtext zuverlässig schwer lesbar machen. Längere Passagen in Großbuchstaben, weil die gleichförmigen Wortbilder das schnelle Erfassen bremsen, Versalien gehören in kurze Labels, nicht in Absätze. Längere Passagen kursiv, weil die geneigten Formen im Fließtext anstrengen, Kursive ist ein Hervorhebungswerkzeug für einzelne Wörter.
Und drittens: längere Passagen zentriert. Bei zentriertem Text beginnt jede Zeile an einer anderen Stelle, das Auge muss den Anfang jeder Zeile neu suchen. Zentrierung verträgt eine Headline mit einer Unterzeile, aber keinen Absatz.
Zum Absatz gehört noch die Satzart: Im Web setzt du Flattersatz, also linksbündig mit ungleichen Zeilenenden, nicht Blocksatz. Browser beherrschen die für sauberen Blocksatz nötige Silbentrennung nur unzuverlässig, und ohne sie reißt Blocksatz unschöne Lücken zwischen die Wörter.
Schaubild: drei Lesbarkeits-Fälle. Links jeweils das verbreitete Muster, rechts die Fassung, die auch unter schlechten Bedingungen lesbar bleibt.
💡 Praxis-Tipp
Mach heute den Kontrast-Check auf deiner Startseite. Öffne die Entwickler-Tools, klick mit dem Inspektor auf einen Textabsatz und dann auf das Farbfeld neben der color-Eigenschaft: Browser wie Chrome zeigen dort das Kontrastverhältnis direkt an.
Prüf die drei üblichen Verdächtigen: hellgrauen Fließtext, Text auf Fotos und die Beschriftung von Buttons. Alles unter 4,5:1 kommt auf die Fix-Liste, meist reicht es, das Grau eine Stufe dunkler zu stellen.
Für die Conversion heißt das: Niemand kämpft sich durch ein Angebot, das anstrengend zu lesen ist. Jeder Besucher, den zu heller Text oder eine Versalien-Wüste zum Abbrechen bringt, war eine mögliche Anfrage. Wie du Bedienbarkeit über die Schrift hinaus prüfst, zeigt die Lektion zu den Usability-Grundlagen.
06 ·
Die Brenner-Seite typografisch aufgeräumt
Zeit für den Gesamtblick. Unten steht die Brenner-Startseite zweimal: links mit den typografischen Fehlern, die du jetzt alle benennen kannst, rechts mit allem, was diese Lektion aufgebaut hat.
Links laufen drei Schriftfamilien durcheinander, die Headline ist kaum größer als der Text und zu hell, die Zeilen sind lang und dicht, die Zwischenüberschrift steht zentriert in Versalien. Rechts trägt eine Familie mit klaren Gewichten die ganze Seite, die Staffel macht die Rangfolge sichtbar, und jeder Absatz bleibt in den Lesbarkeitsgrenzen.
Schaubild: der Gesamtvergleich der Brenner-Startseite. Zwischen beiden Fassungen liegt kein neuer Inhalt, sondern eine Schrift, eine Staffel und drei Lesbarkeitsgrenzen.
Die Staffel arbeitet dabei Hand in Hand mit den Größensprüngen aus der Lektion zu den Design-Prinzipien: Typografie legt die Stufen fest, Hierarchie entscheidet, welches Element auf welcher Stufe steht. Beide zusammen führen den Blick von der Headline zum Anfrage-Button.
Die Typo-Inventur in fünf Schritten
Damit du das auf deine eigene Seite übertragen kannst, hier die komplette Prüfreihenfolge als Liste. Jeder Schritt dauert wenige Minuten, und du brauchst dafür nur deinen Browser.
| Schritt | Der Handgriff | Grenze oder Regel |
|---|---|---|
| 1. Schriften zählen | DevTools: font-family von Headline, Fließtext, Button und Menü ablesen | Maximal zwei Familien mit festen Rollen |
| 2. Staffel prüfen | Alle Textgrößen notieren und den Stufen zuordnen | Klare Sprünge wie 16/20/28/40, Fließtext nie unter 16 Pixel |
| 3. Zeilen messen | Zeichen pro Zeile im breitesten Absatz zählen | 45 bis 75 Zeichen, Flattersatz statt Blocksatz |
| 4. Kontrast checken | Farbfeld im Inspektor öffnen, Wert ablesen | Mindestens 4,5:1, Grau auf Weiß ab etwa #595959 |
| 5. Sonderfälle suchen | Versalien, Kursives und Zentriertes im Fließtext aufspüren | Nur für kurze Labels und einzelne Hervorhebungen |
Experten-Tipp aus der Agentur
Prüf Typografie zuerst am Handy, nicht am großen Monitor. Auf dem 27-Zoll-Bildschirm wirkt fast jede Schrift edel, auf einem Handydisplay im Tageslicht zeigen sich zu kleiner Text, zu helles Grau und zu enge Zeilen sofort. Wenn die Seite dort angenehm lesbar ist, ist sie es überall.
Pascal Cabitza
Geschäftsführer Ostend Digital
Für die Conversion heißt das: Die Typo-Inventur ist die günstigste Überarbeitung, die eine Website bekommen kann. Sie kostet einen Nachmittag, keinen neuen Text und kein neues Design, und sie räumt genau die Hürden weg, die zwischen Lesen und Anfragen stehen.
07 ·
💡 Recap
Typografie im Webdesign in 30 Sekunden:
- Typografie ist das Interface. Eine Website besteht ganz überwiegend aus Text, deshalb entscheidet die Schrift den ersten Eindruck, nicht die Bilder
- Familie zuerst: Serif signalisiert Tradition, Sans Sachlichkeit, Display ist nur für kurze Worte, Mono wirkt technisch. Eine gute Schrift mit mehreren Schnitten reicht meistens
- Tragfähige Textschrift: mehrere Gewichte, echte Kursive, Ziffernvarianten und voller Sprachumfang mit echten Umlauten
- Die Staffel: klare Sprünge wie 16/20/28/40 statt Trippelschritten, Fließtext nie unter 16 Pixel, Zeilenhöhe um 1,5 im Text und 1,1 bis 1,2 in Headlines, Zeilenlänge 45 bis 75 Zeichen
- Kombinieren: deutlich verschieden oder gar nicht, feste Rollen, maximal zwei Familien plus allenfalls ein sparsamer Akzent
- Harte Grenzen: Kontrast mindestens 4,5:1 (großer Text 3:1), Grau auf Weiß ab etwa #595959, Versalien, Kursives und Zentriertes nur für Kurzes, Flattersatz im Web
08 ·
Selbstcheck: kannst du das anwenden?
Eine Schrift gefällt dir richtig gut, sie bringt aber nur ein einziges Gewicht mit und hat keine echte Kursive. Nimmst du sie als Textschrift für deine Website?
Nein, so schön sie ist. Eine Textschrift muss die ganze Seite tragen, und dafür braucht sie mehrere Gewichte für die Rangstufen, eine echte Kursive für Hervorhebungen und den vollen deutschen Sprachumfang. Mit nur einem Gewicht müsstest du Rangfolgen über eine Zweitschrift bauen, als Display-Schrift für kurze, große Worte kann sie aber trotzdem einen Platz bekommen.
Der Entwurf deiner neuen Seite setzt den Fließtext in 14 Pixel, die Headline in 18, und die Zeilenhöhe steht überall auf dem 1,2-Fachen. Was diagnostizierst du?
Drei Staffel-Fehler auf einmal. Der Fließtext liegt unter der 16-Pixel-Untergrenze, der Sprung von 14 auf 18 ist ein Trippelschritt, den das Auge kaum als Rangfolge liest, und 1,2-fache Zeilenhöhe ist für Fließtext zu eng, sie gehört in die Headline. Der Fix ist eine komplette Staffel, etwa 16/20/28/40 mit Zeilenhöhe 1,5 im Text.
Deine Agentur schlägt ein Pairing aus zwei serifenlosen Schriften vor, die du im Entwurf kaum auseinanderhalten kannst. Wie reagierst du?
Mit dem Kontrast-Prinzip: deutlich verschieden oder gar nicht. Zwei ähnliche Sans konkurrieren um dieselbe Aufgabe, der kleine Unterschied liest sich als Versehen statt als Absicht. Frag, welche Aufgabe die zweite Schrift erfüllt, die die erste mit einem zusätzlichen Gewicht nicht erfüllen könnte: Gibt es keine, reicht eine Familie, gibt es eine, braucht sie sichtbaren Kontrast, etwa als Serif für die Headlines.
Auf deiner Über-uns-Seite steht der Fließtext in hellem Grau auf Weiß, und die Team-Vorstellung ist komplett zentriert gesetzt. Was prüfst und was änderst du?
Zuerst den Kontrast messen: Farbfeld im Browser-Inspektor öffnen und das Verhältnis ablesen, unter 4,5:1 muss das Grau dunkler werden, auf Weiß trägt es ab etwa #595959. Danach die Zentrierung: Sie darf für die Überschrift mit Unterzeile bleiben, die Absätze stellst du auf linksbündigen Flattersatz um, damit das Auge jeden Zeilenanfang findet. Beides zusammen ist in einer Stunde erledigt.
Ein Bekannter sagt über deine Website nur: “Die wirkt irgendwie billig.” Wie machst du aus diesem Gefühl eine Arbeitsliste?
Mit der Typo-Inventur in fester Reihenfolge: Schriften zählen (maximal zwei Familien mit festen Rollen), Staffel prüfen (klare Sprünge, Fließtext nicht unter 16 Pixel), Zeilenlänge messen (45 bis 75 Zeichen), Kontrast checken (mindestens 4,5:1), Sonderfälle wie Versalien-Absätze und Zentriertes aufspüren. Jeder Verstoß ist ein konkreter, benennbarer Punkt auf der Fix-Liste, und aus “irgendwie billig” wird ein Nachmittag Arbeit.
Alle Lektionen des Webdesign- und CRO-Kurses im Überblick →
Quellen und Stand (3 Einträge)
- W3C: “Understanding WCAG 2.2”, Erfolgskriterium 1.4.3 Contrast (Minimum): Kontrastverhältnis mindestens 4,5:1 für normalen Text und 3:1 für großen Text, Stufe AA (w3.org/WAI/WCAG22/Understanding, abgerufen 16.08.2026). Das sind die einzigen normierten Zahlenwerte dieser Lektion, der Faustwert von etwa #595959 als hellstes Grau auf Weiß ist die daraus abgeleitete Näherung. Quellentyp: Richtlinie, keine Interessenlage
- Alle übrigen Regeln und Zahlenwerte dieser Lektion, darunter die Staffel 16/20/28/40, die Untergrenze 16 Pixel für Fließtext, die Zeilenhöhen um 1,5 und 1,1 bis 1,2, der Zeilenlängen-Bereich von 45 bis 75 Zeichen, die Signalwirkung der Schriftfamilien und die Pairing-Regeln: verbreitete Handwerkspraxis des Webdesigns, Einordnung Ostend Digital, Stand 08/2026. Sie sind im Text bewusst als bewährte Empfehlungen formuliert, nicht als Messwerte. Google Fonts und Adobe Fonts sind als verbreitete Bezugsquellen genannt, ohne Empfehlung einzelner Schriften
- Das durchlaufende Beispiel “Schreinerei Brenner” ist frei erfunden und bezeichnet keine echte Firma. Alle sechs Schaubilder sind eigene Darstellungen, die Schriftwirkung ist mit generischen Systemschriften (serif, sans-serif, monospace) dargestellt, Ostend Digital, Stand 08/2026
Du willst eine Website, deren Schrift verkauft statt nur dazustehen?
Wir setzen jede Seite nach genau diesen Regeln: eine tragfähige Schrift, eine klare Staffel, Lesbarkeit in den Grenzen, und begründen dir jede Entscheidung an der Aufgabe deiner Seite.
