Schriftfamilie: Die Eigenschaft font-family

Die Eigenschaft font-family gibt die Schriftfamilie (Schriftart) an, die zur Darstellung textuellen Elementinhalts verwendet werden soll.

Der Begriff »Schriftfamilie« kommt aus der Typografie und bezeichnet eine Gruppe zusammengehörender Schriften (Schriftschnitten und Schriftstilen) mit unterschiedlichen Breiten, Strichstärken (leicht, normal, fett, …) und Zeichenlagen (normal, kursiv, …).

<Schriftfamilie> steht für den Namen einer konkreten Schriftfamilie, zum Beispiel Courier, Courier New, Verdana, Arial, Trebuchet MS oder Times New Roman. Enthalten Schriftfamiliennamen Leerzeichen, sollten sie in Anführungszeichen notiert werden.

Generische Schriftfamilien stellen Gruppierungen von »typografisch verwandten« Schriften dar und dienen Webautoren dazu, den Stil der Schrift festzulegen, wenn sie keine konkrete(n) Schriftfamilie(n) angeben oder diese auf dem System des Nutzers nicht installiert ist beziehungsweise sind. Es gibt insgesamt fünf generische Familien: serif, sans-serif, cursive, fantasy und monospace. Abbildung 7.4 beschreibt die Schriftfamilien und zeigt Beispiele.

Abb. 7.4: Die Eigenschaft font-family: Beispiele für die Schriftfamilien serif, sans-serif, cursive, fantasy und monospace

Die Frage nach der richtigen Schriftfamilie

Jetzt kennen Sie zwar die Eigenschaft, mit der Sie eine Schriftfamilie (oder mehrere) angeben, aber die grundlegenden Fragen müssen Sie sich noch immer stellen: Welche Schriftfamilie sollten Sie für welches Element wählen? Welche Schriftfamilie ist am besten zu lesen?

Grundsätzlich gilt: Sie können jede Schriftfamilie angeben, die Sie möchten. Sie können sogar eine beliebig große Anzahl von Schriftfamilien angeben. Aufgrund der Angaben

body {
  font-family: Verdana, Helvetica, sans-serif;
}
h1 {
  font-family: Georgia, "Times New Roman", serif;
}
code {
  font-family: "Courier New", Courier, monospace;
}

würde ein CSS-fähiger Browser versuchen, den Elementinhalt von Überschriften der ersten Ordnung in der Schriftfamilie Georgia darzustellen. Sollte Georgia auf dem System nicht installiert sein, sucht er nach Times New Roman; findet er auch diese Schriftfamilie nicht, wählt er die Schriftfamilie, die der Benutzer auf seinem System standardmäßig für die generische Schriftfamilie serif angegeben hat beziehungsweise die im Browser voreingestellt ist.

Die Wahl der richtigen Schriftfamilie sollte gut überlegt sein. So sollten Sie sich zunächst fragen, ob es wirklich notwendig ist, überhaupt eine Schriftfamilie zu definieren. Aus zwei Gründen könnte dies überflüssig sein:

• Jeder Browser stellt Text in einer voreingestellten Standardschriftfamilie dar. Man sollte davon ausgehen können, dass diese im Allgemeinen gut lesbar ist.

  Leider ist das nicht immer der Fall. Die auf Windows-Betriebssystemen voreingestellte Schriftfamilie Times New Roman versagt vor allem bei längeren Fließtexten oder kleinen Schriftschnitten.

• Jeder Browser ermöglicht es Nutzern, eigene Schriftfamilien anzugeben, im einfachsten Fall über die allgemeinen Einstellungen des Browsers.

  Leider nutzt kaum jemand diese Möglichkeit, nicht zuletzt deshalb, weil das Gros der Nutzer nichts davon weiß oder nicht bereit ist, den Browser nach dessen Vorlieben zu konfigurieren.

Geben Sie daher eine Schriftfamilie an, von der Sie wissen, dass sie die Lesbarkeit Ihrer Website im Vergleich zur voreingestellten Standardschriftfamilie verbessert. Die im vorausgehenden Beispiel angegebenen Kombinationen haben sich in der Praxis bewährt. Nutzer, die in der Lage sind, eine Schriftart zu finden, die die Lesbarkeit darüber hinaus erhöht, wissen in den meisten Fällen auch, wie sie sie so einbinden, dass die Einstellungen des Autors ihre Angaben nicht überschreiben – im Allgemeinen per Userstylesheet in Verbindung mit dem Schlüsselwort !important.

