CSS, HTML & Javascript mit {stil}

CSS Font – Kurz für die Schrift

CSS font ist die Kurzschrift für alle Eigenschaften der Schrift in einer CSS-Regel: line-height, font-family, font-size, font-weight und font-variant.

CSS font Eigenschaften einer Schrift

CSS font – Schriftart, -größe und -stil

CSS font ist eine Kurzschrift, die alle sechs Eigenschaften der verwendeten Schrift in einer Anweisung abdeckt. Die Kurzschrift gestaltet die CSS-Datei übersichtlicher und schafft ein Höchstmaß an Konsistenz für die Schrift der Webseite.

                                             Schriftfamilie  ┐
                                                             │
                                    Alternativschrift  ┐     │ 
                                                       │     │
                                  Wunschschrift  ┐     │     │
                                                 ▼     ▼     ▼
p { font: italic small-caps bold 1.2em/1.5em Georgia,Times,serif;} 
            ▲         ▲       ▲    ▲     ▲    
            │         │       │    │     │
            │         │       │    │     └- line-height (Zeilenabstand)
            │         │       │    │
            │         │       │    └- font-size (Schriftgröße)
            │         │       │
            │         │       └- font-weight (Schriftgewicht)
            │         │
            │         └- font-variant (Schriftvariante)
            │
            └- font-style (Schriftstil)

Der Schrägstrich vor /line-height muss gesetzt werden und trennt die Schriftgröße von der Zeilenhöhe (line-height).

Die Schriftfarbe wird nicht über ein font-Merkmal gesetzt, sondern über CSS color.

Mit der Kurzschrift font müssen font-size und font-family notiert werden, sonst hat font keine Wirkung.

font-family

CSS kann die Schriftfamilie, Schriftgröße und -farbe vorgeben, aber die Wahl der Schrift für Webseiten ohne ladbare Schriften war einst ein Würfelspiel ohne Sechsen: Ohne @font-face können Browser nur Schriften benutzen, die auf dem Rechner des Besuchers installiert sind. Wer Webseiten entwirft, musste sich damit abfinden, dass er nur eine Empfehlung für die Schrift aussprach. Darum erlaubt CSS neben der Wunschschrift auch Alternativen.

Wenn keine Angaben für die Schrift vorliegen, verwenden die Browser ihre voreingestellte Schrift für die gesamte Webseite – das war i.d.R. Times auf dem Desktop-Rechner, eine Helvetica Light auf iPad und iPhone und Roboto auf Android.

3 x font-family in cards
Sichere Schriften: Systemschriften / system fonts

Das body-Tag ist der bevorzugte Platz, die generellen CSS-Regeln für die Schrift einer Webseite festzulegen. Für einzelne Passagen – z.B. für Überschriften oder für die Schrift in der Navigationsleiste – müssen dann nur noch die Abweichungen der generellen Merkmale für die Schrift angegeben werden.

body { font: 1.2em/140% Georgia,Times,'Times New Roman',serif; } 
h1 { font-size: 1.8em; font-weight: normal; }

Systemschriften

Mit CSS3 und Webfonts scheinen die Systemschriften in Vergessenheit zu geraten. Werfen wir einen Blick auf die großen Portale: Dort ist Helvetica immer noch an der Spitze. Facebook und Pinterest, um nur zwei Beispiele zu nennen. Helvetica ist einfach gut lesbar, dabei sparsam und kommt auf jedem Typ von Monitor gut herüber.

Arial hatte jahrelang zwar einen schlechten Ruf, ist aber längst überarbeitet und genauso wie Helvetica für den Monitor optimiert und gut lesbar. Schließlich ist Arial eine Kopie der Helvetica. Google ist Arial-Fan.

Lesbarkeit von Georgia, Arial, Verdana
Systemschriften

Georgia ist nie richtig zum Zuge gekommen. Bevor die Monitore groß und immer hoch auflösender wurden, waren die Schriftgrößen zu klein, um eine Serifenschrift ohne Anstrengung zu lesen. Als Schrift für Headlines ist Georgia ein edler Hingucker.

Bis @font-face mit den Webfonts auf den Plan trat, war Verdana der King für die Brotschrift: für die Wiedergabe auf dem Monitor optimiert, schlicht und besonders gut lesbar.

Lesbarkeit von Times, Helvetica, Roboto
Systemschriften

Die Rückkehr zum Font-Stack

Bootstrap hat den Font-Stack der Systemschriften aus der Versenkung geholt und modernisiert. Bootstrap verzichtet auf den Anspruch, dass auf allen System dieselbe Schrift herrscht und setzt auf die optimierten Schriften der verschiedenen Betriebssysteme.

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}

Quelle: Bootstrap v4.2.1

Schriftgröße

Auch die Schriftgröße unterliegt nicht unbedingt den Vorgaben des Webdesigners. Der Besucher kann in allen Browsern die Schriftgröße ändern.

CSS bringt verschiedene Maße für die Bestimmung der Schriftgröße ins Spiel: Schriften können in Pixel (px), in Prozent (%), in EMS (em) oder EX (ex) und Punktgrößen (pt) festgelegt werden.

Üblich ist die Größenangabe von Schriften in px (Pixeln) oder em (EMS). Die Browser geben eine Schriftgröße von 16px vor. Zwar wird durch die Angabe der Schriftgröße in Pixeln eine konsistente Darstellung erreicht, aber auf einem 13-Zoll-Notebook wird eine 10 Pixel-große Schrift bei einer Bildschirmauflösung von 1024x768 Pixeln anders wirken als auf einem 26-Zoll-Monitor mit einer Auflösung von 1600 x 1200 Pixeln.

Es es gibt keine eindeutige Mehrheit für irgendeine Monitorauflösung. iPad, Android-Tabletts und Smartphones bringen noch mehr Unsicherheit. Da hilft nur der Blick auf die Webseite auf verschiedenen Monitoren und Geräten.

EMS, notiert als font-size:1em, ein relatives Maß für die Schriftgröße. Statt die Schriftgröße für jedes Element in Pixel anzugeben, setzt EMS alle Schriftgrößen in Relation. Üblicherweise wird eine Grundgröße für das body-Tag angegeben.

body { font-size: 0.96em; }
h1 { font-size: 1.4em; }
p { font-size: 0.9em; }

Wenn der Benutzer die Schriftgröße im Browser ändert, bleibt die Relation zwischen den Schriftgrößen erhalten.

Serifenschriften auf dem Monitor

Während im Druck meist Schriften mit Serifen genutzt werden, sehen wir auf Webseiten nahezu ausschließlich Schriften ohne Serifen. Der Monitor hat eine geringere Auflösung als der Druck. HTML-Seiten mit Serifenschriften brauchen der Lesbarkeit zuliebe deutlich größere Schriften.

Georgia

Serifenschriften sind auf Monitoren mit geringer Auflösung nicht gut lesbar.

Auch für Retina-Monitore mit hoher Auflösung werden serifenfreie Schriften bevorzugt.

Times

Der Trend geht zu größeren Schriften. Mit größeren Schriften können wir Serifenschriften besser lesen.

Auf den kleinen Monitoren der mobilen Geräte werden wir weiterhin serifenfreien Schriften den Vorzug geben.

Auch wenn die meisten Monitore der mobilen Geräte eine Retina-Auflösung haben: beim Einsatz von Serifen-Schriften immer die Lesbarkeit auf kleinen Monitoren testen.

Suchen auf mediaevent.de