Typografie
Typografie für Desktops:
Bei der Typografie für eine Webseite gibt es mehrere wichtige Aspekte, die berücksichtigt werden müssen, um eine optimale Lesbarkeit, Benutzerfreundlichkeit und ästhetische Ansprechbarkeit zu gewährleisten. Hier sind die wichtigsten Punkte:
Lesbarkeit:
-
Klare Schriftarten: Wählen Sie leicht lesbare Schriftarten, vorzugsweise Sans-Serif-Schriften für Bildschirme.
-
Angemessene Schriftgröße: Verwenden Sie ausreichend große Schriftgrößen, damit der Text sowohl auf Desktop- als auch auf mobilen Geräten gut lesbar ist.
-
Zeilenabstand: Achten Sie auf genügend Zeilenabstand (line height), um die Lesbarkeit zu verbessern und den Text weniger gedrängt wirken zu lassen.
Farbkontrast:
-
Hoher Kontrast: Stellen Sie sicher, dass der Kontrast zwischen Text und Hintergrund ausreichend hoch ist, um die Lesbarkeit zu maximieren, insbesondere für sehbehinderte Benutzer.
-
Farbkonsistenz: Verwenden Sie Farben, die zur Markenidentität passen und die visuelle Kohärenz unterstützen.
Visuelle Hierarchie:
-
Unterschiedliche Textebenen, Schriftgrößen und -stile: Nutzen Sie verschiedene Schriftgrößen, -gewichte und -stile, um eine klare visuelle Hierarchie zu schaffen und wichtige Inhalte hervorzuheben.
-
Überschriften und Absätze: Verwenden Sie unterschiedliche Stile für Überschriften, Unterüberschriften und Fließtext, um die Struktur der Inhalte deutlich zu machen.
Konsistenz:
-
Einheitliche Typografie: Halten Sie eine konsistente Typografie über die gesamte Webseite hinweg, um ein einheitliches und professionelles Erscheinungsbild zu gewährleisten.
-
Markenkonformität: Stellen Sie sicher, dass die gewählte Typografie zur Markenidentität passt und diese unterstützt.
Responsive Design:
-
Skalierbare Schriftgrößen: Verwenden Sie relative Maßeinheiten (z.B. em, rem) für Schriftgrößen, damit sie sich flexibel an verschiedene Bildschirmgrößen anpassen lassen.
-
Medienabfragen: Passen Sie die Typografie mit CSS-Medienabfragen an unterschiedliche Geräte und Bildschirmgrößen an.
Websichere Schriftarten und Webfonts:
-
Kompatibilität: Wählen Sie Schriftarten, die auf verschiedenen Browsern und Geräten einheitlich dargestellt werden.
-
Webfonts: Verwenden Sie Webfonts von Diensten wie Google Fonts oder Adobe Fonts, um sicherzustellen, dass Ihre Schriftarten überall verfügbar sind.
Ladegeschwindigkeit:
-
Optimierte Webfonts: Achten Sie darauf, dass die Webfonts die Ladezeiten der Webseite nicht negativ beeinflussen. Laden Sie nur die Schriftarten und -stile, die wirklich benötigt werden.
Barrierefreiheit:
-
Lesbare Schriftarten: Wählen Sie barrierefreie Schriftarten, die auch für Menschen mit Sehbehinderungen gut lesbar sind, indem Sie z.B. ausreichenden Kontrast bieten und serifenlose Schriften verwenden.
-
Vermeidung von rein dekorativen Schriftarten: Verwenden Sie dekorative Schriftarten sparsam und nur für spezielle Zwecke wie Logos oder Titel.
Fazit:
Bei der Typografie für eine Webseite ist es wichtig, auf Lesbarkeit, Kontrast, visuelle Hierarchie, Konsistenz, Responsive Design, Websichere Schriftarten, Ladezeiten und Barrierefreiheit zu achten. Eine gut durchdachte Typografie verbessert die Benutzererfahrung erheblich und trägt dazu bei, dass die Webseite professionell und ansprechend wirkt.
Die Wahl der Typografie für Desktops und mobile Devices unterscheidet sich in mehreren Aspekten, die auf die spezifischen Anforderungen und Einschränkungen der jeweiligen Geräte abzielen. Hier sind die wichtigsten Unterschiede:
Typografie für Desktops:
Schriftgrößen:
- Größere Vielfalt: Auf Desktops kann eine breitere Palette von Schriftgrößen verwendet werden, da größere Bildschirme mehr Platz bieten.
- Feinere Anpassungen: Kleinere und detailliertere Schriftgrößen können problemlos lesbar sein.
Details und Verzierungen:
- Komplexere Schriften: Dekorative und detaillierte Schriftarten können auf Desktops gut funktionieren, da die Auflösung und Bildschirmgröße dies zulassen.
- Serif-Schriften: Serif-Schriften sind oft auf Desktops besser lesbar und können verwendet werden, um eine formale oder traditionelle Ästhetik zu erzielen.
Layout und Platz:
- Mehr Platz für Text: Größere Bildschirme bieten mehr Platz, sodass längere Texte und komplexere Layouts verwendet werden können.
- Mehrspaltige Layouts: Mehrspaltige Textlayouts sind auf Desktops gängiger und besser lesbar.
Interaktive Elemente:
- Hover-Effekte: Interaktive Effekte wie Hover-Zustände können bei Links und Buttons verwendet werden, was auf Touchscreens nicht möglich ist.
Typografie für Mobile Devices:
Schriftgrößen:
- Größere Schriftgrößen: Texte müssen größer sein, um auf kleineren Bildschirmen gut lesbar zu sein. Die empfohlene Mindestschriftgröße liegt oft bei etwa 16 Pixeln.
- Angepasste Zeilenhöhe: Die Zeilenhöhe sollte erhöht werden, um den Text leichter lesbar zu machen.
Einfachheit und Klarheit:
- Einfache Schriften: Sans-Serif-Schriften sind oft besser geeignet, da sie klarer und einfacher zu lesen sind auf kleinen Bildschirmen.
- Minimale Verzierung: Vermeidung von dekorativen und komplexen Schriftarten, die schwer auf kleinen Bildschirmen zu entziffern sind.
Layout und Platz:
- Einspaltige Layouts: Mobile Designs tendieren zu einspaltigen Layouts, um den begrenzten Platz optimal zu nutzen.
- Kompakte Gestaltung: Inhalte müssen kompakter und effizienter angeordnet werden, um den begrenzten Platz zu maximieren.
Interaktive Elemente:
- Touch-Bedienung: Schriftarten und Layouts müssen die Touch-Bedienung berücksichtigen, z.B. durch ausreichend große und gut platzierte Touch-Ziele.
- Fingerfreundliche Abstände: Ausreichender Abstand zwischen interaktiven Elementen, um versehentliche Klicks zu vermeiden.
Ladezeiten und Datenverbrauch:
- Optimierte Webfonts: Verwendung von optimierten Webfonts, um die Ladezeiten auf mobilen Geräten zu minimieren und den Datenverbrauch zu reduzieren.
Fazit:
- Schriftgrößen: Mobile Geräte benötigen größere und klarere Schriftgrößen als Desktops.
- Schriftartwahl: Einfache, sans-serif Schriftarten für Mobilgeräte; auf Desktops können auch Serif-Schriften gut funktionieren.
- Layout: Mobile Layouts sind kompakter und meist einspaltig, während Desktops mehrspaltige Layouts und komplexere Strukturen nutzen können.
- Interaktivität: Desktop-Designs können Hover-Effekte nutzen, während mobile Designs für die Touch-Bedienung optimiert sein müssen.
- Ladezeiten: Mobile Geräte profitieren von optimierten Webfonts, um Ladezeiten und Datenverbrauch zu minimieren.
Die richtige Typografie für das jeweilige Gerät sorgt für eine bessere Benutzererfahrung und stellt sicher, dass die Inhalte klar und ansprechend präsentiert werden.
Typografie für Websites
Die Auswahl der Schriftart und Schriftgestaltung ist einerseits wichtig für das „Corporate Design“ Ihrer Website, andererseits beeinflusst sie, wie kaum ein zweites Element, die Nutzbarkeit Ihrer Seite. Zu kleine Schriftarten sind extrem kontraproduktiv.
Da nicht alle Schriften, die auf dem Papier hervorragend aussehen, auch im Web funktionieren, sollten Sie der besseren Lesbarkeit zuliebe auch von Ihrem Firmendesign abweichen und für das Web eine alternative Schriftart wählen, die gut auf einem Bildschirm lesbar ist.
Verwenden Sie im Web auch bevorzugt serifenlose Schriftarten.
Spezielle Web-Technologien erlauben es heute, viele Schriftarten einzusetzen. Tun Sie das nicht wahllos, denn ältere Browser unterstützen diese neuen Technologien nicht. Nicht jeder Kunde und auch nicht jedes Unternehmen will updaten auf neuere Technologien – never touch a running system – ist für manchen, der nicht mehr oder noch nicht investieren will, ein manifestierter Leitspruch.
Anders als im Printbereich ist es auf Websites notwendig eine größere Zeilenhöhe auszuwählen.
Auf die Schriftgröße sollten Sie besonders Acht geben. Gut lesbarer Text beginnt im Web bei einer Schriftgröße von 14 Pixel. Die Einstellung der Schriftgröße ist bei responsiven Designs jedoch ein eigenes Thema.
Text in Büchern läuft über die gesamte Seitenbreite, in Zeitungen ist dieser in Spalten eingeteilt und im Webdesign gibt es einen Richtwert von etwa 60 bis maximal 90 Zeichen pro Zeile.
Als Textausrichtung sollten Sie bis auf wenige Ausnahmen ausschließlich den „Flattersatz“ also keinen Blocksatz verwenden und optische Trenner lieber durch umschließende Kästen oder Trennlinien organisieren.
