Kuratierte Linksammlung für Webdesigner und -entwickler.

Typografie im Responsive Webdesign #1: Die Wahl der richtigen Schrift

Bei einem gelungenen und stimmigen Webdesign ist die Typografie und allgemeine Schriftgestaltung wichtig. Daher unterstützt diese Artieklserie Dich bei der Auswahl der richtigen Schriftart für Dein Webprojekt und zeigt ferner, worauf es beim Einsatz reaktionsfähiger Typografie ankommt. Du erfährst zudem, wie sich die Unterstützung von Webfonts in modernen Browsern nutzen lässt, um Schriftarten nach Wahl für die Auszeichnung von Text zu verwenden.

Im ersten Artikel dieser Serie über Typografie im Responsive Webdesign geht es konkret um die Auswahl und Einbindung der richtigen Schrift.

Anzeige

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, dem Umsetzen lesbarer Schriftgrößen, Zeilenabstände und die 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, 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, aber wenn es um die Hauptinhalte geht, solltest Du 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 der richtigen Schriftart außerdem rasch geholfen.

Darüber hinaus erlaubt Dir die 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 Formaten, 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 üblicherweise mit anderen Schriften bereits tust. Dabei solltest Du eine Fallback-Schrift für Browser definieren, welche Deine über die @font-face-Regel benutzerdefinierte 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.

Tipps für Schriftkombinationen

2. Schriftfarbe in Hinblick auf Barrierefreiheit

Inhalte einer Webseite sind in erster Linie dazu da, um gelesen zu werden. Kontrastarme Schriftfarben führen meistens dazu, nur sehr mühsam gelesen werden zu können. 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

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, hinsichtlich der von 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 Dich noch kurz darauf hinweisen, dass 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 Medien-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. Aber in diesem Fall würdest Du 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ähigen 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.

Lese-Tipp:
Wenn Du mehr über die „light-level“-Medienabfrage erfahren möchtest, empfehle ich Dir einen Artikel von Jordan Moore.

3. Verwende echten Text statt Texte als Grafiken

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, es sei denn, die Grafik ist vektorbasiert, wie zum Beispiel skalierbare Vektorgrafiken (SVG) oder Flash. Dies ist jedoch eine andere Baustelle von potenziellen Problemen 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

Nach dem 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.

Frischer Input für Designer. Jeder Abonnent erhält das kostenlose Bundle aus 50 Photoshop Device-Mockups und 40 Responsive WordPress-Themes.

1x pro Woche. Kein Spam. Jederzeit kündbar.
Jonathan Torke
Jonathan Torke

Auf pixeltuner.de teile ich aktuelle Ressourcen für Webdesigner und -entwickler. Du findest mich auch auf deviantART und Instagram.
PayPal-Kaffeespende.

3 Antworten auf "Typografie im Responsive Webdesign #1: Die Wahl der richtigen Schrift"
  • Avatar

    Super Vermittlung von Grundlagen und Hintergrundwissen. Da wir für unsere Fotoagentur gerade die Website mit Fokus auf Responsive neu gestalten , kam der Artikel gerade zur rechten Zeit. Jetzt müssen wir nur noch schauen, ob wir oben genanntes auch in bestehende WP-Themes implementieren können ;)

  • Avatar

    Super interesanter Beitrag. Das man schon die Dimmung der Geräte abfragen kann war sogar noch neu. Echt schlimm über was man sich als Designer/Producer mittlerweile alles Gedanken machen soll. Der Mehraufwand von Webseiten ist durch Responsive um locker 50% gestiegen, ein Preis den ein Kunde nicht bezahlen will :/

    • Avatar

      Der Mehraufwand ist definitiv beim Responsive Webdesign gestiegen. Ob man das so pauschal sagen kann mit 50%? Ich weiss nicht… ist doch auch abhängig vom Projekt /Webseite? Ich finde es jedenfalls großartig welche Möglichkeiten man heute hat Webseiten zu bauen. Bzgl. Preis: Es ist doch im Grunde die alte Leier, „Käufer will nichts zahlen, Verkäufer will Reich werden“ das war schon immer so und wird immer so bleiben. Du hast doch bestimmt auch schon gehandelt :-). Versuch Deinen Kunden den Mehrwert deutlicher zu vermitteln, evtl. haben Sie nicht verstanden warum Responsive Webdesign wichtig ist.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Verpasse keine News!

Du erhältst ein kostenloses Bundle aus 50+ WordPress-Themes und PSD Device-Mockups.

1x pro Woche. Jederzeit kündbar.
Anzeige