Typografie im Responsive Webdesign – Teil 1: So wählt ihr die richtige Schrift
Die Auswahl der richtigen Schrift
Einer der wichtigsten Aspekte beim reaktionsfähigen Webdesign ist reaktionsfähige Typografie. Wenn es um reaktionsfähige Typografie geht, gibt es etwas mehr zu tun als den Container des Textes in seiner Größe zu verändern. Von der Auswahl der Schriftart und Farbe und dem Umsetzen lesbarer Schriftgrößen über Zeilenabstände bis zur Zeilenlänge auf unterschiedlichen Ausgabeformaten – Es gibt mehrere Möglichkeiten, flüssige und reaktionsfähige Texte für deine Website umzusetzen.
Text zugänglich machen
Bevor wir mit den Techniken beginnen, um Texte für unterschiedliche Bildschirmgrößen anzupassen, müssen wir sicherstellen, dass dein Text mit ausreichendem Farbkontrast und einer leicht lesbaren Schrift schnell erfasst und fließend gelesen werden kann. Hierbei gibt es drei Punkte zu beachten, um sicherzustellen, dass dein Text leicht zugänglich und gut lesbar ist:
1. Wähle eine lesbare Schriftart
Wenn du eine Schriftart für deine Website wählst, ist es wichtig, darauf zu achten, eine gut lesbare Schrift für den Hauptinhalt zu wählen. Nicht alle Arten von Schriften eignen sich für den Haupttext. Einige Schriftarten, wie künstlerische Schreibschriften können eine gute Wahl für den Einsatz bei Überschriften sein. Wenn es um die Hauptinhalte geht, solltest du allerdings sicherstellen, stets eine Schriftart zu wählen, die sehr leicht zu lesen ist.
Es gibt eine Menge Schriftarten zur Auswahl. Dienste wie Google Webfonts und Typekit bieten eine große Auswahl von Schriften an. Durch die benutzerfreundliche Umsetzung dieser Dienste, wird dir bei der Entscheidung zur richtigen Schriftart außerdem rasch geholfen.
Darüber hinaus erlaubt dir die fonts-mit-css3-font-face/">CSS3-@font-face-Regel, individuelle Schriften in deine Webseiten einzubinden; mittlerweile mit sehr guter Cross-Browser-Unterstützung und Fallback-Schriften für ältere Browser. Aufgrund der Vielfalt der von den Browsern unterstützten Formate, solltest du mindestens drei Schriftdateien bei der @font-face-Regel berücksichtigen, um die Cross-Browser-Kompatibilität sicherzustellen: EOT, WOFF und Truetype.
@font-face {
font-family: 'antonioregular';
src: url('antonio-regular-webfont.eot?') format('eot'),
url('antonio-regular-webfont.woff') format('woff'),
url('antonio-regular-webfont.ttf') format('truetype');
}
Nachdem du deine eigene Schrift nun deklariert hast, kannst du diese verwenden, so wie du es bereits mit anderen Schriften tust. Dabei solltest du eine Fallback-Schrift für Browser definieren, die deine über die @font-face-Regel definierte Schrift nicht lesen können.
font-family: 'antonioregular', 'Droid Sans', Arial, sans-serif; /* Du kannst mehrere Fall-Back-Schriften hinzufügen */Beachte, nicht zu viele unterschiedliche Schriftarten für deine Webseiten zu verwenden. Dies kann sich negativ und außerdem verwirrend auf den Leser auswirken, insbesondere für diejenigen mit Leseschwäche oder einem Aufmerksamkeitsdefizit.
2. Schriftfarbe in Hinblick auf Barrierefreiheit
Inhalte einer Webseite sind in erster Linie dazu da, um gelesen zu werden. Kontrastarme Schriftfarben können meistens nur sehr mühsam gelesen werden. Vermeide daher große Kompromisse bei der Lesbarkeit deiner Texte. Dies ist nicht nur ein Design-Tipp – das ist eine Notwendigkeit, wenn du Inhalte für das Internet erstellst.
Kontrast zwischen Text und Hintergrund
Bei einem Experiment wurde auf verschiedenen Webseiten eine Untersuchung auf Lesbarkeit durchgeführt. Dieses zeigt die Bedeutung eines ausreichenden Kontrastes zwischen Text und Hintergrund. Ein weiteres Experiment bestätigt, dass die Lesezeit geringer ist, wenn ein hoher Kontrast zwischen dem Text und dem Hintergrund besteht. Mehr Wissenswertes hierzu auf contrastrebellion.com.
Texte sind also viel leichter zu lesen, wenn ein ausreichender Kontrast zwischen dem Text und dem Hintergrund besteht. Um den Kontrastgrad deines Designs zu messen, gibt es mehrere Tools. Contrast-A ist eines dieser Tools, mit dem du geeignete Farbkombinationen finden kannst, unter Beachtung der vom W3C formulierten Richtlinien für die Zugänglichkeit von Webinhalten.
Verschiedene Lichtverhältnisse
Um die Bedeutung der Lesbarkeit von Schrift und Zugänglichkeit zu betonen und auch die Tatsache zu unterstreichen, dass es beim Responsive Webdesign um mehr als nur die Anpassung von Layout an unterschiedliche Bildschirmformaten geht, möchte ich noch kurz darauf hinweisen, dass das W3C ein neues Media Query-Konzept im Media Queries Module Level 4 eingeführt hat. Es handelst sich hierbei um das „Environment Media“ Feature, konkret um die „light-level“ Media Funktion.
Dieses Lichthelligkeits-Feature wird verwendet, um es Designern zu ermöglichen, Stile des Dokuments in Abhängigkeit zum Umgebungslicht des Gerätes anzupassen. Auf diese Weise wird maximale Lesbarkeit von Webinhalten bei mobilen Geräten gewährleistet. Das Gerät des Benutzers muss lediglich mit einem Lichtsensor ausgestattet sein, um diese neue Funktion auszulösen.
Grundsätzlich ermöglicht dir die Medienabfrage für Lichthelligkeit, CSS-Stile innerhalb der @media-Regel einzubinden, so wie du es normalerweise bei bereits bekannten Medienanfragen tust, wenn du neue Stile abhängig von der Bildschirmgröße definierst. In diesem Fall würdest du allerdings neue Stile basierend auf dem Wert des Gerätesensors definieren. Folgende Werte können genutzt werden, um die Leuchtkraft der Umgebung zu bestimmen: dim, normal, washed.
Um den Hintergrund und die Schriftfarbe in verschiedenen Lichtverhältnissen zu verändern, würde der CSS-Code wie folgt aussehen:
@media (luminosity: normal) {
body {
background: #f5f5f5;
color: #262626;
}
}
@media (luminosity: dim) {
body {
background: #e9e4e3;
}
}
@media (luminosity: washed) {
body {
background: #ffffff;
}
}
Lass uns jedoch nicht zu sehr ins Detail dieser Medienabfrage für Lichtverhältnisse gehen, schließlich ist es noch ein Entwurf und wird nicht von jedem Browser unterstützt. Ich wollte dir einfach mal zeigen, dass es bei der Gestaltung von reaktionsfähigem Webdesign um mehr geht, als Texte innerhalb ihrer zugewiesenen Layout-Positionen geräteübergreifend anzupassen. Natürlich ist die „light-level“-Medienabfrage in ihrer Funktion nicht nur auf die Anpassung von Schriftfarben in Bezug des Umgebungslichtes beschränkt. Jedoch wird dies wahrscheinlich der offensichtlichste Anwendungsfall für diese Abfrage sein.
Wenn du mehr über die „light-level“-Medienabfrage erfahren möchtest, empfehle ich dir einen Artikel von Jordan Moore.
3. Verwende echten Text statt Text als Grafik
Text kann durch die Sprachsynthesizer in Screenreadern in Schall umgewandelt werden. Text kann auch durch Bildschirmvergrößerung oder Vergrößerungssoftware vergrößert werden – ohne Qualitätsverlust. Dies sind die beiden Hauptgründe, warum die Bereitstellung von Inhalten im Textformat für die Zugänglichkeit so wichtig ist. Obwohl es möglich ist, einen alternativen Text für Grafiken bereitzustellen, ist es nicht möglich, Text in den meisten Grafiken ohne Qualitätsverlust zu vergrößern. Eine Ausnahme: Die Grafik ist vektorbasiert, wie zum Beispiel skalierbare Vektorgrafiken (SVG) oder Flash.
Das ist jedoch eine andere Baustelle potenzieller Probleme bezüglich der Zugänglichkeit von Webinhalten. Wenn du ein reaktionsfähiges Webdesign erstellst, das verschiedenen Geräten und Nutzern gerecht werden soll, solltest du außerdem benachteiligte Nutzer berücksichtigen und sicherstellen, dass sie auf deine Webinhalte ebenfalls leicht zugreifen können.
Fortsetzung
Nachdem wir nun die wichtigsten Punkte von reaktionsfähiger Typografie hinsichtlich der Zugänglichkeit abgedeckt haben, möchte ich mit dir im zweiten Artikel dieser Serie verschiedene Möglichkeiten erkunden, wie du flüssige und Responsive Headlines für deine Website erzeugen kannst.
Typografie gut und schön, aber noch besser ist’s, wenn keine Typos und Rechtschreibfehler drin sind ;)
Ganz oben in der Zusammenfasssung, 2. Zeile. Ich glaube, dass das „Artikelserie“ heißen soll ;)