Text
Typografie entscheidet über Lesbarkeit: Schriftgrösse, Schriftdicke, Zeilenhöhe und Ausrichtung sind die wichtigsten Stellschrauben.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
Schrift
font-size legt die Schriftgröße fest, meist in rem für skalierbare Layouts.
font-weight steuert die Dicke von normal bis bold beziehungsweise 100 bis 900.
font-family definiert die Schriftfamilie mit Fallback-Liste.
body {
font-family: Inter, system-ui, sans-serif;
font-size: 1rem;
}
h1 {
font-size: 2.5rem;
font-weight: 700;
}Lesbarkeit
line-height bestimmt die Höhe einer Textzeile.
Werte um 1.5 lesen sich in Fliesstext am besten.
text-align richtet Text links, rechts, zentriert oder im Blocksatz aus. letter-spacing verändert den Zeichenabstand.
p {
line-height: 1.6;
text-align: left;
max-width: 65ch;
}Dekoration und Umwandlung
text-decoration steuert Unterstreichungen, etwa das Entfernen bei Links.
text-transform wandelt Text in Gross- oder Kleinschreibung um, ohne das HTML zu ändern.
Vertiefung
Lesbarkeit ist eine Entscheidung
Fließtext liest sich am besten mit einer Zeilenhöhe um 1.5 bis 1.7 und einer Zeilenlänge von etwa 45 bis 75 Zeichen. max-width: 65ch ist dafür ein guter Startwert.
Nutze rem für Schriftgrößen, damit Nutzereinstellungen respektiert werden. clamp() erlaubt flüssige Größen, ohne unendlich weiterzuwachsen.
body {
font-family: Inter, system-ui, sans-serif;
font-size: 1rem;
line-height: 1.6;
}
.prose {
max-width: 65ch;
}
h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
line-height: 1.1;
}Merksatz: Einheitliche Zeilenhöhe, begrenzte Zeilenlänge und rem-Größen machen Text auf allen Geräten lesbar.
Übungsaufgabe
Lesbare Typografie
Style einen Artikel mit Systemschrift, flexibler Überschrift und gut lesbarem Fließtext. Begrenze die Zeilenlänge und setze Links klar ab.
Das soll dein Programm können
- font-family mit Fallback
- line-height ohne Einheit
- max-width um 65ch
- clamp() für die h1
- Sichtbarer Link-Zustand mit :hover und :focus-visible
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
line-height: 1.6 ist einheitenlos und vererbt sich sinnvoll. Für Links: text-decoration und ein eigener Fokus-Ring.
Lösung anzeigen
body {
font-family: Inter, system-ui, -apple-system, sans-serif;
font-size: 1rem;
line-height: 1.6;
color: #18202f;
}
.prose {
max-width: 65ch;
}
h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
line-height: 1.1;
}
a {
color: #0f766e;
text-decoration-thickness: 0.1em;
text-underline-offset: 0.2em;
}
a:hover {
color: #115e59;
}
a:focus-visible {
outline: 3px solid currentColor;
outline-offset: 2px;
}Warum funktioniert das?
Die einheitenlose Zeilenhöhe skaliert mit der Schrift. max-width begrenzt die Zeile, clamp hält die Überschrift zwischen zwei Grenzen.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Eine Karte gestalten
Gestalte eine Karte mit Bild, Titel, Text und Button. Ändere anschließend nur die Schriftgröße im Browser und prüfe, ob sie stabil bleibt.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.