Wissen / Design und Typografie

Website-Schriften auswählen und prüfen

Kurz gesagt: Wählen Sie Website-Schriften anhand echter Texte, benötigter Zeichen und ihres vorgesehenen Einsatzes. Prüfen Sie Lesbarkeit, Vergrößerung, veränderte Textabstände und die Ersatzdarstellung beim Laden. Klären Sie außerdem die Lizenz der konkreten Dateien. Ein kurzer Schriftsteckbrief hält Verwendung, Nachweise und offene Punkte fest, damit Gestaltung und technische Einbindung zusammenpassen.

Veröffentlicht am 23. September 2026 / Aktualisiert am 8. Oktober 2026 / Redaktion: Ruhrstack / 10 Minuten Lesezeit

01 / EINSATZ KLÄREN

Die Schrift muss zu echten Inhalten passen.

Eine Vorschau mit einem kurzen Markennamen ist noch keine Entscheidung für eine ganze Website.

Eine neue Website braucht nicht automatisch eine außergewöhnliche Schrift. Zunächst muss sie Ihre Inhalte tragen: längere Leistungsbeschreibungen, Preise, Telefonnummern, Schaltflächen und kurze Hinweise. Eine charakteristische Überschrift kann gut funktionieren, während derselbe Schnitt im erklärenden Fließtext anstrengend wirkt. Deshalb wird eine Schrift nach ihrer vorgesehenen Aufgabe beurteilt, nicht allein nach einem schönen Beispielbild.

Sammeln Sie vor der Auswahl repräsentative Texte. Dazu gehören eine lange Überschrift, ein Absatz mit mehreren Sätzen, eine echte Adresse und die Beschriftung eines wichtigen Formularfelds. Prüfen Sie auch fachliche Zeichen, Währungen und Schreibweisen, die Ihr Unternehmen tatsächlich verwendet. Bei mehreren Sprachen braucht jede benötigte Sprache eine passende Zeichenabdeckung; eine deutsche Musterzeile reicht dafür nicht.

Notieren Sie außerdem, welche Teile des Markenauftritts bereits verbindlich sind. Eine vorhandene Hausschrift kann ein sinnvoller Ausgangspunkt sein. Ob die verfügbare Datei für den Webeinsatz lizenziert und technisch geeignet ist, muss trotzdem geklärt werden. Das Ziel ist eine begründete Schriftentscheidung, die später nachvollziehbar bleibt. Die übergreifenden Regeln für Farben und Komponenten behandelt ergänzend das Designsystem für kleine Unternehmen.

02 / KANDIDATEN VERGLEICHEN

Vergleichen Sie wenige Kandidaten im selben Layout.

Wenn Text, Größe und Abstände gleichzeitig wechseln, lässt sich der Unterschied kaum sauber beurteilen.

Beginnen Sie mit einer kleinen Auswahl statt mit einer endlosen Sammlung. Setzen Sie dieselben Inhalte in zwei oder drei geeignete Schriftfamilien. Halten Sie zunächst Breite, Schriftgröße und Abstände vergleichbar. Anschließend prüfen Sie für jeden Kandidaten eine passende Ausgestaltung. So trennen Sie die Eigenschaften der Schrift von den Entscheidungen über das Layout.

Achten Sie auf Zeichen, die in Ihrem Angebot leicht verwechselt werden könnten. Bei einer Artikelnummer können etwa ein großes I, ein kleines l und die Ziffer 1 wichtig sein. Bei Kontaktdaten interessieren die Lesbarkeit der Ziffern, des @-Zeichens und der Satzzeichen. Das ist eine eigene praktische Sichtprüfung, kein wissenschaftlicher Nachweis, dass eine bestimmte Schrift für alle Menschen überlegen wäre.

Wählen Sie nur die Schnitte, die eine erkennbare Aufgabe erfüllen. Ein normaler Schnitt für erklärende Texte und ein kräftigerer für Hervorhebungen können genügen. Für Zitate oder fachliche Kennzeichnungen kann zusätzlich ein echter kursiver Schnitt nötig sein. Mehr Varianten machen ein Angebot nicht automatisch verständlicher. Legen Sie fest, was eine Hervorhebung bedeutet, damit später nicht jeder Absatz eine andere optische Gewichtung erhält.

03 / LESBARKEIT PRÜFEN

Lesbarkeit entsteht aus Schrift und Anwendung.

Größe, Zeilenbreite, Abstand und Kontrast müssen gemeinsam am fertigen Inhalt geprüft werden.

Eine Schriftdatei allein macht eine Website weder lesbar noch unlesbar. Prüfen Sie den ganzen Textblock. Zu lange Zeilen können das Zurückfinden erschweren; zu enge Spalten können lange Wörter unpraktisch umbrechen. Überschriften sollen Orientierung geben, während Nebeninformationen erkennbar bleiben. Ein auffälliger Titel hilft wenig, wenn die Beschreibung darunter zu klein oder zu schwach dargestellt wird.

