Schriftarten für Ihre Website: Lesbarkeit mit echten Texten prüfen

Eine Schrift kann im Logo hervorragend aussehen und für eine lange Leistungsbeschreibung trotzdem unpraktisch sein. Auf einer Website muss sie viele Aufgaben übernehmen: Überschriften ordnen den Inhalt, Absätze erklären das Angebot und kleine Beschriftungen führen durch Formulare. Die Auswahl sollte an diesen Anwendungen geprüft werden.

Beurteilen Sie Schriftarten deshalb mit Ihren eigenen Texten. Ein kurzer englischer Mustername verrät wenig darüber, wie „Gebäudereinigung und Grundstückspflege“ im mobilen Menü aussieht. Auch Telefonnummern, Umlaute und längere Fehlermeldungen gehören in den Entwurf.

Wenige Schriftrollen nachvollziehbar festlegen

Für eine Unternehmenswebsite lässt sich zunächst zwischen Überschriften, Lesetext und Bedienung unterscheiden. Diese Rollen müssen nicht aus drei Schriftfamilien bestehen. Eine Familie mit geeigneten Schriftschnitten kann alle Aufgaben übernehmen. Eine zweite Schrift ist sinnvoll, wenn sie eine konkrete gestalterische Aufgabe erfüllt und mit der ersten zusammen funktioniert.

Beispielsweise könnte eine markante Überschrift den Einstieg prägen, während eine ruhigere Schrift die Leistungsbeschreibung trägt. Im Anfrageknopf zählt wiederum, dass der kurze Text klar erkennbar ist. Werden alle Bereiche besonders auffällig gestaltet, geht diese Abstufung verloren.

Mit diesen Textproben vergleichen Sie Entwürfe

Die folgende Tabelle ist eine Arbeitsvorlage für die Auswahl. Lassen Sie die gleichen Zeilen in den vorgesehenen Schriften und Größen darstellen. Die Beispiele sind keine Pflichttexte für Ihre Website.

Ändern Sie beim Vergleich zunächst nur die Schrift. Wenn gleichzeitig Textbreite, Farbe und Größe wechseln, ist schwer zu erkennen, was die bessere Lesbarkeit verursacht. Danach werden die Abstände passend zur gewählten Schrift eingestellt.

Zeilenlänge und Schriftgröße zusammen beurteilen

Auf einem großen Monitor muss ein Absatz nicht die gesamte Bildschirmbreite ausfüllen. Sehr lange Zeilen erschweren es, den Anfang der nächsten Zeile wiederzufinden. Eine schmale Spalte kann umgekehrt zu so vielen Umbrüchen führen, dass zusammengehörige Begriffe auseinanderfallen.

Als Entwurfsprobe können Sie einen Absatz zunächst mit ungefähr 60 bis 70 Zeichen je Zeile ansehen und anschließend breiter und schmaler vergleichen. Das ist ein Ausgangspunkt für diesen Test, kein vorgeschriebener Idealwert. Schriftform, Sprache, Größe und Inhalt beeinflussen das Ergebnis. Auf dem Handy entsteht durch den verfügbaren Platz ohnehin eine andere Zeilenlänge.

Die Typografie-Einführung auf web.dev behandelt deshalb Schriftgröße, Textbreite und Zeilenabstand gemeinsam. Für Ihren Entwurf bedeutet das: Lassen Sie einen vollständigen Absatz in der tatsächlichen Seite zeigen. Eine isolierte Schriftprobe reicht für die Freigabe des Lesetexts nicht aus.

Abstand schaffen, ohne Zusammenhänge zu verlieren

Zu dicht gesetzte Zeilen können ineinanderlaufen. Sehr große Abstände lösen einen Absatz dagegen optisch auf. Entscheiden Sie anhand mehrerer Absätze, wo der Zeilenabstand endet und der Abstand zum nächsten Gedanken beginnt. Auch zwischen Überschrift und zugehörigem Text muss der Zusammenhang erkennbar bleiben.

Unterscheiden Sie die voreingestellte Gestaltung von individuellen Leseeinstellungen. Das W3C-Kriterium zu Textabständen verlangt, dass bestimmte vom Nutzer eingestellte Abstände keine Inhalte oder Funktionen abschneiden. Es schreibt diese Werte nicht pauschal als Standardgestaltung jeder Website vor. Eine kompakte Kartenüberschrift braucht deshalb genug Platz, wenn jemand die Abstände vergrößert.

Prüfen Sie außerdem vergrößerte Schrift und lange Inhalte. Ein Anfrageknopf darf nicht nur mit dem kurzen Wort „Kontakt“ funktionieren, wenn dort später „Besichtigung anfragen“ stehen soll. Starre Höhen können solche Unterschiede verdecken, bis der erste längere Text veröffentlicht wird.

Lokale Schriftdateien bewusst einrichten

Webschriften können als Dateien über den eigenen Webauftritt bereitgestellt werden. Die technische Einbindung über @font-face beschreibt die Browserdokumentation von Mozilla. Bei einer lokalen Einbindung werden die benötigten Schriftdateien vom dafür eingerichteten eigenen Ursprung geladen, statt sie für diesen Aufruf von einem externen Schriftdienst anzufordern.

Das sollte im fertigen Auftritt überprüft werden. Ein zusätzliches Plugin kann weiterhin eine externe Schrift laden, auch wenn das Theme bereits lokale Dateien verwendet. Die bloße Auswahl eines bekannten Schriftnamens sagt nichts über den tatsächlichen Ladeweg aus.

Klären Sie zudem die Lizenz der konkreten Schriftdateien. Eine lokal gespeicherte Datei ist nicht automatisch zur Verwendung als Webschrift freigegeben. Umgekehrt ist die lokale Einbindung allein keine vollständige Datenschutzprüfung der Website. Für den Auftrag gehören Herkunft, Nutzungsrechte, benötigte Schriftschnitte und der tatsächliche Ladeweg zusammen.

Auch die Darstellung ohne fertige Webschrift ansehen

Beim ersten Aufruf kann die vorgesehene Schrift noch fehlen. Eine passende Ersatzschrift hält den Text in dieser Zeit lesbar. Prüfen Sie, ob Überschriften nach dem Laden stark springen, Knöpfe ihre Größe verändern oder ein Menü plötzlich umbrechen muss. Zusätzliche Schriftschnitte sollten nur geladen werden, wenn sie tatsächlich verwendet werden.

Für eine Überarbeitung sammeln Sie die Stellen, an denen Lesen oder Bedienung heute schwerfällt. PEMKO kann Schriftwahl und Abstände im Rahmen der Websitegestaltung aufeinander abstimmen. Wenn Ihr Logo erhalten bleibt, lässt sich dessen Schriftwirkung berücksichtigen, ohne sie auf jeden Absatz zu übertragen. Der Beitrag zu Logo und Website erklärt diesen Zusammenhang. Über die Projektanfrage können Sie Ihre vorhandene Website und die gewünschten Änderungen beschreiben.