CSS, HTML und Javascript mit {stil}

CSS Font – Kürzel für die Schrift

CSS font – Shorthand, Kurzschrift für font-family, font-size, line-height

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.

font gestaltet die CSS-Datei übersichtlicher und schafft ein Höchstmaß an Konsistenz für die Schrift der Webseite.

CSS font

CSS font ist eine Kurzschrift, der alle sechs Eigenschaften der verwendeten Schrift in einer Anweisung abdeckt.

                                             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).

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 ist 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 ist i.d.R. Times auf dem Desktop-Rechner, eine Helvetica Light auf iPad und iPhone und Roboto auf Android.

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: Das 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 mag zwar einen schlechten Ruf haben, ist aber längst überarbeitet und genauso wie Helvetica gut lesbar. Schließlich ist Arial eine Kopie der Helvetica. Google ist Arial-Fan.

Georgia ist nie richtig zum Zuge gekommen. Bevor die Webfonts uns eingenommen haben, waren die Monitore nicht hochauflösend und groß genug, die Schriftgrößen zu klein, um eine Serifenschrift ohne Anstrengung zu lesen. Als Schrift für Headlines ist Georgia ein edler Hingucker.

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

Klassische serifen-freie Schriften

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.

Times New Romana Tt Ee Rr ÜüTt Ee Rr Üü Löffelstiel abcdefghinjklmnopqrstuvwxyzäüöß0123456789 Robotoa Tt Ee Rr ÜüTt Ee Rr Üü Löffelstiel abcdefghinjklmnopqrstuvwxyzäüöß0123456789 Helveticaa Tt Ee Rr ÜüTt Ee Rr Üü Löffelstiel abcdefghinjklmnopqrstuvwxyzäüöß0123456789 Georgiaa Tt Ee Rr ÜüTt Ee Rr Üü Löffelstiel abcdefghinjklmnopqrstuvwxyzäüöß0123456789 Verdanaa Tt Ee Rr ÜüTt Ee Rr Üü Löffelstiel abcdefghinjklmnopqrstuvwxyzäüöß0123456789 Ariala Tt Ee Rr ÜüTt Ee Rr Üü Löffelstiel abcdefghinjklmnopqrstuvwxyzäüöß0123456789