Drücke die Tasten ◄ ► für weitere Artikel  

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

Aus dem
t3n Magazin Nr. 28

06/2012 - 08/2012

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.

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

Webdesign ist zu 95 Prozent , hat Oliver Reichenstein mal gesagt [1]. In der Tat kommt man als Webdesigner nicht umhin, sich auch im Kontext von 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

dms 37081d59fcbcbfbe19d35d92f60a230b
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.

dms b737546a3c5902eb8991421b7ae00d36
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.

dms c5307cf7abd5f7c8b1d6b14fb0693c12
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.

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

1 3
Autor:
195 Shares bis jetzt –Dankeschön!

Bewerten
VN:F [1.9.22_1171]
8 Antworten
  1. von danielahrend am 15.11.2012 (19:13Uhr)

    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.

  2. von Revision 98: IE10, HTML5 und CSS | Worki… am 28.11.2012 (12:39Uhr)

    [...] Worauf es beim Einsatz reaktionsfähiger Typografie ankommt [...]

  3. von Linktips der Woche: Responsives Webdesig… am 13.02.2013 (14:16Uhr)

    [...] Responsive Webdesign: Worauf es beim Einsatz reaktionsfähiger Typografie ankommt – http://t3n.de/magazin/responsive-webdesign-reaktionsfahige-typografie-230315/ [...]

  4. von Linktips der Woche: Typografie im Webdes… am 13.02.2013 (14:32Uhr)

    [...] Webdesign: Worauf es beim Einsatz reaktionsfähiger Typografie ankommt – http://t3n.de/magazin/responsive-webdesign-reaktionsfahige-typografie-230315/ geschrieben von Frank Hamm am 3. Februar 2013 in der Rubrik: Allgemein | 06435 - 90 88 75 | [...]

  5. von webdesign – Meine Lesetipps: Dezem… am 11.03.2013 (16:12Uhr)

    [...] Responsive Webdesign: Worauf es beim Einsatz reaktionsfähiger Typografie an: Responsive Webdesign ist in aller Munde. Neben den von Ethan Marcotte ursprünglich definierten drei Hauptbestandteilen „flexibles Raster“, … – http://t3n.de/magazin/responsive-webdesign-reaktionsfahige-typografie-230315/ [...]

  6. von 5 Beispiele für Responsive Webdesign im… am 22.04.2013 (12:26Uhr)

    [...] Responsive Webdesign: Worauf es beim Einsatz reaktionsfähiger Typografie ankommt – t3n Magazin [...]

  7. von jQuery: 13 Plugins für euer nächstes W… am 09.11.2013 (10:54Uhr)

    […] Darstellung von Fließtext kann im Responsive Webdesign eine Hürde darstellen. Mit Plugins wie Fittext könnt ihr dieses Problem beseitigen. Responsive-Measure bezieht in diesen Kontext noch die ideale […]

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
Webdesign-Trends 2014: Das erwartet Webworker im neuen Jahr
Webdesign-Trends 2014: Das erwartet Webworker im neuen Jahr

Nur noch wenige Tage, dann ist es da – das neue Jahr. Wir lassen die Trends dieses Jahres Revue passieren und zeigen, welche Trends uns Webworker im Jahr 2014 erwarten. » weiterlesen

jQuery: 13 Plugins für euer nächstes Webprojekt
jQuery: 13 Plugins für euer nächstes Webprojekt

Webentwicklung ohne JavaScript, im Besonderen jQuery, ist heute fast nicht mehr vorstellbar. Deswegen zeigen wir euch 13 jQuery-Plugins, die ihr vielleicht noch nicht kennt, aber unbedingt... » weiterlesen

t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“
t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“

Möchte man für unterschiedliche Geräte anpassungsfähige Websites erstellen, ist „Responsive Webdesign“ das Stichwort. Um sich damit vertraut zu machen, ist Designern und Entwicklern das Buch.. ... » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 35 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen