© Kellie L. Folkerts/Shutterstock.com
Was man über das wichtigste Element der Informationsvermittlung wissen muss

Gut lesbar: Onlinetext mit CSS


Neben Bildern und Videos ist Text der wichtigste Inhaltstyp. Trotzdem findet die Typografie im Webdesign eher wenig Beachtung. Schlechte Typografie führt dazu, dass die Information durch den Leser nicht erfasst werden kann. Das mündet letztlich in einer Site, die zwar alle Informationen bereithält, doch das Auge des Betrachters kann diese Informationen nicht richtig wahrnehmen. Gute Typografie ist zwar eine Kunst, dennoch kann sie leicht durch ein bisschen Hintergrundwissen und die Werkzeuge des Webdesigns erstellt werden.

Die Arbeit an SharePoint-Portalen führt dazu, dass man sich Fähigkeiten, Wissen und Können in diversen Fachgebieten erarbeiten muss. Bei der Gestaltung der Seiten müssen User Experience Design, Farbschema und die Typografie miteinbezogen werden. Alle diese Bereiche sind entscheidend für die Benutzerakzeptanz. Typografie ist im Webdesign über all die Jahre hinweg stiefmütterlich behandelt worden. Doch dank moderner Techniken haben Webdesigner wieder Kontrolle über das Schriftbild auf Webseiten bekommen. Lange konnten lediglich Schriftart und -größe festgelegt werden, doch mittels CSS gewinnt auch die Typografie wieder eine Bedeutung im Web.

Die Wirkung einer ausgewählten und mit Bedacht gestalteten Typografie geht weit über die reine Schriftenwahl hinaus. Ein guter Typograf oder Designer stimmt die Schriftgrade bedacht aufeinander ab, setzt die verwendeten Schriftschnitte (roman/normal, fett, kursiv, condensed etc.) in eine harmonischen Einheit, definiert Zeilen- und Absatzabstände, die optisch ansprechend sind (und die Lesbarkeit fördern) und passt die Zeichenabstände an. Diese und weitere Entscheidungen bestimmen die Wirkung einer Seite gleich stark, wenn nicht oft stärker, als es die Farbwahl oder die Position des Logos kann. Um es mit den Worten von Oliver Reichenstein zu sagen: „Bei der Typografie geht es nicht um die Auswahl der Schriften, sondern darum, den Text für eine optimale Lesbarkeit zu gestalten.“ Doch fangen wir vorne an.

Die Anatomie von Schriften

Die Schrift wie auch die Schriftgestaltung hat eine lange Geschichte. Diverse Maßeinheiten und Charakteristiken werden dabei unterschieden. Für uns Webentwickler sind diese Dinge alle wichtig und interessant. Trotzdem sind wir in der Ausgestaltung auf die CSS-Eigenschaften limitiert. Hier sind ein paar Dinge relevant (Abb. 1). Die Schriftgröße (font-size) bezieht sich immer auf den höchsten und den untersten Punkt eines Schriftsatzes. Die Schrifthöhe kann dabei variieren. Eine Schriftgröße von 16 px ist nicht immer gleich hoch. Schriften sind zwar in demselben Raster gestaltet, jedoch ist es dem Schriftdesigner überlassen, ob er die Oberlänge oder Unterlänge komplett ausnutzt. Aus diesem Grund wirken die Schriften unterschiedlich hoch.

typografie_bild1.png

Abbildung 1: Typografie-Maßeinheiten