Lesen Sie einen vollständigen Leistungsabsatz auf dem vorgesehenen Smartphone und einem üblichen Bürobildschirm. Prüfen Sie die Seite bei normaler Nutzung, ohne sich nur auf den vergrößerten Gestaltungsentwurf zu verlassen. Lassen Sie eine weitere Person wichtige Angaben suchen und vorlesen. Halten Sie konkrete Schwierigkeiten fest, etwa eine schwer erkennbare Zahl oder einen schlecht nachvollziehbaren Absatz, statt nur „gefällt mir nicht“ zu notieren.

Es gibt keinen einzelnen Schriftwert, der alle Anwendungen zuverlässig löst. Eine feste Mindestgröße ersetzt weder den Blick auf das reale Schriftbild noch eine Prüfung von Kontrast, Struktur und Bedienung. Bei mehreren ähnlichen Kandidaten darf auch die einfachere, gut dokumentierte Lösung gewinnen. Entscheidend ist, ob die Gestaltung die konkrete Aufgabe unterstützt und ihre Eigenschaften auf den benötigten Geräten erhalten bleiben.

04 / TEXT ANPASSEN

Vergrößerung und eigene Abstände gehören zur Schriftprüfung.

Die Schriftentscheidung ist erst belastbar, wenn wichtige Inhalte bei Änderungen lesbar bleiben.

Die W3C-Erläuterung zu WCAG 2.2, Text vergrößern beschreibt für Kriterium 1.4.4 eine Vergrößerung bis 200 Prozent ohne Verlust von Inhalt oder Funktion; Untertitel und Textbilder sind ausgenommen. Prüfen Sie deshalb auch die textlichen Beschriftungen von Formularen und Schaltflächen.

Für WCAG 1.4.12, Textabstände nennt W3C folgende gemeinsam zu prüfende Mindestwerte: Zeilenhöhe 1,5-mal, Abstand nach Absätzen 2-mal, Buchstabenabstand 0,12-mal und Wortabstand 0,16-mal die Schriftgröße. Alle anderen Stile bleiben bei dieser Prüfung unverändert. Inhalt und Funktion müssen erhalten bleiben. Diese Werte sind Prüfbedingungen für eine mögliche Nutzeranpassung. Sie schreiben nicht vor, dass Ihre Ausgangsgestaltung genau diese Abstände verwenden muss.

Praktisch suchen Sie nach abgeschnittenen Überschriften, überlagernden Zeilen und nicht mehr lesbaren Hinweisen. Ein Feld mit fester Höhe kann bei vergrößertem Text zu klein werden. Ein knapper Preisbaustein kann nach einer Abstandsänderung zusätzlichen Raum brauchen. Dokumentieren Sie die konkrete Stelle und die geprüfte Einstellung, damit das Problem reproduzierbar korrigiert werden kann.

Diese Prüfungen betreffen einen Ausschnitt der Zugänglichkeit. Eine geeignete Schrift oder ein bestandener Zoomtest bestätigt keine vollständige WCAG-Konformität. Wenn Sie den umfassenderen Prüfungsbedarf klären möchten, hilft der Grundlagenartikel zu Barrierefreiheit, WCAG und BFSG. Hier bleibt die Aufgabe enger: die typografische Entscheidung unter realen Anpassungen prüfen.

05 / NUTZUNG KLÄREN

Die Freigabe umfasst auch Herkunft und Nutzungsrecht.

Eine vorhandene Schrift auf einem Rechner ist noch keine dokumentierte Erlaubnis für jede Veröffentlichungsform.

Notieren Sie den Namen der Schrift, die Bezugsquelle und die zur konkreten Datei gehörende Lizenz. Klären Sie vor der Einbindung, ob der geplante Webeinsatz und die benötigte Weitergabe erlaubt sind. Wenn eine Agentur Dateien vorbereitet, sollte verständlich sein, welche Dateien Sie später erhalten und welche Nachweise dazugehören. Bei unklaren Bedingungen ist eine gesonderte fachliche Klärung sinnvoll.

Die SIL-FAQ zur Open Font License erlaubt für unter dieser Lizenz veröffentlichte Schriften unter anderem die Nutzung als Webfont. Für Verteilung und Änderungen gelten Bedingungen, etwa zum Erhalt von Lizenzangaben und gegebenenfalls reservierten Schriftnamen. Diese Erlaubnisse gelten für entsprechend lizenzierte Dateien, nicht für jede frei herunterladbare Schrift.

