Das könnte dich auch interessieren

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

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

Responsive Webdesign ist in aller Munde. Neben den von Ethan Marcotte ursprünglich definierten drei Hauptbestandteilen „flexibles Raster“, „flexible Bilder und andere eingebundene Medien“ sowie „Mediaqueries“, gibt es noch eine Reihe weiterer Bereiche, die in diesem Zusammenhang wichtig sind. Einer davon betrifft die reaktionsfähige Typografie.

Webdesign ist zu 95 Prozent Typografie, hat Oliver Reichenstein mal gesagt [1]. In der Tat kommt man als Webdesigner nicht umhin, sich auch im Kontext von Responsive Webdesign mit typografischen Fragestellungen auseinanderzusetzen. Welchen Einfluss eine veränderte Darstellungsfläche auf das typografische Erscheinungsbild hat und mit welchen gestalterischen und technischen Mitteln Webdesigner darauf reagieren können, steht im Mittelpunkt der folgenden Betrachtungen. Ebenso gilt es, weitere Einschränkungen in „mobilen Situationen“ wie lange Ladezeiten und ungünstige Lichtverhältnisse zu berücksichtigen.

Schriftgrößen anpassen

Eine große Logotypografie und viel Weißraum lässt eine Website kontrastreich erscheinen.
Eine große Logotypografie und viel Weißraum lässt eine Website kontrastreich erscheinen.

Wenn Websites auf verschiedene Bildschirmgrößen und Geräte reagieren sollen, brauchen sie dazu eine gewisse Flexibilität, die vor allem durch ein flexibles Raster in Kombination mit Media Queries erreicht wird. Wenn Spaltenbreiten, Bildgrößen und andere Dimensionen sich ändern, liegt es nahe, auch die typografische Erscheinung anzupassen. Bei veränderter Bildschirmgröße müssen dabei zwei Dinge abgewägt werden: Einerseits gilt es, den gewünschten „Charakter“ beizubehalten, andererseits ist der Umstand zu bedenken, dass Platz auf mobilen Geräten sehr wertvoll ist. Zwei Beispiele sollen dies veranschaulichen.

Die Website von Pelicanfly wirkt in der Desktop-Variante dank großer Logotypografie und viel Weißraum kontrastreich und interessant. Diesen Eindruck hat der Gestalter versucht, auf die mobile Variante zu übertragen, indem er die Logoschrift noch größer gesetzt hat und dadurch mehr als ein ganzes Darstellungsfenster füllt.

Er hat sich in diesem Fall ganz klar für die Bewahrung der spannungsvollen, aber auch gewagten Darstellung entschieden. Es ist durchaus grenzwertig, so viel Platz zu verschenken. In diesem Fall ist es aber legitim, denn bei der Website handelt es sich um sein persönliches Portfolio. Durch das Abweichen von der Norm macht er auf sich aufmerksam und vermittelt ein selbstbewusstes Auftreten. Die Schrift der Fließtexte hätte aber dennoch etwas größer ausfallen können.

Gewagte „Platzverschwendung“ in der mobilen Variante von pelicanfly.co.uk.
Gewagte „Platzverschwendung“ in der mobilen Variante von pelicanfly.co.uk.

Die Online-Magazine Thinkvitamin und Smashing Magazine [4] verwenden in ihren Desktop-Ansichten Überschriften in einer passenden Größe. Sie stechen gut heraus, um als visueller Anker beim Überfliegen der Seite zu dienen, sind aber nicht zu auffällig, als dass sie den Leser ablenken.

Sowohl Smashing Magazine als auch Think Vitamin bieten in der Desktop-Ansicht ihrer Online-Magazine eine ausgewogene Typografie.
Sowohl Smashing Magazine als auch Think Vitamin bieten in der Desktop-Ansicht ihrer Online-Magazine eine ausgewogene Typografie.

Bei den mobilen Varianten verändert sich diese ausgewogene Darstellung allerdings. Durch die geringe Breite mobiler Geräte brechen die Überschriften sehr oft um und nehmen somit auch vertikal sehr viel Platz ein. Das sorgt dafür, dass die Überschriften übermäßig stark auffallen und die Leser viel scrollen müssen, um die Inhalte zu durchforsten. Hier wäre es besser gewesen, mit einer angepassten Typografie zu reagieren und die Schriftgröße der Überschriften etwas zu verringern. Die Fließtexte hingegen haben eine gut lesbare Größe.

Die Headlines wirken aufgrund nicht angepasster Schriftgrößen zu dominant.
Die Headlines wirken aufgrund nicht angepasster Schriftgrößen zu dominant.

Links und Literatur

  1. Oliver Reichenstein über die Bedeutung von…
  2. Pelicanfly
  3. Thinkvitamin
  4. Smashing Magazine
  5. A List Apart
  6. Javascript-Schnipsel von Scott Jehl
  7. Testdatei für Typografie
  8. Typografie-Testdatei bei GitHub
  9. Tool, das beim Umrechnen in „em“…
  10. Zur Problematik der Kopplung von Zeilenhöhe…
  11. Trent Waltons Blog
  12. FitText

Finde einen Job, den du liebst zum Thema Webdesign, Grafikdesign

Alle Jobs zum Thema Webdesign, Grafikdesign
1 Reaktionen
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.

Abbrechen