Der Zeilenabstand (line-hight) hingegen ist fix definiert. Er reicht von baseline zu baseline. Hier gibt es keine visuellen Abweichungen bei unterschiedlichen Schriften. Falls im CSS kein line-hight definiert ist, wird line-hight mit font-size gleichgesetzt. Dies wirkt bei vielen Schriften ein bisschen zu eng. Die Daumenregel besagt, dass die line-hight 1½-mal die Schrifthöhe (font-size) haben soll. Diese Relation kann gut mit der em beschrieben werden. In CSS kann ich, neben anderen Werten, alle typografischen Größen in Pixel oder eben in em definieren. Genauer gesagt ist em eine elastische Schnittstelle, die sich der Browserschriftgröße anpasst – der Browserstandardwert liegt bei 16 px – die Anwender können die Größe ändern, falls sie es wünschen. Manche Entwickler setzen wegen der Zugänglichkeit (Accessibility) von Websites auf eine permanente Schriftgrößenänderung. Andere nutzen die UI-Einstellungen, um die Schriftgröße zu erhöhen, wenn es erforderlich ist. Ems sind relative Größen, geschrieben werden sie wie folgt: 1 em, 0,5 em, 1,5 em etc. Ems können bis zu drei Dezimalstellen haben. Sie werden basierend auf der Schriftgröße des Eltern-Elements berechnet. Zum Beispiel, wenn ein <div> eine berechnete Schriftgröße von 16 px hat, dann erbt jedes Element innerhalb dieses Eltern-Elements – ein Kind – die gleiche Größe, bis sie geändert wird. Wenn die Kind-Schriftgröße auf 0,75 em geändert wurde, wird die berechnete Schriftgröße 0,75 × 16 px = 12 px sein. Der em-Wert berücksichtigt nicht, was die Schrittgröße ist, egal ob 12 px, 16 oder 60, es wird immer im gleichen Verhältnis zu ihr sein.

Wir wissen, dass die Body-Schriftgröße standardmäßig bei 16 px liegt. Wir wissen auch, wenn eine Person ihre Einstellungen verändert hat, unsere elastische Schnittstelle nicht brechen wird, sondern sich anpasst. Perfekt, also können wir Folgendes schreiben: body{ font-size:1em; }

Hat also ein Designer einmal festgelegt, wie das Raster der Seite (baseline grid), die Schriften und deren Abstände aussehen sollen, kann man sie innerhalb des CSS einfach mithilfe der em-Relationen beschreiben. Diese Relationen sind insbesondere hilfreich, wenn die Seite für Responsive Web Design ausgelegt wird. Mit der Vererbung der em-Relationen kann so mit der Anpassung eines Werts im CSS das ganze Designs angepasst werden. Folglich kann es nur noch drei Feedbacks geben: „zu klein“, „zu groß“ und „genau richtig“.

Ein weiteres grundlegendes Thema ist das Unterschneiden. Mit Unterschneiden (Kerning) bezeichnet man den Vorgang, den horizontalen Abstand (den Weißraum) zwischen mehreren Buchstaben durch optischen Ausgleich so zu verringern, dass er gleichmäßig erscheint und so vom Betrachter als angenehmer empfunden wird. Diese Weißräume fallen besonders bei großen Schriftgrößen auf. Individuelles Unterschneiden kann mit dem Property letter-spacing konfiguriert werden. Ein weiteres Element der Typografie, das besonders beim Titel auffällt, sind so genannte Ligaturen. Eine Ligatur ist die Verbindung von mindestens zwei Buchstaben zu einer Einheit. Diese Einheit wird „Glyphe“ genannt. Eine typische Glyphe ist das „fi“ (zum Beispiel bei Affinität) für die zwei Buchstaben „f und i“, es gibt jedoch weitere Ligaturen. Innerhalb von CSS kann man das automatische Unterschneiden (Kerning) wie auch die Ligaturen über text-rendering: optimizeLegibility; aktivieren. Abbildung 2 zeigt ein Browserbeispiel bei aktiven und inaktiven optimizeLegibility.

typografie_bild2.png

Abbildung 2: Automatisch aktiviertes Unterschneiden und Ligaturen

Um ein Gefühl für das Unterschneiden zu bekommen, findet man unter „Method of Action“ [1] ein Browserspiel, bei dem die Unterschneidung von Wörtern optimiert werden muss. Danach wird das Resultat von Profis verglichen und bewertet.

Serifen oder serifenlose Schriften – die letzte Schlacht

Die wichtigste Frage, die sich beim Erstellen einer Seite bezüglich der Schriftart zunächst stellt, ist, ob eine Schri...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang