Schriftgröße, -stärke und -stil
Steuern Sie die Textgröße mit font-size, die Schriftstärke mit font-weight und den Stil mit font-style.
Schriftgröße, -stärke und -stil ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
font-size
font-size legt die Höhe der Glyphen fest. Es akzeptiert jede Längeneinheit. Für skalierbare und barrierefreie Typografie wird die Verwendung von rem empfohlen.
<h1>Heading (2.5rem)</h1>
<p>Body text (1rem)</p>
<small>Fine print (0.75rem)</small>
Schriftgrößen als Schlüsselwörter
CSS stellt außerdem absolute Schlüsselwortgrößen (xx-small bis xx-large) sowie relative Schlüsselwörter (smaller, larger) relativ zur Schriftgröße des übergeordneten Elements bereit.
<p class="note">Smaller note text</p>
<p class="big">Extra large text</p>
font-weight
font-weight legt die Strichstärke des Textes fest. Verwenden Sie numerische Werte (100–900 in Schritten von 100) oder Schlüsselwörter:
<p class="thin">Thin weight (100)</p>
<p>Normal body weight (400) with <strong>bold strong text (700)</strong></p>
<p class="heavy">Heavy weight (900)</p>
font-weight und variable Schriften
Bei variablen Schriften ist jedes ganzzahlige Gewicht (z. B. font-weight: 550) gültig, und die Schrift interpoliert zwischen den definierten Achsen. Dadurch erhalten Sie eine fein abgestufte typografische Kontrolle.
font-style
font-style steuert die Darstellung von kursivem und schrägem Text:
<p>This has <em>italic emphasis</em> inline.</p>
<p class="normal">Normal style text</p>
<p class="oblique">Oblique 20deg text</p>
font-variant
font-variant aktiviert typografische Funktionen wie Kapitälchen:
<p>The <abbr title="Cascading Style Sheets">CSS</abbr> abbreviation uses small-caps.</p>
Die font-Kurzschreibweise
Die Kurzschreibweise font fasst Stil, Variante, Gewicht, Größe, Zeilenhöhe und Schriftfamilie zusammen:
<p>Shorthand font: italic bold 1.1rem/1.6 Roboto.</p>
Responsive Skalierung der Schriftgröße
Verwenden Sie clamp(), um eine fließende Typografie zu erstellen, die sich gleichmäßig zwischen einer minimalen und einer maximalen Größe skaliert:
<h1>Resize the window — this heading scales fluidly.</h1>
line-height für bessere Lesbarkeit
line-height legt den vertikalen Abstand zwischen Zeilen fest. Der einheitenlose Wert (z. B. 1.5) wird empfohlen – er skaliert mit der Schriftgröße der Nachfahren.
<h1>Tight Heading Line Height</h1>
<p>Body copy with relaxed 1.5 line-height wraps across multiple lines for comfortable reading, demonstrating the effect of the line-height property on paragraph text blocks.</p>
letter-spacing und word-spacing
letter-spacing fügt Abstand zwischen Zeichen ein; word-spacing fügt Abstand zwischen Wörtern ein. Verwenden Sie em-Einheiten, damit die Abstände mit der Schriftgröße skalieren.
<h2 class="heading">Spaced Out Heading Text</h2>
Barrierefreie Schriftgrößen
Setzen Sie font-size niemals in px für das html- oder body-Element. Dadurch wird die vom Benutzer im Browser festgelegte Schriftgrößeneinstellung überschrieben. Verwenden Sie stattdessen rem-Einheiten, die auf dem Standardwert des Browsers basieren.
Kurztest
Welcher numerische Wert von font-weight entspricht dem Schlüsselwort bold?
Zusammenfassung
Verwenden Sie rem für font-size, um Benutzereinstellungen zu berücksichtigen. font-weight akzeptiert Werte von 100–900 oder Schlüsselwörter. Die Kurzschreibweise font fasst mehrere Eigenschaften zusammen. Verwenden Sie clamp() für fließende Typografie und eine einheitenlose line-height für konsistente Abstände.
Häufig gestellte Fragen
Ist die Lektion „Schriftgröße, -stärke und -stil“ kostenlos?
Ja — der vollständige Text von „Schriftgröße, -stärke und -stil“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Schriftgröße, -stärke und -stil“?
Steuern Sie die Textgröße mit font-size, die Schriftstärke mit font-weight und den Stil mit font-style. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Schriftgröße, -stärke und -stil“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Schriftfamilien und websichere Schriften
- Schriftgröße, -stärke und -stil
- Textausrichtung, -dekoration und -abstände
- Google Fonts und @font-face