Responsive Typografie: Schriften im flexiblen Webdesign

Quelle: SLTWTR Creative Agency (via Behance)

„Responsives Webdesign“ ist Design, das sich flexibel unterschiedlichsten Bildschirmgrößen anpasst. Im Laufe der Zeit wurden deshalb Fragestellungen zu „responsiven Bildern“ oder „responsiven Videoplayern“ zu in der Fachwelt viel diskutierten Themen. Ein Aspekt, den manch einer dabei nicht im Sinn hat, ist „responsive Schrift“ oder „responsive Typografie“.

Schriftanpassung: Anders als bei Bildern und Layouts

Während man bei Bildern eine minimale und eine maximale Breite programmieren kann (angegeben durch „min-with“ und „max-width“), ist dies bei Schrift im Normalfall nicht möglich.

Oben: Eine Ausnahme für die flexible Schriftanpassung bildet das JavaScript-Plugin „FitText“, das Überschriften und andere große Textzeilen auf Bildschirmbreite bringt, nicht aber für Fließtext in kleineren Schriftgraden geeignet ist.

Responsive Typografie: Bildschirmgrößen und Betrachtungsabstand

Bildschirm-Schriften müssen lesbar sein. Wo ein Bild noch in relativ kleiner Größe erkennbar bleibt, würde Schrift, die proportional von der Desktopdarstellung auf die Kleinstbildschirme der Smartphones verkleinert würde, zur Unlesbarkeit verdammt sein. Damit das nicht passiert, gibt es Richtwerte für Schriftgrößen in den unterschiedlichen Bildschirmklassen. Wonach richtet man sich dabei? Es geht in erster Linie um den Abstand zwischen menschlichem Auge und Bildschirm. Als Richtwert kann man annehmen, dass, je größer der Bildschirm ist, sich auch der Abstand zwischen Betrachter und Bildschirm vergrößert. Das Smartphone wird also relativ nah ans Auge gehalten, das Tablet in einer mittleren Entfernung genutzt und der Desktop-Großbildschirm ist am weitesten vom Auge entfernt. Hier ist eine Übersicht zu sehen, welche Schriftgrößen mit welcher Hardware genutzt werden:

Oben: Die alte „Typografische Tonleiter“ mit den Bereichen für die verschiedenen Bildschirmtypen

Typografische Größenintervalle in Abhängigkeit zur Satzgröße

Die typografische Tonleiter zeigt die Punkt-Sprünge zwischen den gängigen Schriftgrößen an. Zum einen zeigt sich hier, dass signifikante Größenunterschiede bei sehr kleinen Schriftgrößen schon in 1-Punkt-Abständen liegen können. Steigt die Schriftgröße, liegen die gängigen Unterschiede zwischen 2 und 3 Punkt Abstand. Schließlich vergrößern sie sich bei Displayschriften auf 12-Punkt-Intervalle. Zum anderen sind die Bereiche der kleinen, mittleren und großen Bildschirmgrößen und ihre Schnittmengen zu sehen.

Mobile Lesbarkeit unter wechselnden Lichtverhältnissen und Kontrastwirkungen

Bei der Responsivität von Schrift – also ihrer Anpassungsfähigkeit an Bildschirmgrößen – geht es im Kern also um Lesbarkeit und darum, dass die Schrift auf den unterschiedlichen Bildschirmtypen erkennbar bleibt und komfortabel zu lesen ist. Dabei spielt auch eine Rolle, dass der PC-Monitor im Büro oder Zuhause einen festen Standort mit relativ festen Lichtverhältnissen hat, während der mobile Bildschirm in Smartphone oder Tablets unterschiedlichen Lichteinflüssen ausgesetzt ist. Da werden Schriftfarbe und Schriftkontraste umso wichtiger. Das Grau, dass auf der Fläche des Desktop-PC-Monitors gut lesbar bleibt, kann unterwegs bei zu viel Sonne überstrahlt werden und plötzlich nicht mehr lesbar sein. Daraus kann man die zu verallgemeinernde Lehre ziehen, dass das, was für den Großmonitor gut ist, für den kleinen Monitor nicht unbedingt gut sein muss. Mit dem Color Contrast Checker lässt sich die Kontrastwirkung und Farbwirkung von Schrift gut bestimmen.