Halten Sie die Lizenzpassage im Projekt knapp, aber auffindbar. Eine abgelegte Lizenzdatei, der ursprüngliche Bezug und die vereinbarten Anwendungsbereiche sind hilfreicher als eine mündliche Aussage „war kostenlos“. Bewahren Sie auch die Entscheidung für die benötigten Schnitte auf. Dieser Beitrag erklärt einen Arbeitsablauf und beurteilt keine individuelle Lizenz- oder Vertragsfrage.

06 / EINBINDUNG WÄHLEN

Systemschrift und Webfont haben unterschiedliche Aufgaben.

Der gewünschte Markenauftritt muss mit einer robusten Textdarstellung zusammenpassen.

Eine Systemschrift nutzt eine auf dem Gerät verfügbare Schriftfamilie. Sie kann ohne zusätzliche Webfont-Datei auskommen, sieht aber je nach Umgebung unterschiedlich aus. Ein Webfont ermöglicht eine gezielt bereitgestellte Schrift. Dafür braucht es geeignete Dateien und einen bewusst geplanten Ladeweg. Beide Varianten sind mögliche Entscheidungen; keine davon passt automatisch zu jedem Unternehmensauftritt.

Die W3C-Spezifikation WOFF2 beschreibt ein für Webfonts geeignetes Format mit verbesserter Kompression und Unterstützung in den großen Browsern. Das Dateiformat beantwortet jedoch nicht, welche Zeichen, Schnitte und Nutzungsrechte Ihr Projekt braucht. Prüfen Sie das vorbereitete Paket anhand der tatsächlichen Inhalte.

Vereinbaren Sie eine Ersatzschrift für den Fall, dass der Webfont noch lädt oder nicht verfügbar ist. Wichtige Texte und Schaltflächen sollen dann weiterhin verständlich bleiben. Beim Wechsel zur vorgesehenen Schrift können sich Zeilenumbrüche und Breiten verändern. Prüfen Sie deshalb auch diesen Zustand und nicht nur eine Sitzung, in der alle Dateien bereits zwischengespeichert sind.

Googles Empfehlungen zur Font-Bereitstellung behandeln unter anderem Schriftwechsel, Dateiumfang und lokale Bereitstellung. Sie stellen klar, dass Selfhosting nicht in jeder Umgebung schneller ist. Die Leistung muss am konkreten Ladeweg geprüft werden. Eine lokale Font-Datei ist zudem keine pauschale Datenschutzgarantie für die gesamte Website.

Die weitergehende Bewertung von Ladeverhalten und Layoutverschiebungen gehört zu Website-Performance und Core Web Vitals. Für die Schriftfreigabe genügt ein klarer Übergabepunkt: Welche Dateien werden verwendet, welche Ersatzdarstellung ist geplant und welche relevanten Zustände wurden am Inhalt geprüft?

07 / AUSWAHLVORLAGE

Ein kurzer Schriftsteckbrief macht die Entscheidung prüfbar.

Die folgende Vorlage ist eine eigene redaktionelle Arbeitshilfe und kein vorgeschriebener Standard.

Erstellen Sie den Steckbrief für jede ernsthaft geprüfte Schriftfamilie. Füllen Sie ihn mit Ihren Inhalten und Anforderungen aus. Ein unbeantwortetes Feld ist ein offener Punkt, keine stillschweigende Freigabe. Sie können die Angaben zunächst in einem einfachen Projektdokument sammeln; zusätzliche Software ist dafür nicht notwendig.

Schriftentscheidung mit Nachweisen festhalten
Angabe	Was Sie eintragen	Nachweis oder offene Frage
Verwendung	Fließtext, Überschriften, Zahlen oder Hinweise	Repräsentative Musterseite benennen
Zeichen und Schnitte	Benötigte Sprachen, Zeichen und Gewichtungen	An echten Texten prüfen
Lesbarkeit	Geprüfte Textarten und Bildschirmgrößen	Beobachtete Schwierigkeiten festhalten
Anpassung	Vergrößerung und geänderte Abstände	Stelle, Einstellung und Ergebnis notieren
Herkunft	Quelle, konkrete Datei und Lizenz	Lizenznachweis oder Klärungsbedarf ablegen
Bereitstellung	Dateien, benötigte Schnitte und Ersatzschrift	Ladezustand und Ersatzdarstellung prüfen
Freigabe	Entscheidung, verantwortliche Person und Datum	Offene Korrekturen ausdrücklich benennen

Der Steckbrief hilft auch bei späteren Änderungen. Wenn ein weiterer Schriftschnitt oder eine neue Sprache hinzukommt, ist erkennbar, welche Voraussetzungen erneut zu prüfen sind. Eine Freigabe für eine einzelne Musterseite sollte nicht versehentlich als Aussage über noch gar nicht erstellte Anwendungen verstanden werden.

