HTML + CSS: Text und Schriften

Kurz: Die font-family-Liste ist ein Rückfall-Stapel: Der Browser nimmt die erste vorhandene Schrift. Am Ende steht immer eine generische Familie (serif, sans-serif, monospace, system-ui).

Teil des Kurses HTML + CSS

Kapitel 16 von 27 im Kurs HTML + CSS. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Schrift auswählen

<style>
  p { font-size: 1.1rem; line-height: 1.6; }
  .a { font-family: Georgia, "Times New Roman", serif; }
  .b { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
  .c { font-family: ui-monospace, Menlo, Consolas, monospace; }
  .d { font-family: cursive; }
</style>
<p class="a">Serifen: Georgia, für längere Texte (serif)</p>
<p class="b">Systemschrift: schnell und vertraut (sans-serif)</p>
<p class="c">Nichtproportional: Code und Zahlen (monospace)</p>
<p class="d">Kursive Zierschrift (cursive)</p>

Die font-family-Liste ist ein Rückfall-Stapel: Der Browser nimmt die erste vorhandene Schrift. Am Ende steht immer eine generische Familie (serif, sans-serif, monospace, system-ui).

Eigene Schriften laden

@font-face {
  font-family: "Meine Schrift";
  src: url("schrift.woff2") format("woff2");
  font-weight: 400 700;          /* Variable Font: Bereich */
  font-display: swap;            /* erst Ersatzschrift zeigen, dann tauschen */
}
body { font-family: "Meine Schrift", system-ui, sans-serif; }

• Nutze WOFF2-Dateien und hoste sie am besten selbst (Datenschutz, Tempo)
• Lade nur die Schnitte, die du brauchst
• Beachte die Schriftlizenz

Größe, Gewicht, Stil

<style>
  p { margin: 4px 0; }
  .klein { font-size: .8rem; }
  .gross { font-size: 1.6rem; }
  .fett { font-weight: 700; }      /* 100 bis 900; bold = 700 */
  .duenn { font-weight: 300; }
  .kursiv { font-style: italic; }
  .vmin { font-size: clamp(1rem, 3vw, 2rem); }   /* flüssig zwischen Minimum und Maximum */
  .kapitaelchen { font-variant: small-caps; }
  .tabular { font-variant-numeric: tabular-nums; }
</style>
<p class="klein">klein 0.8rem</p>
<p class="gross">groß 1.6rem</p>
<p class="fett">fett (700)</p><p class="duenn">dünn (300)</p>
<p class="kursiv">kursiv</p>
<p class="vmin">Flüssige Schrift mit clamp()</p>
<p class="kapitaelchen">Kapitälchen im Text</p>
<p class="tabular">1111 und 8888 gleich breit</p>

Textformatierung

Eigenschaft	Beispiel	Wirkung
text-align	left, center, right, justify	Ausrichtung
line-height	1.5	Zeilenabstand (ohne Einheit!)
letter-spacing	.05em	Buchstabenabstand
word-spacing	.2em	Wortabstand
text-indent	2em	Einzug erste Zeile
text-transform	uppercase, capitalize, lowercase	Groß-/Kleinschreibung
text-decoration	underline, line-through, underline wavy red	Linien
text-shadow	2px 2px 4px #0006	Schatten
white-space	nowrap, pre, pre-wrap	Umbruchverhalten
text-overflow	ellipsis	”…” bei Überlauf (mit overflow: hidden)
word-break, overflow-wrap	break-word	lange Wörter umbrechen
hyphens	auto	automatische Silbentrennung (mit lang)

<style>
  .box { width: 220px; border: 1px dashed #888; margin: 6px 0; padding: 4px; }
  .sperr { letter-spacing: .15em; text-transform: uppercase; font-size: .8rem; }
  .blocksatz { text-align: justify; hyphens: auto; }
  .ellipse { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mehrzeilig { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .schatten { text-shadow: 2px 2px 0 #fde68a, 4px 4px 0 #f59e0b; font: bold 1.6rem sans-serif; }
</style>
<div class="box sperr">Gesperrte Kapitälchen</div>
<div class="box blocksatz" lang="de">Donaudampfschifffahrtskapitän und Silbentrennung im Blocksatz funktionieren so besser.</div>
<div class="box ellipse">Dieser lange Text wird abgeschnitten und mit Punkten beendet</div>
<div class="box mehrzeilig">Dieser sehr lange Text darf nach genau zwei Zeilen enden, danach werden Punkte angezeigt, damit nichts überläuft.</div>
<div class="schatten">Schatten</div>

Lesbare Texte

• Zeilenlänge: 45 bis 75 Zeichen, also max-width: 65ch
• Zeilenabstand: 1,4 bis 1,7 für Fließtext, bei Überschriften enger
• Schriftgröße: mindestens 16 px (1rem) für Fließtext
• Kontrast ausreichend; Blocksatz nur mit Silbentrennung
• Linksbündig für lange Texte, zentriert nur für kurze

<style>
  .artikel { max-width: 60ch; margin: auto; font: 1.1rem/1.7 Georgia, serif; color: #222; }
  .artikel h2 { font: 800 1.6rem/1.2 system-ui, sans-serif; margin: 0 0 .5em; }
</style>
<article class="artikel">
  <h2>Gut lesbarer Artikel</h2>
  <p>Eine begrenzte Zeilenlänge, großzügiger Zeilenabstand und eine ruhige Schrift machen längere Texte angenehm zu lesen, auf dem Handy genauso wie am Monitor.</p>
</article>

Variable Fonts und Schriftgröße flüssig anpassen

<style>
  h1 {
    font-size: clamp(1.5rem, 1rem + 3vw, 3rem);   /* min, bevorzugt, max */
    line-height: 1.1;
    text-wrap: balance;                          /* gleichmäßigere Zeilenumbrüche */
  }
  p { text-wrap: pretty; }
</style>
<h1>Eine flüssige Überschrift, die gleichmäßig umbricht</h1>
<p>Verändere die Fensterbreite und beobachte, wie sich die Überschrift anpasst.</p>

Merke

• font-family ist ein Stapel mit generischer Familie am Ende; eigene Schriften per @font-face und WOFF2
• rem für Größe, line-height ohne Einheit (1,5 bis 1,7)
• max-width: 65ch begrenzt die Zeilenlänge
• text-align, letter-spacing, text-transform, text-overflow: ellipsis, hyphens: auto
• clamp() macht Schriftgrößen flüssig; text-wrap: balance verbessert Überschriften

Übungsaufgabe

Gestalte einen Artikel mit eigener Überschriftenschrift, gut lesbarem Fließtext (Zeilenlänge, Abstand), einem Zitat und flüssiger Überschriftengröße.

Quiz zur Selbstkontrolle

Welcher line-height-Wert ist unkompliziert?

• 1.5 (ohne Einheit) (richtig)
• 1.5px immer
• 150
• auto

Was begrenzt die Zeilenlänge auf ca. 65 Zeichen?

• max-width: 65ch (richtig)
• width: 65px
• line-length: 65
• chars: 65

Wofür ist font-display: swap?

• Erst Ersatzschrift zeigen, dann die geladene Schrift tauschen (richtig)
• Schriften tauschen
• Schrift fett machen
• Schrift verstecken

Weiter im Kurs

Zurück: Farben und Hintergründe

Weiter: Das Box-Modell

Alle Kapitel: HTML + CSS im Überblick