Mit oder ohne Serifen?

Die Frage, ob man für Fließtext auf Webseiten eher eine Schriftfamilie mit oder ohne Serifen wählen sollte, wird schon so lange diskutiert, wie es Typografie (für die Darstellung auf Computerbildschirmen) gibt, und die Antwort darauf ist wohl eher eine individuelle Entscheidung als eine allgemeine Regel. Im Druck werden im Allgemeinen Serifenschriften verwendet, da sich vor allem durch die Betonung der Grund- und Mittellinie durch die Serifen, die das Auge führen, eine bessere Lesbarkeit ergibt. Serifenlose Schriften werden dagegen eher für kurze Texte und Überschriften eingesetzt. Für die Darstellung auf dem Bildschirm gehen Webautoren generell umgekehrt vor: serifenlose Schriften für lange Texte, Serifenschriften über Überschriften. Auf einem (flackernden) Monitor können Sie nicht mehr davon ausgehen, dass die Schrift so klar und deutlich dargestellt wird wie auf dem Papier; die Führung des Auges kann dadurch schnell verloren gehen. Wichtiger sind große Zeilenabstände und kurze Zeilenlängen oder zumindest ein fließendes Design, das es Nutzern ermöglicht, Schriftgrößen zu skalieren und Zeilenlängen durch Verkleinern des Browserfensters auf eine lesbare Länge zu kürzen. Bei vielen Webagenturen ist Verdana für Fließtexte die Schriftfamilie der Wahl.

Zum Seitenanfang

Schriftstil: Die Eigenschaft font-style

Die Eigenschaft font-style gibt an, ob eine normale oder eine schräg laufende Schriftauszeichnungsart gewählt wird.

Der Wert italic bestimmt eine Schrift aus der angegebenen Schriftfamilie, die als »italic« (echt kursiv) gekennzeichnet ist, deren Glyphen also speziell kursiv entwickelt wurden. Falls eine solche Schrift nicht verfügbar ist, wird eine Schrift gewählt, die als »oblique« gekennzeichnet ist.

Der Wert oblique bestimmt eine Schrift aus der angegebenen Schriftfamilie, die als »oblique« gekennzeichnet ist. Häufig handelt es sich dabei um eine Schrift, die durch das elektronische Neigen einer normalen Schrift entstanden ist, wodurch die Lesbarkeit im Allgemeinen nicht so gut ist wie bei echt kursiven Schriften.

In der Realität unterscheiden sich Schriften in den Stilen oblique und italic innerhalb einer Schriftfamilie zumeist nicht oder kaum erkennbar.

Zum Seitenanfang

Schriftvariante: Die Eigenschaft font-variant

Die Eigenschaft font-variant gibt an, ob Normalschrift oder eine Schrift mit Kapitälchen angezeigt wird.

Geben Sie den Wert small-caps an, wird die Schrift mit Kapitälchen angezeigt, wobei die Kleinbuchstaben ähnlich wie Großbuchstaben aussehen, aber etwas kleiner sind und andere Proportionen haben. Steht in der Schriftfamilie keine eigene Kapitälchenschrift zur Verfügung, simulieren Browser eine solche, indem sie im Allgemeinen eine normale Schrift verwenden und die Kleinbuchstaben durch verkleinerte Großbuchstaben ersetzen.

Zum Seitenanfang

Schriftgewichtung: Die Eigenschaft font-weight

Die Eigenschaft font-weight gibt die Gewichtung (Schriftdicke) der verwendeten Schrift an.

Die Werte 100 bis 900 bilden eine Sequenz von »sehr dünn« bis »sehr dick«. Es kommt auf das Benutzerprogramm an, wie diese Werte dargestellt werden. In der Praxis gibt es aber bis heute kaum eine Schriftart, die in neun verschiedenen Gewichtungen existiert.

Der Wert normal entspricht dem Wert 400, der Wert bold dem Wert 700.

