Entwicklung & Design

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.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Ein Kommentar
danielahrend
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.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung