Font Grundlagen & CSS Font Properties

Grundlagen: Was sind Fonts?

Ein Font ist eine digitale Schriftart, die festlegt, wie Buchstaben auf dem Bildschirm oder auf Papier aussehen. Dazu gehören Form, Dicke, Größe, Abstände und mehr.

Font Families – die 5 Hauptkategorien

1. Serif
Schriften mit kleinen "Füßchen". Traditionell, elegant, gut für längere Texte. Beispiele: Times New Roman, Trirong.

2. Sans-Serif
Ohne Serifen. Modern, klar und gut lesbar auf Bildschirmen. Beispiele: Arial, Inter, Roboto.

3. Monospace
Alle Zeichen sind gleich breit – wie eine Schreibmaschine. Beispiele: Courier New, Consolas.

4. Cursive
Handschriftähnliche Schriftarten. Beispiele: Comic Sans, Sofia.

5. Fantasy
Dekorative oder ausgefallene Designs. Beispiele: Audiowide, Papyrus.

Systemfonts vs. Webfonts

Systemfonts:
Auf jedem Gerät vorinstalliert (Arial, Times New Roman). Vorteil: Schnell und sicher verfügbar.

Webfonts:
Werden heruntergeladen, z. B. von Google Fonts. Vorteil: Viel mehr Auswahl und professionelles Design.

CSS Font Properties

Mit CSS kann man viele verschiedene Font-Eigenschaften steuern.

font-family

Bestimmt, welche Schriftart verwendet wird.

p {
    font-family: "Inter", sans-serif;
}

font-size

Legt die Schriftgröße fest (px, em, rem, %, vw).

h1 {
    font-size: 32px;
}

font-weight

Die Dicke einer Schrift (100–900 oder „bold“).

p {
    font-weight: 700;
}

font-style

Steuert Kursivschrift.

p {
    font-style: italic;
}

font-variant

Macht z. B. kleine Großbuchstaben.

p {
    font-variant: small-caps;
}

line-height

Abstand zwischen den Zeilen.

p {
    line-height: 1.6;
}

letter-spacing

Abstand zwischen einzelnen Buchstaben.

p {
    letter-spacing: 2px;
}

word-spacing

Abstand zwischen ganzen Wörtern.

p {
    word-spacing: 6px;
}

font (Kurzschreibweise)

Alle Font-Eigenschaften kann man auch in einer einzigen Zeile schreiben.

p {
    font: italic 700 18px/1.6 "Inter", sans-serif;
}