Oben: Der „Colour Contrast Check“ hilft beim typografischen Gestalten im Web.

Typografische Stellgrößen: Schriftgröße, Zeilenlänge, Zeilenabstand

Rein typografisch betrachtet ist die Relation zwischen Schriftgröße, Zeilenlänge und Zeilenabstand wichtig – ausgehend von einem gut lesbaren Webfont. Früher hatten die Browser die Hoheit darüber, welche (wenigen) Schriften darstellbar waren, heute ist grundsätzlich das Einbinden einer individuellen Schrift für die Webseite durch das Nachladen über den Webserver in Formaten wie .EOT oder .WOFF möglich und wird von fast allen modernen Browserversionen unterstützt – auch weil es Bestandteil des Programmierstandards CSS3 ist. Früher bestanden Schriften aus deutlich wahrnehmbaren Pixeln. Um deren „Treppchen-Effekt“ zu mildern, werden die Schriften „gehintet“, das heißt, ihre stufige Pixeldarstellung wurde durch das Hinzufügen von grauen oder farbigen Zusatzpixeln für das Auge und dessen Wahrnehmung geglättet.

Typotechnologie: Pixelschriften, Vektorfonts und das richtige „Hinting“

Doch Pixel ist nicht gleich Pixel. Der Pixel ist das kleinste Element, aus dem die gesamte Bildschirmdarstellung zusammengesetzt ist. Mit dem Aufkommen immer höher aufgelöster Bilder und Bildschirme bis hin zu Retina-Displays oder 4K/5K-Auflösungen, sind die Pixel immer kleiner geworden, weshalb die 16-Pixel-Schrift der Schriftgrößenstandard geworden ist, von dem man heutzutage ausgeht. Zwischenzeitlich redete auch keiner mehr über Pixelfonts – also Schriften, die aus einer Punktmatrix zusammengesetzt wurden –, sondern von Vektorschriften. Denn jeder Buchstabe, jedes Satzzeichen oder Schriftsymbol bekam eine mathematisch berechnete und geformte Kontur, die durch Vektoren beschrieben wurde. Diese Vektoren werden aber dennoch zur Darstellung wiederum in Pixel „übersetzt“. Für die Schriftglättung der meisten Bildschirme ist im übrigen immer noch Microsofts ClearType-Technologie zuständig, die noch aus WindowsXP-Tagen stammt. Dabei ist die hohe Kunst bildschirmkonformer Schriftkontur-Perfektionierung mittels „Hinting“, dass die Schriftkontur, der Punktmatrix des Bildschirms möglichst genau angepasst wird, damit vor allem die Rundungen und Schwünge der originalen Schriftdesigns fließend wirken. Dabei geht es in der Typografie nicht um einen Schriftgrad, sondern um sehr viele. Informationen über die Darstellung der Buchstaben in allen Schriftgrößen werden deshalb in der „Hinting-Datei“ gespeichert. Das Hinting ist neben dem Schriftdesign eine wichtige Stellschraube für die Lesbarkeit am Bildschirm.

Wie man responsive Typografie realisiert:

Parameter für die Gestaltung: Bildschirmgrößen und Schriftgrößen

Ein Problem liegt darin begründet, dass der Designer es (zum Beispiel auf Nutzerseite oder Kundenseite) nicht nur mit unterschiedlichen Bildschirmgrößen zu tun hat, sondern dass die Varianz der Bildschirmauflösungen noch nie so groß war wie heute. Auf verschieden aufgelösten Bildschirmen können gleiche Schriften aber unterschiedlich fett oder detailliert wirken. Schriften sind bezüglich ihrer Versalhöhe und bezüglich der Buchstabengröße allgemein anders designt. So ist eine Verdana als Systemschrift zum Beispiel bei gleicher Punktgröße größer als eine Times. All diesen Parametern muss der Webdesigner, der responsiv arbeitet, Rechnung tragen. Das heißt, er muss überlegen, wie welche Schrift auf welchem Bildschirm wirkt und dafür möglichst passende Schriftgrößen mit optimalen Zeilenabständen anlegen. Die Zeilenabstände sind dabei auch durch die Zeilenlänge beeinflusst.

