Schriften (Font)

CSS definiert, welche Schrift verwendet wird, wie dick oder kursiv sie erscheint und wie Text innerhalb seines Containers ausgerichtet wird.

  • font-family – Schriftfamilie
  • font-weight – Schriftstärke
  • font-style – Schriftneigung
  • text-align – Textausrichtung

font-family

Mit font-family wird festgelegt, welche Schrift verwendet wird. Mehrere Schriften werden als Fallback-Kette angegeben – der Browser nimmt die erste verfügbare.

Wichtig: Ob eine Schrift verfügbar ist, hängt davon ab, ob sie: lokal auf dem System installiert ist (Systemfont), oder als Webfont geladen wird.

body { 
  font-family: "Trebuchet MS", Arial, sans-serif; 
}

Das System lädt Trebuchet MS, dann Arial, sonst eine beliebige Sans-Serif.
Schriftnamen mit Leerzeichen müssen in Anführungszeichen gesetzt werden

Generische Schriftfamilien

Am Ende einer Fallback-Kette sollte immer eine generische Familie stehen. Der Browser wählt dann eine passende Systemschrift.

  • serifSchriften mit Serifen (Füsschen), z.B. Times New Roman, Georgia
  • sans-serifSchriften ohne Serifen, z.B. Arial, Helvetica, Verdana
  • monospaceSchriften mit fester Breite für alle Zeichen, z.B. Courier New
  • cursiveHandschriftliche Schriften
  • fantasyDekorative/Fantasieschriften

serif: The quick brown fox jumps over the lazy dog.

sans-serif: The quick brown fox jumps over the lazy dog.

monospace: The quick brown fox jumps over the lazy dog.

cursive: The quick brown fox jumps over the lazy dog.

fantasy: The quick brown fox jumps over the lazy dog.

Generische Schriftfamilien können von Browsern unterschiedlich dargestellt werden.

Häufige System-Schriften

Diese Schriften sind auf den meisten Systemen vorinstalliert und können sicher verwendet werden:

  • Arialsans-serif
  • Helveticasans-serif
  • Verdanasans-serif
  • Trebuchet MSsans-serif
  • Times New Romanserif
  • Georgiaserif
  • Palatinoserif
  • Courier Newmonospace

Tipp: Nutze immer eine Fallback-Kette mit generischer Familie am Ende.

font-weight

Mit font-weight wird festgelegt, wie dünn oder dick eine Schrift dargestellt wird.

  • normalNormale Strichstärke (entspricht 400)
  • boldFett (entspricht 700)
  • bolderDicker als das Elternelement (relativ)
  • lighterDünner als das Elternelement (relativ)
  • 100–900Numerische Werte in 100er-Schritten (100 = Thin, 400 = Normal, 700 = Bold, 900 = Black)
h1 { font-weight: normal; }  /* Überschrift nicht fett */
.highlight { font-weight: bold; }

Wichtig: Numerische Werte funktionieren nur, wenn die verwendete Schrift den entsprechenden Schnitt auch wirklich enthält (z.B. Regular/Bold/Black).

Wenn ein Schnitt fehlt: Der Browser wählt den nächst passenden verfügbaren Schnitt oder simuliert das Gewicht künstlich (Faux Bold – sieht oft schlechter aus).

font-style

Mit font-style wird festgelegt, ob eine Schrift aufrecht oder kursiv dargestellt wird.

  • normalNormale, aufrechte Schrift (Standard)
  • italicKursiv (echte kursive Schriftart, falls verfügbar)
  • obliqueSchräg (künstlich geneigt, falls keine echte Kursive vorhanden)
em { font-style: italic; }
cite { font-style: italic; }
.upright { font-style: normal; }

Unterschied italic vs. oblique:

  • italic nutzt einen echten kursiven Schriftschnitt mit eigenen Buchstabenformen. Ist keiner vorhanden, erzeugt der Browser meist eine künstliche Schräge.
  • oblique nutzt einen schräg gestellten Schriftschnitt oder neigt ersatzweise die normale Schrift. Die Buchstabenformen bleiben dabei grundsätzlich gleich.

text-align

Mit text-align wird die horizontale Ausrichtung von Text innerhalb seines Containers bestimmt.

p { text-align: center;}

Werte

  • leftLinksbündig (Standard für LTR-Sprachen)
  • rightRechtsbündig
  • centerZentriert
  • justifyBlocksatz (beide Seiten bündig)
  • startAm Textanfang (bei LTR = links, bei RTL = rechts)
  • endAm Textende (bei LTR = rechts, bei RTL = links)
  • text-align-last Steuert die Ausrichtung der letzten Zeile (z. B. bei Blocksatz)

Hinweis: start und end richten sich nach der Schreibrichtung (direction). In links-nach-rechts-Sprachen (LTR) entspricht start meist left, in rechts-nach-links-Sprachen (RTL) dagegen right.

text-align: left;
Linksbündiger Text. Die Standardausrichtung in den meisten westlichen Sprachen.

text-align: right;
Rechtsbündiger Text. Wird oft für Zahlen in Tabellen verwendet.

text-align: center;
Zentrierter Text. Beliebt für Überschriften und kurze Texte.

text-align: justify;
Blocksatz. Der Text wird so verteilt, dass sowohl die linke als auch die rechte Kante bündig sind. Bei kurzen Zeilen können unschöne Lücken entstehen.

text-align-last steuert die Ausrichtung der letzten Zeile eines mehrzeiligen Textes. Die Eigenschaft wird hauptsächlich in Kombination mit text-align: justify verwendet und ist im modernen Webdesign eher selten.

Hinweis: justify funktioniert am besten mit langen Texten. Bei kurzen Zeilen entstehen oft zu grosse Wortabstände. Die Kombination mit hyphens: auto; kann bessere Ergebnisse liefern.

Wie Texte umbrechen steht unter Text Umbruch in CSS

Kurzschreibweise für Font

Mit der font-Eigenschaft lassen sich mehrere Font-Eigenschaften in einer Zeile kombinieren. Die Reihenfolge ist wichtig!

Syntax

font: [font-style] [font-weight] font-size[/line-height] font-family;

Pflichtangaben: font-size und font-family müssen immer angegeben werden.
Optional: font-style, font-weight und line-height
Hinweis: Der Slash / wird nur benötigt, wenn line-height gesetzt werden soll (z.B. 1.5rem/1.3).

Dieser Text nutzt die Kurzschreibweise:
font: bold 1.5rem/1.3 Georgia, serif; 

.title {
  font: bold 1.5rem/1.3 Georgia, serif;
}

/* Entspricht: */
.title {
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1.3;
  font-family: Georgia, serif;
}

Vorsicht

Die font-Kurzschreibweise setzt alle nicht angegebenen Werte auf ihren Standard zurück. In der Praxis werden die einzelnen Eigenschaften oft separat gesetzt, um mehr Kontrolle zu haben.

/* Vorher */
h1 { 
  font-weight: 900; 
  font-size: 2rem;
}

/* Nachher - font-weight wird auf 400 (normal) zurückgesetzt! */
h1 { 
  font: 2rem Arial, sans-serif; 
}

Kurz gesagt

  • font-family legt die Schrift mit einer Fallback-Kette fest
  • font-weight steuert die Schriftstärke
  • font-style bestimmt, ob eine Schrift normal oder kursiv erscheint
  • text-align richtet Text innerhalb seines Containers aus
  • font kombiniert mehrere Font-Eigenschaften in einer Kurzschreibweise

Font Themen Font Size | Font Styling | Line-height | Text Decoration | Text Shadow & Stroke | Text Umbruch