Fonts & Typografie

Schriftarten festlegen: `font-family`

body {
  font-family: "Segoe UI", Arial, sans-serif;
}

Der Browser probiert die Liste von links nach rechts durch
Nutzt die erste Schriftart, die auf dem Gerät installiert ist
Der letzte Wert sollte immer eine generische Familie sein:
- sans-serif (serifenlos, z.B. Arial)
- serif (mit Serifen, z.B. Times New Roman)
- monospace (Festbreite, z.B. für Code)

Das nennt man einen Font-Stack - er sorgt für ein Fallback, falls eine Schrift fehlt.

Web Fonts einbinden (z.B. Google Fonts)

Eigene Schriftarten, die nicht auf jedem Gerät vorinstalliert sind:

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
    rel="stylesheet"
  />
</head>

body {
  font-family: "Inter", sans-serif; /* "Inter" jetzt verfügbar */
}

Warum selbst hosten statt Google Fonts direkt laden?

Der <link href="https://fonts.googleapis.com/..."> von vorhin lädt die Schriftdatei live vom Google-Server, jedes Mal wenn jemand eure Seite besucht. Alternative: Die Schriftdatei herunterladen und selbst auf dem eigenen Server ausliefern - genau dafür ist der google-webfont-helper von oben gedacht.

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

body {
  font-family: "Inter", sans-serif; /* kommt jetzt vom eigenen Server */
}

Einheiten: px vs. em vs. rem

html { font-size: 16px; }         /* Browser-Standard, meist 16px */

.a { font-size: 20px; }           /* fix - immer 20px */
.b { font-size: 1.25em; }         /* relativ zum ELTERN-Element */
.c { font-size: 1.25rem; }        /* relativ zur ROOT (<html>) */

Einheit	Bezugspunkt	Problem/Vorteil
`px`	absolut	Einfach, aber nicht gut skalierbar
`em`	Schriftgröße des Elternelements	Kann sich bei Verschachtelung “aufschaukeln”
`rem`	Schriftgröße des `<html>`-Elements	Konsistent, empfohlen für `font-size`

Das “em-Aufschaukel-Problem”

<div class="a">
  Level 1 (16px × 1.5 = 24px)
  <div class="a">
    Level 2 (24px × 1.5 = 36px)
    <div class="a">Level 3 (36px × 1.5 = 54px)</div>
  </div>
</div>

.a { font-size: 1.5em; } /* bezieht sich immer auf den ELTERN-Wert! */

→ Die Schrift wird bei jeder Verschachtelung größer, obwohl das nicht gewollt war!

.a { font-size: 1.5rem; } /* bezieht sich IMMER auf <html>, egal wie verschachtelt */

Weitere Text-Eigenschaften

.intro-text {
  font-size: 1.125rem;
  font-weight: 700;        /* 400 = normal, 700 = bold, auch: normal/bold */
  line-height: 1.6;        /* Zeilenhöhe - Faktor der font-size, keine Einheit! */
  letter-spacing: 0.02em;  /* Buchstabenabstand */
  text-align: center;      /* left | right | center | justify */
  text-indent: 2em;        /* Einzug NUR der ersten Zeile */
  text-transform: uppercase; /* GROSSBUCHSTABEN, ohne den Text umzuschreiben */
  text-decoration: underline;
  text-shadow: 1px 1px 2px gray; /* x-Versatz, y-Versatz, Weichzeichnung, Farbe */
}

h2 {
  font-variant: small-caps; /* KAPITÄLCHEN statt Großbuchstaben */
}

`line-height` ohne Einheit

Ein Wert ohne Einheit (z.B. 1.6) ist meist besser als mit px. Er passt sich automatisch an die font-size an - wichtig für gut lesbaren Fließtext.

Faustregel: Fließtext braucht line-height zwischen 1.4 und 1.6 für gute Lesbarkeit.