CSS Kurs – Schriftart und Schriftgröße ändern

Dieser Beitrag ist Teil des CSS Kurses.

In diesem Schritt lernen Sie die Schriftart und die Schriftgröße über CSS zu steuern. Dies können Sie mit einigen wenigen Anweisungen erledigen. Da im CSS das Vererbungsprinzip gilt und alle Kästchen innerhalb des body Kästchens dessen Einstellungen erben (also übernehmen), müssen Sie erst einmal nur den body anpassen.
Die Schriftart wird über die Eigenschaft font-family festgelegt. Sie können die gewünschten Schriftarten der Reihe nach definieren. Wird die erste Schriftart auf dem Computer des Users nicht gefunden, versucht der Browser es mit der zweiten usw. Wenn alle Stricke reißen, können Sie angeben, ob es eine Schriftart mit oder ohne (sans) Serifen sein soll.
Ein Beispiel:

body {
    background-color: #353535;
    color: #ffffff;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

Die Schriftgröße wird über die Eigenschaft font-size bestimmt. Sie können die Größe in absoluten Werten, wie zum Beispiel Pixel, in relativen Werten, z.B. 1.5 oder 150%, sowie in Ausdrücken wie small beschreiben.

body {
    background-color: #353535;
    color: #ffffff;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: small;
}

Der Ausdruck small bedeutet, dass eine Schriftgröße kleiner als normal genommen wird. Der Benutzer kann die Schrift nach wie vor im Browser vergrößern oder verkleinern.
Diese Einstellungen greifen für fast alle Texte auf der Webseite. Aber nur fast. Elemente wie Überschriften <h1> oder Adressangaben <address> werden von dem Browser weiterhin anhand des browserinternen Stylesheets interpretiert.
Um diese Einstellungen überschreiben zu können, müssen Sie diese Elemente explizit in Ihrem Stlyesheet erwähnen.
So wollen wir die Überschrift ein wenig kleiner gestalten.

h1 { font-size: 150%;}
h2 { font-size: 120%;}

Die Prozentangaben beziehen sich auf die im body eingestellte Schriftgröße small.

Anhand des Elements address möchte ich noch ein Paar Gestaltungsmöglichkeiten demonstrieren. Standardmäßig wird der Inhalt von dem address Kästchen kursiv dargestellt. Mit der Eigenschaft font-style können Sie dies ändern.

address {
    font-style: normal;
}

Mit dem Eigenschaft text-align können Sie außerdem den Text zentrieren.

address {
    text-align: center;
}

Den Abstand zwischen den Buchstaben können Sie mit der Eigenschaft letter-spacing bestimmen.

address {
    letter-spacing: 2px;
}

Der Zeilenabstand wird über line-height festgelegt. In unserem Beispiel wird das Eineinhalbfache der Schrift genommen.

address {
    line-height: 1.5;
}

Probieren Sie es selbst aus!

Quellen und weiterführende Literatur:
Peter Müller (2013): Flexible Boxes

Falls Ihnen dieser Beitrag weitergeholfen hat, wäre es eine sehr nette Anerkennung meiner Arbeit wenn Sie z.B. Ihre Bücher über Amazon bestellen würden. Wenn Sie ein Produkt kaufen, erhalte ich dafür eine Provision. Für Sie ändert sich am Preis des Produktes gar nichts. Ich möchte mich an dieser Stelle jetzt schon für Ihre Unterstützung bedanken.