Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 28

Responsive Webdesign: Worauf es beim Einsatz reaktionsfähiger Typografie ankommt

Seite 3 / 3

Kontrast

Mobile Geräte kommen in allen erdenklichen Situationen zum Einsatz, weshalb die Gestaltung ziemlich robust sein sollte. Das gilt natürlich auch für das Schriftbild. Neben der Schriftgröße und einer gut lesbaren Schrift spielt auch der Kontrast eine Rolle. Einige Designer sind anfällig dafür, bei der Wahl der Schriftfarbe einen zu hellen Farbton oder Grauwert zu wählen. Dieser wirkt zwar oft eleganter und hochwertiger, kann aber dazu führen, dass starker Lichteinfall das Lesen deutlich erschwert oder gar ganz unmöglich macht. Hier sollte man also vorsichtig sein. In einem Tool von Jonathan Snook kann man eine Vorder- und Hintergrundfarbe definieren und testen, ob der Kontrast hoch genug ist, um zum Beispiel die „WCAG“-Zugänglichkeitsrichtlinien (Web Content Accessibility Guidelines) zu erfüllen.

Ladezeiten von Webfonts

Neben gestalterischen Dingen kommt es im Responsive Webdesign auch auf die Performance an. Schnelle Ladezeiten tragen in großem Maße zu einem zufriedenstellenden Nutzererlebnis bei. Bei heutigen Websites werden häufig Webfonts eingebunden, die zwar die Gestaltung aufwerten, aber gleichzeitig auch die Ladezeiten einer Website negativ beeinflussen. Bei Desktop-Rechnern oder der Nutzung mobiler Geräte über WLAN fällt das nicht so stark ins Gewicht. Allerdings sollten Webdesigner bedenken, dass es auch zahlreiche Fälle gibt, bei denen nur ein schwächeres Netz zur Verfügung steht. Dann verlängert sich die Ladezeit und das Nutzererlebnis leidet. In solchen Fällen gilt es abzuwägen, ob man Webfonts nicht besser als „nice to have“-Feature betrachtet und in mobilen Kontexten darauf verzichtet.

Es gibt mehrere Faktoren, die bei dieser Entscheidung zu bedenken sind:

  • Wie groß sind die einzelnen Schriftdateien?
  • Wie viele Schriftdateien werden eingebunden?
  • Wie wichtig sind die Schriften für das Design?
  • Sind schnelle Ladezeiten oder ein passendes Schriftbild wichtiger?

Die Dateigrößen eingebundener Schriften können stark variieren, neben verschiedenen Größen einzelner Schnitte hängt sie auch davon ab, wie viele Schriftdateien eingebunden werden. Geht man von den vier Standard-Schriftschnitten „Regular“, „Bold“, „Italic“ und „BoldItalic“ aus, kommt man bei einer Größe von circa 30 bis 70 kB pro Schnitt auf eine Gesamtgröße von 120 bis 280 kB. Manchmal kommt noch eine zweite Schrift für Überschriften oder besondere Auszeichnungen hinzu, womit die Dateigröße schon jenseits der 300 kB landen kann. In einem solchen Fall ist es eine Option, für Fließtexte auf einen Standard-Font zurückzugreifen und zum Beispiel nur die Überschriften mit einem Webfont aufzuwerten.

Line-Height anpassen

Ein weiterer Bereich, den es zu bedenken gilt, ist der Zeilenabstand. Eine typografische Regel besagt, dass der Zeilenabstand sich leicht vergrößern sollte, wenn die Textzeilen länger werden. Der Hintergrund ist, dass das Auge sich dann beim Zurückspringen an den Zeilenanfang leichter orientieren kann. Im Zusammenhang mit Responsive Webdesign lässt sich mit Hilfe von Mediaqueries auf verschiedene Breiten reagieren und entsprechend die Zeilenhöhe für Fließtexte im CSS anpassen:

CSS

p, ol, ul {line-height:1.4;}
@media screen and (min-width:480px) {
p, ol, ul {line-height:1.45;}
@media screen and (min-width:600px) {
p, ol, ul {line-height:1.5;}

Es kann natürlich sein, dass bei größeren Bildschirmen mehrere schmale Spalten zum Einsatz kommen. Hier könnte der Webdesigner dann wieder mit kleinerer Zeilenhöhe gegensteuern. Eine Herausforderung ist es, dass die Zeilenhöhe in CSS an die Schriftgröße und nicht etwa an die Zeilenlänge gekoppelt ist. In einem ausführlichen Artikel macht sich Tim Brown darüber Gedanken und verlinkt Lösungsansätze [10].

Wörter skalieren mit FitText

Wenn einzelne Wörter oder typografische „Eye-Catcher“ so gestaltet sind, dass sie immer eine bestimmte Breite ausfüllen sollen, führt das bei Verkleinerung des Containers zu Schwierigkeiten, da Texte, anders als Bilder, keine „min-“ oder „max-width“ annehmen können, um sich anzupassen. Designer Trent Walton [11] setzt solche typografischen Experimente gerne in seinem Blog ein. So ist es nicht verwunderlich, dass seine Kollegen ein entsprechendes JavaScript-Schnipsel namens FitText [12] erstellt haben, das einen reaktionsfähigen Umgang damit ermöglicht.

Der Designer Tim Walton experimentiert in seinem Blog mit Typografie.
Der Designer Tim Walton experimentiert in seinem Blog mit Typografie.

Fazit

Gute Typografie ist die Grundlage für eine erfolgreiche Website. Webdesigner sollten dies im Rahmen von Responsive Webdesign berücksichtigen und überprüfen. Es gibt einige Stellschrauben, um das typografische Erscheinungsbild reaktionsfähig zu machen. Wichtig ist, dass man Schrift und ihre Wirkung immer auch auf mobilen Geräten testet – und das nicht nur im Büro, sondern unter verschiedenen Bedingungen, zum Beispiel im Sonnenlicht. Idealerweise wirft man auch mit Smartphones verschiedener Hersteller einen Blick auf die Website, hier kann meist der Freundes- und Bekanntenkreis aushelfen.

Christoph Zillgens
Christoph Zillgens

ist selbstständiger Mediengestalter (zillgensdesign.de) aus dem äußersten Westen der Republik und gestaltet hauptsächlich reaktionsfähige Websites mit modernen Technologien. Zurzeit schreibt er ein Buch über Responsive Webdesign, das im Laufe des Sommers erscheinen wird.

Startseite
  • Seite:
  • 1
  • 2
  • 3

Bitte beachte unsere Community-Richtlinien

Eine Reaktion
danielahrend

Interessanter Artikel! Wichtig finde ich ebenfalls, dass man immer genug Whitespace zwischen Elementen lässt. Gerade bei mobilen Endgeräten wirkt die Webseite ansonsten sehr gequetscht. Dies nur als Ergänzung.

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden