CSS Tutorial – Schriften

Schriftarten mit CSS gestalten

Die Wahl der richtigen Schriftarten ist entscheidend für die Lesbarkeit und den Gesamteindruck einer Webseite.
CSS stellt verschiedene Eigenschaften bereit, um Schriftart, Schriftgröße, Schriftstil, Schriftstärke und Varianten
detailliert anzupassen. Die wichtigsten Eigenschaften sind:

• font-family
• font-style
• font-weight
• font-size
• font-variant

Im Folgenden sehen wir uns jede Eigenschaft im Detail an.

Schriftfamilie (font-family)

Mit der font-family-Eigenschaft legen Sie fest, welche Schriftart zur Darstellung des Textes verwendet werden soll.
Es können mehrere Schriften als Fallback definiert werden. Fällt die erste Schrift weg, verwendet der Browser automatisch die nächste.

body {
    font-family: Arial, Helvetica, sans-serif;
}
    

Wichtig: Schriftfamilien mit Leerzeichen müssen in Anführungszeichen geschrieben werden, z.B. "Times New Roman".

Zu den generischen Schriftfamilien gehören:
serif, sans-serif, monospace, cursive und fantasy.
Sie sollten die Liste immer mit einer dieser generischen Familien abschließen.

Schriftstil (font-style)

Mit font-style können Sie den Schriftschnitt bestimmen:

• normal – Standard-Stil
• italic – echte kursive Schrift
• oblique – künstlich geneigt

Unterschied: Während italic eine echte kursive Variante der Schrift nutzt, ist oblique nur eine schräg gestellte Version des normalen Schriftschnitts.

Schriftgröße (font-size)

Mit font-size definieren Sie die Textgröße eines Elements. CSS bietet mehrere Maßeinheiten:

• Pixel: px
• Prozent: %
• EM: em
• Root-EM: rem
• Viewport-Einheiten: vw, vh
• Schlüsselwörter: small, large, xx-large etc.

Schriftgröße in Pixeln

p {
    font-size: 24px;
}
    

Pixel sind absolut, skalieren aber nicht gut. Nutzer mit Sehschwäche können die Größe nicht unabhängig vom Zoom anpassen.
Für barrierefreies Design sollte man Pixelwerte sparsam einsetzen.

Schriftgröße in EM

Die Einheit em orientiert sich an der Schriftgröße des Elternelements.

h1 {
    font-size: 2em;        /* 32px */
}
p {
    font-size: 0.875em;    /* 14px */
}
    

Die 62.5%-Methode (beliebt im Webdesign)

Setzt man body auf 62.5%, wird 1em = 10px.

body {
    font-size: 62.5%;
}
p {
    font-size: 1.4em;    /* 14px */
}
    

Root-EM (rem)

rem bezieht sich immer auf die Schriftgröße des html-Elements und verhindert verschachtelte Skalierung.

html {
    font-size: 62.5%;
}
p {
    font-size: 1.4rem;    /* 14px */
}
span {
    font-size: 2rem;      /* 20px */
}
    

Viewport-basierte Schriftgrößen

Schriftgrößen können im Verhältnis zum Browserfenster angegeben werden. Beispiel:

body {
    font-size: 1vw;
}
    

Problem: Auf kleinen Bildschirmen wird der Text zu klein.
Abhilfe schafft calc():

html {
    font-size: calc(1em + 1vw);
}
    

Schriftstärke (font-weight)

Mit font-weight steuern Sie die Schriftstärke. Mögliche Werte sind:

• normal, bold
• bolder, lighter
• numerische Werte: 100 bis 900

p {
    font-weight: bold;
}
    

Viele Schriften unterstützen jedoch nur wenige Gewichtungen. Häufig existieren nur normal (400) und bold (700).

Schriftvariante (font-variant)

Mit font-variant lassen sich Kapitälchen (Small Caps) darstellen:

p {
    font-variant: small-caps;
}
    

Beispiel: Das Wort „Hallo Welt“ erscheint dann in kleinen Großbuchstaben.