Responsive Typografie im Responsive Webdesign: Die sinnvolle Verwendung von Schriften


Responsive Typografie ist die Anpassung von Schriften zur Darstellung von Text auf Webseiten mit Responsive Webdesign. 

Leider nehmen viele Webagenturen es nicht so genau mit der Optimierung von Schriften auf mobilen Endgeräten. So kommt es dazu, dass Darstellungsfehler auftreten und der Text schlecht zu lesen ist.

Wir zeigen Ihnen auf dieser Seite ein Beispiel für die Optimierung des Responsive Webdesign durch kleine Änderungen, die große Auswirkungen auf die Benutzerfreundlichkeit und Darstellung der Website haben.

Anhand des folgenden Screenshots zeigen wir ein Beispiel für nachlässig umgesetztes Responsive Webdesign. Der Webdesigner hat hier folgende Fehler gemacht: 


1. Die Überschrift überschneidet die weiße Trennlinie.

2. Der Text ist auf einem Smartphone schlecht lesbar.

  • Der Kontrast ist zu gering - weiße, dünne Schrift auf grauem Grund
  • Die Schrift ist zu breit gestellt - Maximal 4 Wörter pro Zeile
  • Der Zeilenabstand ist zu groß

3. Der Text unten ist falsch angeordnet.


Wir haben den Seiteninhalt aus dem Beispiel auf dieser Seite nachgebaut, um zu zeigen, wie man mit Hilfe von Responsiver Typografie und Responsive Layout die Benutzerfreundlichkeit und das Erscheinungsbild der Inhalte verbesser.

Screenshot einer Website mit einem nicht gut umgesetzten Responsive Webdesign. Der Text ist schlecht gesetzt.

Nachbau der Website-Inhalte mit Optimierung des Layouts und der Typografie basierend auf Responsive Webdesign

Kompaktkrane

Unsere Kompaktkrane eignen sich besonders gut für extrem beengte Einsatzbedingungen wie etwa für Arbeiten in Industriehallen.

Denn die All-Terrain-Krane zeichnen sich durch eine besonders kompakte Bauweise aus. Zudem ermöglicht ein kurzer Grundausleger auch kleine Zwangsausladungen bei niedrigen Hallenhöhen.

Auf einen Blick:

  • Bis 36 Meter Hubhöhe
  • Bis 55 Tonnen Traglast
  • Modernste Technik
  • Vielseitig einsetzbar
  • Kompakt und wendig
  • Vollhydraulisch
  • In Minuten einsatzbereit
  • Montagearbeiten auf engstem Raum
  • Feinfühliges Rangieren

ÜBER UNS

KONTAKT

JOBS

AUSBILDUNG

IMPRESSUM

DATENSCHUTZ

AGB

Das Ergebnis unserer Überarbeitung durch die sinnvolle Verwendung von Schriften und Darstellungsregeln im Webdesign: 

Typografische Änderungen zur Verbesserung der Lesbarkeit und Darstellung auf Smartphones:


Die Überschrift Kompaktkrane kann die gesamte Breite nutzen. Auf der Originalwebsite wurde die Schriftart RockwellStd-Bold eingesetzt.

Diese ersetzen wir durch die Google Font "Roboto Slab" in der Schriftstärke 700.


Der Fließtext der Originalwebsite nutzt die Schriftart Calibri in der Schriftstärke 100. Wir ersetzen die Schriftart durch die Google Font Roboto Condensed in der Schriftstärke 400. Condensed Schriftarten sind enger gestellt und ermöglichen mehr Zeichen pro Zeile als Standardschriften.

Der unnötige Abstand zum linken Bildschirmrand wurde verkleinert. Das Textfeld von 1/2 auf 2/3 der Breite vergrößert. Auf Smartphones nutzt der Fließtext die volle Breite.

Insgesamt konnten wir so den Fließtext von 13 auf 7 Zeilen verringern. 


Das Bild vom Kompaktkran wurde so eingestellt, dass es auf Smartphones mit voller Bildschirmbreite unter dem Text dargestellt wird. 


Die Auflistung unter dem Fließtext wurde in 2 halb breite Textblöcke aufgeteilt. Auf Smartphones werden diese untereinander dargestellt.

 

Der grün hinerlegte Footerbereich wurde ebenfalls angepasst. Auf Smartphones verringert sich die Schriftgröße auf 14 Pixel, um eine korrekte Darstellung zu ermöglichen. Statt 6 Spalten werden im Footer nun 3 Spalten verwendet. 

Durch die Optimierung von Schriften für unterschiedliche Bildschrimgrößen wird die Lesbarkeit verbessert und die Benutzerfreundlichkeit der Website nachhaltig gesteigert. 

Links zu den anderen Responsive Webdesign Kategorien

Responsive Styles 

Responsive Layout

Responsive Bilder

Ihre Agentur für Responsive Webdesign, SEO und Webprogrammierung aus Gütersloh

Erneuerung von Websites innerhalb weniger Tage

SEO für gute Platzierung in Suchmaschinen