Der Wert bolder verschiebt die Schriftdicke relativ zum Elternelement (beziehungsweise zum berechneten vererbten Wert) um einen Wert nach oben, lighter analog um einen Wert nach unten.

Zum Seitenanfang

Schriftgröße: Die Eigenschaft font-size

Die Eigenschaft font-size gibt die Schriftgröße eines Elements an.

Die Frage nach der richtigen Schriftgröße

Die Frage nach der richtigen Schriftgröße gehört wie die Frage nach der richtigen Schriftart zu den ersten und fundamentalsten in der Typografie. Dabei gibt es so viele Meinungen wie Möglichkeiten:

• Pessimisten sagen, die richtige Schriftgröße könne es nicht geben, da das, was für den einen richtig ist, für den anderen falsch ist.
• Puristen sagen, die richtige Schriftgröße sei die, die der Nutzer in seinem Browser eingestellt hat.
• Designer sagen, die richtige Schriftgröße sei eine solche, die das Gesamtbild der Seite prägt und sich geschmeidig in das Designkonzept der Website integriert.
• Pragmatiker sagen, die richtige Schriftgröße sei die, die auf den meisten Webseiten zu finden ist.
• Optimisten sagen, die richtige Schriftgröße sei die, die auf den meisten Webseiten zu finden ist, wobei Nutzer, denen sie zu klein oder zu groß ist, schon in der Lage seien, sie nach ihren Wünschen zu skalieren.

Viele Faktoren beeinflussen die Schriftgröße auf dem Bildschirm. Was auf einem 17-Zoll-TFT mit XGA-Auflösung (1.024 x 768) schön und übersichtlich aussieht, kann auf einem 21-Zoll-TFT mit UXGA-Auflösung (1.600 x 1.200) unlesbar klein und auf einem 14-Zoll-Notebook mit SVGA-Auflösung (800 x 600) klobig und viel zu groß wirken. Hinzu kommt, dass dieselbe Schriftgrößenangabe bei unterschiedlichen Schriftfamilien keinesfalls gleich wirkt. Viele serifenlose Schriften wirken größer als vergleichbare Serifenschriften und »zerfallen« bei großen Schriftgraden dadurch, dass die Buchstaben zu dünn wirken und zu weit auseinanderstehend scheinen. Abbildung 7.5 demonstriert dies anhand der Schriftgröße 16 px und den Schriftfamilien Verdana, Arial und Times New Roman.

Abb. 7.5: Die Schriftfamilien Verdana, Arial und Times New Roman wirken bei einer Schriftgröße von 16 px unterschiedlich groß

Viel wichtiger als technische Faktoren ist jedoch der Nutzer mit seiner individuellen Sehkraft, der vor dem Ausgabegerät sitzt. Ältere Menschen haben im Allgemeinen größere Schwierigkeiten, Texte in kleiner Schrift zu lesen, als Jugendliche oder junge Erwachsene. Aber auch Normalsichtige haben oftmals nach Stunden des Lesens auf einem flackernden Monitor Probleme bei der Lesbarkeit von längeren Textpassagen. Wer sich schon mal dabei ertappt hat, wie er nach vorne gebeugt angestrengt auf einen viel zu kleinen Text starrt, wird wissen, was ich meine; wie viel angenehmer ist es doch, entspannt und zurückgelehnt einen Text zu lesen, dessen ausreichend große Schriftgröße diese angenehme Lesehaltung ermöglicht.

Die einfachste Lösung ist, dem Anwender die Wahl der für ihn richtigen Schriftgröße zu überlassen, also keine Angabe zur Schriftgröße vorzunehmen, zumindest nicht für Fließtexte. Daraus ergeben sich jedoch zwei Probleme:

• Viele Anwender wissen nicht, wie sie die Schriftgröße ihres Browsers skalieren.
• Die im Browser eingestellte Standardschriftgröße unterscheidet sich von der Schriftgröße, die auf den meisten Websites zu sehen ist. Das Gros aller Websites verwendet einen reduzierten Schriftgrad. Belassen Sie die Schriftgröße bei den Standardeinstellungen des Browsers, erscheint der Text Ihrer Website im Vergleich zu den meisten anderen Sites ungewohnt groß. Dieses Phänomen ist auch als das »Problem der zu großen Schrift« bekannt.

