Digital
Information
Design.

Icon Information Design white Designsensor AG

Typografie am Screen

Schrift richtig einsetzen

Der richtige Umgang mit Typografie will gelernt sein. Schriftauswahl, Lesbarkeit und die Berücksichtigung der typografischen Regeln gehören zu den wichtigsten Dingen, die man als Gestalter beherrschen sollte.
Seit Webschriften und CSS3 wird jedoch der Umgang mit Typografie am Screen immer anspruchsvoller.

Teilen macht Freude

Was gibt es für Schrifttypen?

Google unterteilt ihre Schriftbibliotheke in einfache Klassen, es sind diese hier:

 

 

 

Die Schriftenklassifikation nach DIN unterteilt (v.a. die Serifenschriften) in weitere Kategorien: Schriftklassifikation nach DIN
Schriftbibliotheke nach Google
Google Fonts

Was sind Webfonts?

Das Web Open Font Format (WOFF) ist ein komprimierendes Dateiformat für Schriftarten.
Vorteile von WOFF ergeben sich insbesondere bei Schriftarten, die von Internetseiten geladen werden, da die Ladezeiten durch die Komprimierung erheblich verkürzt werden können. WOFF unterstützt Schriftarten, die in Formaten wie OpenType oder TrueType gespeichert sind.
Der erste Webbrowser, der WOFF unterstützt, ist Firefox ab der Version 3.6.
Die Entwicklung der Web Fonts geht schnell voran, zwischenzeitlich sind mehrere Tausend Schriften verfügbar, darunter viele für den Screen optimierte und hochwertige Fonts.
Mehr zu Thema Typografie und Webbrowser
Webfonts-Anbieter

Welche Fonts eignen sich für Webanwendungen?

Schriften müssen auf allen Medien von TV bis Smartphone funktionieren. In diesem digitalen Umfeld zieht die Schriftauswahl auch technologische Konsequenzen nach sich.
  • Gibt es die Schrift als Webfont in den entsprechenden Formaten, die möglichst viele Browser darstellen können?
  • Wie gut ist die Webfont ausgearbeitet (Ligaturen, Hinting, etc.) und erfüllt diese auf einem Bildschirm dann auch ihren Zweck in Form und Funktion?
Diesen beiden Fragen sollte man zu Anfang nachgehen und Schriften direkt im Browser testen. Gut geeignet dafür ist beispielsweise die kostenlose Anwendung Typecast.
Merkmale für (aktuell) geeignete Bildschirmschriften:
  • Kein zu differenzierter Duktus (vereinfachte Formen)
  • Offene Punzen
  • Normale Schriftstärke und Schriftlage (keine Kursiven)
  • Optimiert für alle Displaytypen
  • Auch gedruckt brauchbar
  • Gut ausgebaute Schriftfamilie
  • Auch in verschiedenen Sprachen nutzbar
Die «Rubik» beispielsweise erfüllt diese Anforderungen:
Tool
Typecast

Welche Schriftgrössen eignen sich?

Lesbare Schriftgrössen verwenden
Google gibt Empfehlungen ab, wie die Schriftgrösse definiert werden soll, damit diese auf unterschiedlichsten Endgeräten optimal umgesetzt wird.
Schriftgrösse
Die Schriftgrösse für das Web kann in vier gängigen Einheiten angegeben werden: in Pixeln (px), Punkten (pt), EMs (em) und Prozent (%).
  • Bei den Pixeln handelt es sich um «CSS-Pixel». Sie variieren je nach Gerätegrösse und Dichte
  • Punkte werden relativ zu Pixeln definiert. Ein einzelnes Pixel ist 0,75 Punkte gross
  • EMs und Prozent sind «relative» Einheiten: Sie hängen von der geerbten Grösse und den Eigenschaften der verwendeten Schriftart ab. 1 EM entspricht 100%
Darüber hinaus beeinflusst der Darstellungsbereich die Grösse von Schriftarten auf Mobilgeräten. Auf Mobilgeräten wird die Grösse von Seiten ohne richtig konfigurierten Darstellungsbereich verringert. Der Text auf der Seite ist dann aufgrund der geringen Schriftgrösse oft nicht lesbar.
Empfehlungen
Definieren Sie zuerst einen Darstellungsbereich (Displaybreite), damit Schriftarten auf verschiedenen Geräten erwartungsgemäss skaliert werden. Setzen Sie nach dem Konfigurieren des Darstellungsbereichs die folgenden zusätzlichen Empfehlungen um:
  • Verwenden Sie eine Basisschriftgrösse von 16 CSS-Pixeln. Passen Sie die Grösse bei Bedarf an, je nach den Eigenschaften der verwendeten Schriftart
  • Verwenden Sie Grössen relativ zur Basisgrösse, um den typografischen Massstab zu definieren
  • Text erfordert senkrechten Abstand zwischen den Zeichen und muss gegebenenfalls für jede Schriftart angepasst werden. In den meisten Fällen empfiehlt es sich, die Standardzeilenhöhe des Browsers von 1,2 em zu verwenden
  • Die Verwendung zu vieler Schriftarten und Schriftgrössen hat ein unübersichtliches und übermässig komplexes Seitenlayout zur Folge
Mehr zum Thema
Typecast Blog

Visuelle Hierarchie

Beim Thema «Visuelle Hierarchie» sprechen wir von der Organisation der typografischen Elementen in Hinblick auf die Gewichtung des Inhalts. Dies erlaubt dem Nutzer eine schnelle Navigation durch die Seite und ein schnelles Auffinden der für ihn relevanten Themen.
Folgende Punkte helfen beim Visualisieren von Hierarchie:
  • Schriftgrösse und -dicke
  • Positionierung
  • Schrifttyp
  • Farbeinsatz

Verschiedene Lichtverhältnisse

Kürzlich hat das W3C ein neues Media Query-Konzept eingeführt. Es handelt 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.

Variable Fonts

Die Zukunft verspricht eine neue Art von Fonts, den «variable font». Es handelt sich hierbei um eine Font-Datei, welche sich wie mehrere Fonts verhält. Eine Font-Datei, welche unbegrenzt flexibel in Grösse, Dicke und anderen Merkmalen ist.
Mehr zum Thema hier
Typekit blog
Icon Design
Nächster Beitrag