08 / PRAXISBEISPIEL

Zwei passende Schriften können unterschiedlich geeignet sein.

Dieses Beispiel ist fiktiv und beschreibt keine Kundenarbeit oder gemessenen Ergebnisse von Ruhrstack.

Ein kleiner Handwerksbetrieb möchte eine vorhandene markante Schrift auch auf der Website verwenden. Im Logo funktioniert sie gut. Bei einem längeren Leistungsabsatz, Telefonnummern und kurzen Formularhinweisen ist das Schriftbild jedoch weniger klar. Das Team prüft deshalb eine zweite Familie für die erklärenden Texte, während die markante Schrift für ausgewählte Überschriften vorgesehen bleibt.

Auf der Musterseite werden dieselben Inhalte in beiden Varianten dargestellt. Die Beteiligten vergleichen insbesondere eine längere Überschrift und die Angabe eines Maßes mit Dezimalstelle. Nach der Vergrößerung passt ein Hinweis nicht mehr in seinen ursprünglichen Baustein. Die Lösung liegt hier in einem flexibleren Baustein; ein Austausch der Schrift allein wäre keine ausreichende Korrektur.

Vor der Freigabe klärt der Betrieb die verwendbaren Dateien und dokumentiert die Ersatzschrift. Die fertige Entscheidung lautet nicht „diese Schrift ist immer besser“, sondern beschreibt den vorgesehenen Einsatz und die geprüften Zustände. Damit erhält die nächste bearbeitende Person eine verständliche Grundlage, statt die Auswahl aus einer Bildschirmaufnahme erraten zu müssen.

09 / ZUSAMMENARBEIT

Was Sie vorbereiten können und was gemeinsam geprüft wird.

Eine gute Schriftentscheidung verbindet Unternehmenswissen, Gestaltung und technische Umsetzung.

Sie können selbst geeignete Textbeispiele sammeln, vorhandene Markenunterlagen suchen und Ihre Alltagssituationen beschreiben. Eine kleine Auswahl mit gut nachvollziehbarer Herkunft ist oft hilfreicher als viele unverbindliche Favoriten. Diese Vorbereitung macht das Gespräch konkreter und lässt sich auch bei einer mit Baukasten oder KI begonnenen Website verwenden.

Professionelle Zusammenarbeit bringt vor allem die unterschiedlichen Anforderungen zusammen: Die Gestaltung prüft Hierarchie und Schriftbild, die Umsetzung berücksichtigt Dateien und Ersatzdarstellung, und die fachlich verantwortliche Person bestätigt die realen Inhalte. Bei Ruhrstack ist die Auswahl von Schriften und Größen sowie die Prüfung auf vorgesehenen Bildschirmgrößen auf der Leistungsseite Design beschrieben. Umfang, benötigte Anwendungen und Übergabe werden für das konkrete Vorhaben vereinbart.

Bitten Sie zum Abschluss um eine Entscheidung mit begründetem Einsatz, passenden Dateien und dokumentierten offenen Punkten. Eine schöne Schriftliste allein reicht dafür nicht. Der Mehrwert entsteht, wenn die gewählte Typografie am tatsächlichen Inhalt funktioniert und ihre weitere Verwendung verständlich geregelt ist.

10 / QUELLEN

Quellen und redaktioneller Stand.

Die Quellen wurden am 8. Oktober 2026 geprüft. Auswahlvorlage und fiktives Beispiel sind eigene redaktionelle Arbeitshilfen. Die Lizenzhinweise beziehen sich auf die jeweils beschriebenen Bedingungen und ersetzen keine individuelle Prüfung.

Redaktion: Ruhrstack, Dortmund
Veröffentlicht: 23. September 2026
Aktualisiert: 8. Oktober 2026
Quellen geprüft: 8. Oktober 2026

W3C: WCAG 2.2, Text vergrößern, abgerufen am 8. Oktober 2026.
W3C: WCAG 2.2, veränderbare Textabstände, abgerufen am 8. Oktober 2026.
SIL: Fragen zur Open Font License, abgerufen am 8. Oktober 2026.
W3C: WOFF File Format 2.0, abgerufen am 8. Oktober 2026.
Google web.dev: Best practices for fonts, abgerufen am 8. Oktober 2026.

Redaktioneller Hinweis: Dieser Beitrag dient der allgemeinen Information und ersetzt keine Einzelfallprüfung. Trotz sorgfältiger Recherche wird keine Gewähr für Vollständigkeit und fortdauernde Aktualität übernommen. Eine Haftung nach zwingenden gesetzlichen Vorschriften bleibt unberührt. Redaktionelle Einordnung.

Website-Schriften auswählen und prüfen

Welche Schrift passt zu Ihrem Auftritt?