CSS INTENSIVSTATION

Font-Size

CSS-Typografie beschreibt die textuelle Gestaltung durch definierte Schriftattribute und deren visuelle Wirkung: Welche Schrift wird verwendet, wie gross ist sie, wie dick oder kursiv erscheint sie?

Schriftgrösse festlegen

Bestimmt die Schriftgrösse. Häufig werden relative Einheiten verwendet, damit Typografie flexibel bleibt (Responsive Design, Benutzer-Einstellungen, Accessibility).

p { font-size: 16px; }
h1 { font-size: 2rem; }

Einheiten im Überblick

  • pxFixe Pixelgrösse (absolut, weniger flexibel)
  • %Relativ zur Schriftgrösse des Elternelements
  • remRelativ zur Schriftgrösse des Root-Elements (html) – stabil und konsistent
  • emRelativ zur Schriftgrösse des Elternelements (kann sich verschachtelt aufschaukeln)
  • vwRelativ zur Viewport-Breite (siehe unten)
  • vhRelativ zur Viewport-Höhe (siehe unten)
  • clamp()Für fluid responsive Typografie (siehe unten)

Keyword-Grössen (selten genutzt)

CSS kennt auch Schlüsselwörter wie small, medium oder large. Sie sind browserabhängig und weniger präzise als rem oder clamp().

Prozent-Angaben (%)

100% bedeutet: gleich gross wie die Schriftgrösse des Elternelements. Das p-Element erbt die Grösse vom main-Element (siehe: Lektion Vererbung).

main { font-size: 20px; }
main p { font-size: 100%; }  /* = 20px (erbt von main) */
main small { font-size: 80%; } /* = 16px */

Tipp: 100% im body respektiert die Browser-Einstellungen des Users (Accessibility).

rem & Root-Element (html)

Das Root-Element ist <html>. Alle rem-Werte beziehen sich auf die am html-Element gesetzte Basisgrösse.

Vorteil: Die gesamte Typografie lässt sich zentral über die Schriftgrösse am html-Element steuern.

html { font-size: 100%; } /* Browser-Standard (meist 16px) */
h1 { font-size: 2rem; }    /* = 32px */
h2 { font-size: 1.5rem; }  /* = 24px */
p { font-size: 1rem; }     /* = 16px */

Best Practice: 100% am Root-Element html garantiert hohe Accessibility.

em vs. rem

Der wichtige Unterschied

In CSS steht em für eine relative Längeneinheit, die sich hauptsächlich auf die Schriftgrösse des Elternelements bezieht.
em kann sich bei Verschachtelung „hochmultiplizieren".
rem bezieht sich immer auf die Schriftgrösse des Root-Elements (html) und bleibt daher stabil.

html { font-size: 100%; } (Browser-Standard meist 16px)

Parent-Container (font-size: 20px)
1.2em = 24px (1.2 × 20px vom Parent)
1.2rem = 19.2px (1.2 × 16px vom Root)

Das Problem mit verschachtelten em

Bei verschachtelten Elementen mit em multipliziert sich die Grösse:

html { font-size: 100%; } (Browser-Standard meist 16px)

Level 1: 1.2em = 19.2px
Level 2: 1.2em = 23px (aufgeschaukelt!)
Level 3: 1.2em = 27.6px (noch grösser!)

Empfehlung:

  • rem für konsistente, vorhersagbare Grössen
  • em wenn es bewusst mit dem Kontext mitwachsen soll (z.B. padding/margin relativ zur Schriftgrösse)

Viewport-Einheiten: vw & vh

vw und vh sind relative Einheiten, die sich auf die Grösse des Viewports (Browserfenster) beziehen.

  • vwViewport Width – 1vw = 1% der Viewport-Breite
  • vhViewport Height – 1vh = 1% der Viewport-Höhe

vw – Viewport Width (Breite)

1vw = 1% der Viewport-Breite

Rechenbeispiele

Bildschirm ist 1000px breit:
5vw = 5% von 1000px = 50px
10vw = 10% von 1000px = 100px

Bildschirm ist 500px breit (Smartphone):
5vw = 5% von 500px = 25px
10vw = 10% von 500px = 50px

Bildschirm ist 1920px breit (Desktop):
5vw = 5% von 1920px = 96px
10vw = 10% von 1920px = 192px

5vw: Diese Schrift wächst/schrumpft mit der Fensterbreite

Verändere die Fenstergrösse und beobachte, wie sich der Text anpasst!

h1 { font-size: 5vw; }
/* Auf 1000px Bildschirm = 50px */
/* Auf 500px Bildschirm = 25px */
/* Skaliert automatisch mit Fenstergrösse! */

vh – Viewport Height (Höhe)

1vh = 1% der Bildschirmhöhe

Rechenbeispiele

Bildschirm ist 800px hoch:
5vh = 5% von 800px = 40px
10vh = 10% von 800px = 80px

3vh: Diese Schrift wächst/schrumpft mit der Fensterhöhe

Verändere die Fensterhöhe und beobachte die Anpassung!

.hero { font-size: 3vh; }
/* Skaliert mit Bildschirmhöhe */

Wichtig: Viewport-Einheiten für Schriftgrössen sollten mit Vorsicht eingesetzt werden:

  • Auf sehr grossen Bildschirmen können Schriften extrem gross werden
  • Auf sehr kleinen Bildschirmen können Schriften unleserlich klein werden
  • Besser: Kombiniere mit clamp() (siehe unten)

clamp() – Fluid Typography

clamp() ist eine CSS-Funktion, die einen Wert zwischen einem Minimum und Maximum begrenzt.

Syntax: clamp(MIN, PREFERRED, MAX)

  • MINMinimaler Wert (untere Grenze)
  • PREFERREDBevorzugter Wert (meist mit vw/vh für Responsiveness)
  • MAXMaximaler Wert (obere Grenze)

Beispiel

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Das bedeutet:

  • MIN: 1.5rem (= 24px)
  • PREFERRED: 5vw (= 40px bei 800px Bildschirm)
  • MAX: 3rem (= 48px)

Die Logik:

  1. Browser berechnet 5vw → ergibt 40px
  2. Browser prüft: Ist 40px kleiner als 24px? Nein.
  3. Browser prüft: Ist 40px grösser als 48px? Nein.
  4. → 40px liegt zwischen 24px und 48px → also wird 40px genommen!
clamp(1rem, 5vw, 3rem): Responsive, aber nie zu klein oder zu gross!

Verändere die Fenstergrösse – die Schrift passt sich an, bleibt aber in den Grenzen!

Praktische Beispiele für clamp()

Überschriften:

h1 { font-size: clamp(2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.5rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 3vw, 2rem); }

Fliesstext:

p { font-size: clamp(1rem, 2vw, 1.25rem); }

Abstände (funktioniert auch für padding, margin, etc.):

.container {
  padding: clamp(1rem, 3vw, 4rem);
}

clamp() Vorteile

  • Fluid Responsive – skaliert automatisch mit Bildschirmgrösse
  • Keine Media Queries nötig – weniger Code
  • Sichere Grenzen – nie zu gross oder zu klein

Kurz gesagt

  • rem für konsistente Grössen, em nur wenn kontextabhängig gewünscht
  • vw = 1% der Viewport-Breite, vh = 1% der Viewport-Höhe
  • clamp(min, preferred, max) für fluid responsive Typografie mit Grenzen

Font Themen Font Basics | Font Styling | Font line-height | Text Umbruch