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

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

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.

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.

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.

Weiterlesen auf Seite 2 »