Setzen Sie Fließtext auf mindestens 17 bis 18 Pixel mit einer Zeilenhöhe um 1,6 und begrenzen Sie die Zeilenlänge auf 60 bis 75 Zeichen. Zwei Schriftschnitte genügen, die Hierarchie entsteht über eine feste Größenskala. Webfonts gehören selbst gehostet, im Deutschen sind Flattersatz und aktivierte Silbentrennung dem Blocksatz vorzuziehen.
Welche Schriftgröße und Zeilenhöhe funktionieren am Bildschirm?
Die verbreiteten 16 Pixel sind ein Erbe alter Bildschirme und heute die Untergrenze, nicht der Zielwert. Für längere Fachtexte auf Unternehmensseiten liegt der angenehme Bereich bei 17 bis 19 Pixeln, bei einer serifenlosen Schrift mit kleiner x-Höhe eher am oberen Rand. Die x-Höhe — die Höhe der Kleinbuchstaben ohne Ober- und Unterlänge — beeinflusst den Eindruck stärker als der nominelle Größenwert.
Die Zeilenhöhe hängt an der Zeilenlänge: Je breiter der Satz, desto mehr Durchschuss braucht das Auge, um die nächste Zeile zu finden. Ein Wert von 1,5 bis 1,7 als einheitsloser Faktor deckt den Fließtext ab. Überschriften brauchen weniger, etwa 1,1 bis 1,3, sonst zerfallen mehrzeilige Titel in lose Streifen.
Skalieren Sie mit relativen Einheiten. Wer Schriftgrößen in Pixel festnagelt, hebelt in manchen Browsern die vom Nutzer eingestellte Standardgröße aus. Die Einheit rem, gerechnet auf die Wurzelgröße, respektiert diese Einstellung und ist auf einen Schlag über einen einzigen Wert anpassbar.
Unterschiedliche Textsorten vertragen unterschiedliche Größen. Ein Einleitungsabsatz darf eine Stufe größer stehen, Bildunterschriften und Fußnoten eine Stufe kleiner — allerdings nicht beliebig weit nach unten. Unter etwa 14 Pixeln wird auch kurzer Text mühsam, und Hilfstexte in Formularen sind genau die Stelle, an der zu kleine Größen unbemerkt einziehen.
Wie lang darf eine Textzeile sein?
Zwischen 60 und 75 Zeichen einschließlich Leerzeichen liegt der bewährte Korridor. Darunter zerhackt der ständige Zeilenwechsel den Lesefluss, darüber verliert das Auge beim Rücksprung den Anschluss. Technisch begrenzen Sie das mit einer Maximalbreite in der Einheit ch, die sich an der Zeichenbreite orientiert und damit automatisch zur gewählten Schrift passt.
Auf breiten Bildschirmen erzeugt das Textspalten, die schmaler sind als der Bildbereich — und genau das ist beabsichtigt. Eine Bildungseinrichtung, die Studiengangbeschreibungen über die volle Fensterbreite laufen lässt, produziert Zeilen mit 140 Zeichen, die niemand am Stück liest. Der Weißraum daneben ist kein verschenkter Platz, sondern Teil der Lesbarkeit.
Absatzlänge gehört zur selben Frage. Drei bis fünf Sätze sind am Bildschirm die praktikable Obergrenze, und ein Abstand zwischen den Absätzen wirkt besser als ein Erstzeileneinzug, der aus dem Buchdruck stammt und im Web selten funktioniert.
Auf schmalen Bildschirmen kippt das Problem in die andere Richtung. Bei 320 Pixeln Breite und großzügigen Innenabständen bleiben schnell nur dreißig Zeichen pro Zeile übrig, und jede Zeile enthält dann anderthalb Wörter. Prüfen Sie die Seitenränder im mobilen Layout deshalb eigens — sechzehn statt vierundzwanzig Pixel gewinnen hier spürbar Lesefläche.
Wie viele Schriften verträgt eine Unternehmensseite?
Eine gut ausgebaute Familie reicht in den meisten Fällen aus. Wenn es zwei sein sollen, sollten sie sich deutlich unterscheiden — etwa eine Serifenschrift für Überschriften und eine serifenlose für den Text. Zwei ähnliche serifenlose Schriften nebeneinander wirken nicht abwechslungsreich, sondern nach einem Fehler.
Eine dritte Schrift ist fast immer eine Monospace-Schrift für Codebeispiele, Auftragsnummern oder technische Kennungen. Das ist legitim, weil sie eine eigene Funktion erfüllt und nicht dekorativ eingesetzt wird. Rein dekorative dritte Schriften kosten Gewicht und Klarheit gleichermaßen.
- Zwei Schnitte pro Familie decken die meisten Anwendungsfälle ab: ein Buchschnitt und ein kräftiger Schnitt.
- Kursive Schnitte brauchen Sie nur, wenn Sie sie tatsächlich einsetzen — meist für Zitate und Werktitel.
- Verzichten Sie auf browserseitig verfälschte Schnitte: eine echte fette Schnittdatei schlägt künstlich verbreiterte Buchstaben.
- Jeder zusätzliche Schnitt ist eine eigene Datei und gehört ins Gewichtsbudget der Seite.
Prüfen Sie eine Schriftmischung immer mit echtem Text in echter Länge. Zwei Familien, die auf einer Musterseite mit Blindtext harmonieren, können bei einer dreizeiligen deutschen Überschrift über einem technischen Absatz unangenehm auseinanderfallen. Der Test dauert zehn Minuten und erspart eine späte Korrekturschleife.
Lohnen sich variable Fonts?
Eine variable Schrift enthält einen durchgehenden Bereich statt einzelner Schnitte, meist für die Strichstärke, manchmal zusätzlich für Breite oder optische Größe. Sobald Sie drei oder mehr Stärken einsetzen, ist die eine variable Datei in der Summe leichter als die einzelnen Schnittdateien.
Bei nur zwei Stärken kann die Rechnung kippen, weil eine variable Datei mehr Grundvolumen mitbringt. Prüfen Sie es einfach nach: beide Varianten in WOFF2 vergleichen, danach entscheiden. Praktisch ist die variable Schrift außerdem, wenn Sie Überschriften bei kleinen Bildschirmgrößen etwas leichter setzen wollen — das geht mit einem Zwischenwert statt mit einem Sprung.
Wie bindet man Webfonts sauber und datenschutzfreundlich ein?
Hosten Sie Schriften auf dem eigenen Server. Die Einbindung von Google Fonts über deren Server überträgt bei jedem Seitenaufruf die IP-Adresse der Besucher in die USA — ein Punkt, den deutsche Gerichte bereits beanstandet haben und der sich vollständig vermeiden lässt, weil die betreffenden Schriften unter freier Lizenz stehen und heruntergeladen werden dürfen. Zur rechtlichen Bewertung des Einzelfalls gehört Ihre Datenschutzberatung, nicht dieser Beitrag.
Bei kommerziellen Schriften ist die Lizenz genau zu lesen. Webfont-Lizenzen werden häufig nach Seitenaufrufen pro Monat, nach Domains oder als einmalige Abgeltung verkauft, und die Bedingungen für Selbsthosting unterscheiden sich zwischen den Anbietern erheblich. Klären Sie das vor der Entwurfsfreigabe — eine Schrift nach der Präsentation zu tauschen, ist teurer als die Lizenz.
Technisch gehören selbst gehostete Schriften ins Format WOFF2, mit vorausschauendem Laden für die auf der Startseite sichtbaren Schnitte und einer Zeichensatzbeschränkung auf die tatsächlich benötigten Zeichenbereiche.
Prüfen Sie zuvor allerdings, ob Sie überhaupt eine Webschrift brauchen. Der moderne Systemschrift-Stapel liefert auf jedem Betriebssystem eine gut ausgebaute, sauber dargestellte Schrift ohne jede Ladezeit und ohne Lizenzfrage. Für interne Werkzeuge, Kundenportale und dokumentlastige Bereiche ist das oft die vernünftigere Wahl als eine Hausschrift, die dort niemand bewusst wahrnimmt.
Wie baut man eine Typo-Skala, die Hierarchie erzeugt?
Eine Skala ist eine feste, kleine Menge von Größen mit gleichmäßigem Verhältnis — etwa sechs bis sieben Stufen, jede um einen konstanten Faktor größer als die vorige. Sie verhindert, dass im Projektverlauf beliebige Zwischengrößen entstehen, und macht Hierarchie berechenbar statt verhandelbar.
Hierarchie entsteht dabei nicht allein über die Größe. Abstand ist das stärkere Mittel: Eine Zwischenüberschrift, die dicht über ihrem Absatz und mit klarem Abstand zum vorigen Block sitzt, wird auch bei geringem Größenunterschied als Gliederung gelesen. Wer nur an der Schriftgröße dreht, produziert laute Seiten mit schwacher Ordnung.
Wählen Sie das Verhältnis nach dem Charakter der Seite. Ein Faktor um 1,2 ergibt eine ruhige, dokumentnahe Anmutung, wie sie zu Fachinhalten passt. Ein Faktor ab 1,33 erzeugt große Sprünge und einen plakativeren Auftritt. Auf kleinen Bildschirmen sollten die Sprünge in jedem Fall kleiner ausfallen, sonst wird die oberste Überschrift zur Wand.
Hierarchie ist eine Frage der Abstände. Größe allein macht Überschriften nur lauter, nicht klarer.
Was ist im Deutschen typografisch anders?
Deutsche Fachsprache produziert lange Komposita: Instandhaltungsplanung, Ausbildungsverbund, Qualifizierungsmaßnahme. In schmalen Spalten und in Menüs sprengen solche Wörter das Layout oder erzwingen unschöne Löcher. Aktivieren Sie deshalb die automatische Silbentrennung mit der Angabe der Sprache im HTML — ohne korrekte Sprachauszeichnung greift die Trennung nicht.
Blocksatz ist im Web mit Vorsicht zu behandeln. Ohne gute Trennung reißt er Wortlücken auf, die den Lesefluss stärker stören als eine ungerade rechte Kante. Flattersatz ist die verlässlichere Wahl; wenn Blocksatz gestalterisch gewollt ist, gehört er nur in breite Spalten mit aktivierter Trennung.
- Ein Handwerksbetrieb mit langen Gewerkebezeichnungen setzt Menülabels besser kürzer als die Seitentitel.
- Geschützte Leerzeichen halten Zahl und Einheit sowie Abkürzungen wie z. B. zusammen.
- Tabellenziffern mit gleicher Breite halten Preis- und Mengenspalten in einer Flucht.
- Deutsche Anführungszeichen unten und oben gehören zur sauberen Satzarbeit, ebenso der Gedankenstrich statt des Bindestrichs.
Zahlen verdienen dabei mehr Aufmerksamkeit, als sie meist bekommen. Viele Schriften liefern von Haus aus Mediävalziffern mit unterschiedlicher Höhe, die im Fließtext angenehm wirken, in Tabellen aber unruhig. Über die Schrifteigenschaft font-variant-numeric lassen sich Versalziffern und gleich breite Tabellenziffern gezielt für Tabellen und Preisangaben aktivieren, ohne den Fließtext zu verändern.
Zwei Kleinigkeiten mit großer Wirkung zum Schluss: Eine Mindestzahl an Zeichen vor und nach der Trennstelle verhindert unschöne Zweibuchstaben-Reste am Zeilenende, und ein weicher Trennstrich an selbst gesetzten Stellen hilft bei Fachwörtern, die der automatische Algorithmus falsch zerlegt. Bei Produktnamen und Eigenbezeichnungen lohnt sich diese Handarbeit.