Die meisten Webautoren setzen die Schriftgröße auf ihren Websites ein wenig herab, im Allgemeinen über folgende Deklaration für das Element body, wobei die angegebene Größe je nach verwendeter Schriftfamilie geringfügig variieren kann:

body { font-size: 80%; }

Wenn Sie die Schriftgröße nicht verändern wollen, sollten Sie explizit für body eine Schriftgrößendeklaration von 100.01% vornehmen und sich im weiteren Verlauf (beispielsweise bei Überschriften) relativ darauf beziehen, etwa mittels Angaben in em (zum Beispiel h1 { font-size: 1.4em; }). Schreiben Sie 100.01% und nicht 100%, um einigen Browser-Bugs in Internet Explorer, Opera 6 und Safari auszuweichen (siehe [Caspers 2003]).

/* Bugfixing bei Standardschriftgröße */
body { font-size: 100.01%; }

Ein weiterer sehr ärgerlicher Fehler begegnet Ihnen in vielen veralteten Browsern, vor allem im Quirks Mode des Internet Explorers (siehe Kapitel 6.8.2 »Doctype Switching«). In diesem Darstellungsmodus werden Schriftgrößendeklarationen nicht in Tabellenzellen hinein vererbt; darin enthaltene Schrift würde folglich deutlich größer wirken als auf dem Rest der Webseite. Um dieses Problem zu beheben, gehen Sie in zwei Schritten vor.

Zunächst deklarieren Sie die gewünschte Schriftgröße neben body auch für die Elemente td (Datenzellen) und th (Kopfzellen). Standardkonforme Browser würden Schrift in Tabellenzellen nun zu klein darstellen, nämlich in 64 Prozent der Standardschriftgröße (80 Prozent von 80 Prozent). Für diese gilt es also, die Schrift wieder hochzusetzen.

Dafür machen Sie sich im zweiten Schritt zunutze, dass alle Browser, die den Darstellungsfehler aufweisen, keine Maskierung verstehen und die zweite Regel daher ignorieren; so setzen Sie die Schriftgröße für standardkonforme Browser wieder auf 100 Prozent der vererbten Größe und erreichen, dass die Schrift in allen Browsern innerhalb und außerhalb von Tabellenzellen die gewünschten 80 Prozent der Standardschriftgröße erreicht.

/* Erster Schritt: Schriftgröße für den Dokumentkörper
  und Tabellenzellen setzen */
body, td, th { font-size: 80.01%; }

/* Zweiter Schritt: Schriftgröße für standardkonforme
  Browser für Tabellenzellen wieder hochsetzen */
td, th { f\ont-size: 100.01%; }

Zum Seitenanfang

Schrift: Die zusammenfassende Eigenschaft font

Die Eigenschaft font fasst die Einstellungen der einzelnen Schrifteigenschaften (font-family, font-style, font-variant, font-weight und font-size) sowie die Eigenschaft line-height zur Bestimmung der Zeilenhöhe zusammen. Sie setzt zunächst die einzelnen Eigenschaften auf ihre Initialwerte und weist ihnen dann die explizit in der Deklaration angegebenen Werte zu. Dabei gilt folgende Reihenfolge, wobei Sie beachten müssen, dass Schriftgröße und Zeilenhöhe mit einem Schrägstrich (/) voneinander getrennt sind; optionale Angaben stehen in eckigen Klammern: [font-style] [font-variant] [font-weight] font-size[/line-height] [font-family]

Die Regeln

body {
  font-size: 80%;
  line-height: 170%;
  font-family: Verdana, sans-serif;
}
h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.6em;
  font-variant: small-caps;
}

lassen sich somit wie folgt abkürzen:

body { font: 80%/170% Verdana, sans-serif; }

h1 { font: small-caps bold 1.6em Georgia, "Times New Roman", serif; }

Die Angabe des Schriftgewichts der Überschrift erster Ordnung ist in der abgekürzten Schreibweise notwendig. Überschriften werden zwar standardmäßig fett dargestellt, der Initialwert der Eigenschaft font-weight ist jedoch normal, nicht bold, sodass Sie, würden Sie nicht explizit bold angeben, das Browserstylesheet überschreiben und normal gewichtete Überschriften erhalten würden.