Parameter des responsiven typografischen Designs

Responsives Design basiert auf Spaltenrastern, die sich flexibel über Prozentwerte anpassen, die Bilder passen sich diesem Spalten-Rastersystem an, über CSS3 kann die Geräteklasse abgefragt und die passende Typografie zugewiesen werden. CSS3 ist dabei auch für die Anpassung an hoch aufgelöste Bildschirme wie das Retina-Display zuständig, deren Pixel kleiner sind als herkömmlich aufgelöste.

Folgende Richtwerte sind dafür Grundlage der Einstellungen:

• Größe des Mengentextes: ca. 15–25 Pixel
• Zeilenabstand: ca. 120–145%
• Zeilenlänge: ca. 45–90 Zeichen

Um eine im Sinne der Lesbarkeit optimierte Zeilenlänge zu erreichen, kann neben der Veränderung der Schriftgröße, der Text mehrspaltig werden, oder die Abstände vor oder nach dem Text können vergrößert oder verkleinert werden.

Wie Webfonts im Vergleich miteinander wirken, kann man über die Tools Typecast oder Webfonter abgleichen.

Leseabstände und Schriftgrößen für responsive Ergebnisse

Die Leseabstände lassen sich auf der Webseite Responsive Typography im Chrome-Browser interaktiv ausprobieren, wenn man seine Webcam dafür nutzt. Die Seite erkennt den Abstand zwischen dem Gesicht des Nutzers und des Bildschirmes und passt Schriftgröße und Zeilenabstand interaktiv an. Wer es ernst meint mit responsiver Typografie, für den ist dieser Ansatz ein lehrreiches Versuchsfeld.

Die Schriftgrößen in Abhängigkeit zum Leseabstand sind wie folgt zu empfehlen:

• Kleiner Leseabstand: 16-24 Pixel
• Mittlerer Leseabstand: 18-36 Pixel
• Großer Leseabstand: 21-48 Pixel

Bei den meisten Browsern ist 16 Pixel die Standardschriftgröße, zu der alle anderen relativ berechnet bzw. in Beziehung gesetzt werden. Es gibt aber Browser, die kleinere oder größere Default-Größen verwenden, zum Beispiel der Kindle Touch mit 26 Pixel Typogröße. Als Faustregel kann weiterhin gelten, dass Überschriften auf großen Bildschirmen im Verhältnis zum Mengentext relativ größer sind als auf kleinen Bildschirmen, die ökonomischer mit ihrem Platz umgehen müssen.

Ein Ausflug in die Programmierung: Relative Schriftgrößen mit „em“ und „rem“

Damit sich die Schriftgröße relativ zum Bildschrim auf die richtige Proportion verkleinert, nutzt der Programmierer bei responsiver Typografie den relativen Schriftgrößenwert „em“, der sich auf die Standardschriftgröße von zum Beispiel 16 Pixel bezieht. In diesem Fall wäre „1 em“ = 16 Pixel. Über prozentuale „em“-Werte kann man andere Pixelgrößen darstellen. „em“ bezieht sich immer auf ein übergeordnetes „Elternelement“, die neuere Einheit „rem“ hingegen bezieht sich direkter auf das „Kinderelement“ Copytext und umgeht dadurch Probleme, die in der Programmierung auftauchen können. In jedem Falle ist die Nutzung relativer Werte für die Darstellung typografisch korrekter Anzeigen des Textes wichtig und äußerst flexibel. Erst damit wird Typografie so richtig anpassungsfähig.

Oben: Mit dem Tool „Pxtoem“ kann man Pixel in die flexiblen Typografie-Maße „em“ und „rem“ innerhalb der CSS3-Programmierung umrechnen.