Vorheriger Artikel Nächster Artikel

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

Aus dem
t3n Magazin Nr. 28

06/2012 - 08/2012

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 .

Responsive Webdesign: Worauf es beim Einsatz reaktionsfähiger Typografie ankommt
Wooden type blocks for hand typesetting or letterpress printing.

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.

Newsletter Newsletter

Abonniere unseren Newsletter und erhalte einen exklusiven Artikel aus dem aktuellen t3n Magazin.

Jetzt lesen: t3n Newsletter Nr. 563

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Eine Antwort
  1. von danielahrend am 15.11.2012 (19:13 Uhr)

    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 Teilen
Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Aktuelles aus dem Bereich Responsive Webdesign
Typografie im Responsive Webdesign – Teil 2: So erstellt ihr Responsive Headlines
Typografie im Responsive Webdesign – Teil 2: So erstellt ihr Responsive Headlines

Im ersten Teil dieser Artikelserie über Typografie im Responsive Webdesign ging es um die Auswahl und Einbindung der richtigen Schrift. Nachdem ich darin die wichtigsten Punkte von reaktionsfähiger … » weiterlesen

Die Geschichte der Typografie: 5-minütiger Animationsfilm erklärt Old Style, Transitional und Modern
Die Geschichte der Typografie: 5-minütiger Animationsfilm erklärt Old Style, Transitional und Modern

Was zeichnet eigentlich Old Style, Transitional und Modern aus? Eine Animation von Ben Barret-Forrest erklärt die Geschichte der Typografie in 2.400 Bildern. » weiterlesen

Typografie im Responsive Webdesign – Teil 3: So erstellt ihr responsiven Body-Text
Typografie im Responsive Webdesign – Teil 3: So erstellt ihr responsiven Body-Text

Im vorigen Teil dieser Artikelserie über Typografie im Responsive Webdesign haben wir verschiedene Möglichkeiten erkundet, flüssige und reaktionsfähige Überschriften für Webseiten umzusetzen. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen