Einheiten, Farben und Schrift

Bisher standen in unseren Regeln einzelne Werte wie 1rem oder teal, ohne dass wir sie genauer betrachtet haben. Dieses Kapitel klärt, welche Werte es gibt und wann welcher passt. Am Ende fassen wir alle Entscheidungen in Variablen zusammen und setzen damit um, was am Montag unter den Gestaltungsgrundlagen stand: wenige Farben, eine Schrift, feste Stufen.

Was du am Ende kannst

• absolute und relative Einheiten unterscheiden und passend wählen
• Farben in mehreren Schreibweisen angeben und ihren Kontrast prüfen
• Schrift und Zeilenlänge lesbar einstellen
• Webfonts datenschutzfreundlich einbinden
• Designwerte in Custom Properties sammeln

Live-Coding zum Mitmachen

⤓ demo-09-farben-und-schrift.zip herunterladen

Der Ordner starter ist der Ausgangsstand, fertig der Stand nach dem Live-Coding.

Enthält: bilder/laufstrecke.svg, fest.html, index.html, kontakt.html, stil.css, termine.html

Einheiten

Größen gibt man in CSS immer mit einer Einheit an. Man unterscheidet zwei Arten.

Absolut: px

Ein px ist eine feste Größe, unabhängig von allen Einstellungen. Das eignet sich für Rahmen und feine Linien. Für Schrift ist es ungünstig, wie der nächste Abschnitt zeigt.

Relativ zur Schrift: rem und em

rem bezieht sich auf die Schriftgröße des Wurzelelements, im Browser standardmäßig 16 Pixel. 1.5rem sind also normalerweise 24 Pixel.

Der Vorteil: Wer im Browser eine größere Schrift einstellt, sieht auch deine Seite größer. Das ist ein Beitrag zur Barrierefreiheit, der nichts kostet. Nimm rem deshalb für Schriftgrößen und Abstände.

em bezieht sich auf die Schriftgröße des Elements selbst. Das passt für Abstände, die mit dem Text eines Buttons mitwachsen sollen.

Relativ zum Platz: %, vw und vh

% bezieht sich auf das Elternelement, vw und vh auf das Browserfenster. 50vw ist die Hälfte der Fensterbreite. Auf dem Handy ist dvh die genauere Form von vh, denn sie berücksichtigt die Leiste des Browsers.

Relativ zur Textbreite: ch

ch ist ungefähr die Breite eines Zeichens. max-width: 65ch ergibt eine angenehme Zeilenlänge.

Verschiedene Einheiten im Vergleich

Einheit	Bezug	Gut für
rem	Schriftgröße des Wurzelelements	Schrift und Abstände
em	eigene Schriftgröße	Abstände, die mit dem Text wachsen
%	Elternelement	Breiten
vw, vh, dvh	Fenster	Bereiche in Fenstergröße
ch	Breite eines Zeichens	Zeilenlänge
px	fest	Rahmen, feine Linien

Farben

Für dieselbe Farbe gibt es mehrere Schreibweisen. Die wichtigsten vier sind:

Schreibweise	Beispiel	Bedeutung
Name	teal	etwa 140 feste Namen, gut für schnelle Versuche
Hexadezimal	#0f766e	je zwei Stellen für Rot, Grün und Blau; am verbreitetsten
rgb()	rgb(15 118 110)	dieselben drei Anteile von 0 bis 255
hsl()	hsl(175 77% 26%)	Farbton, Sättigung, Helligkeit

Dieselbe Farbe in verschiedenen Schreibweisen

div { padding: 0.25rem 0.5rem; margin: 0.25rem 0; }
.a { background: #0f766e; color: #fff; }
.b { background: rgb(15 118 110); color: #fff; }
.c { background: rgb(15 118 110 / 0.3); }
.d { background: hsl(175 77% 26%); color: #fff; }
.e { background: hsl(175 77% 46%); }

<div class="a">#0f766e – hexadezimal</div>
<div class="b">rgb(15 118 110) – dasselbe Türkis</div>
<div class="c">rgb(15 118 110 / 0.3) – durchscheinend</div>
<div class="d">hsl(175 77% 26%) – Farbton, Sättigung, Helligkeit</div>
<div class="e">hsl(175 77% 46%) – nur die Helligkeit geändert</div>

Durchsichtigkeit ergänzt du mit einem Schrägstrich: rgb(15 118 110 / 0.3) ist zu 30 Prozent deckend. Mit hsl kannst du leicht Abstufungen bilden, denn du änderst nur die Helligkeit und behältst den Farbton.

Den Kontrast prüfst du im Farbwähler der DevTools, wie im Kapitel zu den Gestaltungsgrundlagen gezeigt. Für normalen Text sind mindestens 4,5:1 nötig.

Schrift

Die wichtigsten Eigenschaften im Überblick:

Die wichtigsten Texteigenschaften

<p class="a">font-family: Georgia, serif</p>
<p class="b">font-size: 1.5rem</p>
<p class="c">font-weight: bold</p>
<p class="d">font-style: italic</p>
<p class="e">text-align: center</p>
<p class="f">line-height: 2. Der Zeilenabstand wird erst sichtbar, wenn ein Text über mehrere Zeilen läuft, wie es dieser hier bei einem schmalen Fenster tut.</p>

Eigenschaft	Wirkung	Typische Werte
font-family	Schriftart	eine Liste, siehe unten
font-size	Größe	1rem, 1.5rem
font-weight	Stärke	normal, bold, Zahlen von 100 bis 900
font-style	Kursivschrift	normal, italic
line-height	Zeilenabstand	1.5, ohne Einheit
text-align	Ausrichtung	left, center, right
text-decoration	Unterstreichung	none, underline

Die Schriftliste

font-family nennt eine Liste. Der Browser nimmt die erste Schrift, die er findet. Am Ende steht immer eine allgemeine Familie wie sans-serif.

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

system-ui ist die Schrift des Betriebssystems. Sie muss nicht geladen werden und wirkt vertraut.

Lesbarkeit

body {
  font-size: 1.0625rem;
  line-height: 1.6;       /* ohne Einheit: rechnet sich für jede Größe neu */
}

p {
  max-width: 65ch;        /* angenehme Zeilenlänge */
}

Größen, die mitwachsen

clamp() nimmt drei Werte: Minimum, bevorzugter Wert und Maximum. So wächst eine Überschrift mit dem Fenster, ohne zu klein oder zu groß zu werden:

h1 {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
}

Webfonts

Eine eigene Schrift legst du neben dein CSS und bindest sie mit @font-face ein:

@font-face {
  font-family: "Inter";
  src: url("schriften/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;     /* Text sofort zeigen, Schrift später tauschen */
}

body {
  font-family: "Inter", system-ui, sans-serif;
}

Datenschutz

Wird eine Schrift direkt von Google Fonts geladen, geht die IP-Adresse der Besucher an Google. Ein deutsches Gericht hat das 2022 beanstandet. Lade die Schrift herunter und liefere sie selbst aus, wie oben gezeigt.

Custom Properties

Das Problem

Am Ende von gestern stand die Farbe #0f766e an vielen Stellen im Stylesheet. Soll sie sich ändern, musst du jede dieser Stellen finden. Das ist mühsam und fehleranfällig.

Definieren und verwenden

Eine Custom Property, oft einfach CSS-Variable genannt, gibt einem Wert einen Namen. Der Name beginnt mit zwei Bindestrichen, und var() liest den Wert aus:

:root {
  --farbe-akzent: #0f766e;
}

h1 {
  color: var(--farbe-akzent);
}

:root steht für das Wurzelelement der Seite. Weil Variablen vererbt werden, gilt eine Variable dort überall.

Lokal überschreiben

Dieselbe Vererbung erlaubt es, eine Variable für einen Teil der Seite neu zu setzen:

Eine Variable, lokal überschrieben

:root { --akzent: #0f766e; }
.knopf {
  padding: 0.5rem 1rem;
  border: 2px solid var(--akzent);
  border-radius: 0.25rem;
  color: var(--akzent);
  background: #fff;
}
.warnung { --akzent: #b91c1c; }

<button class="knopf">Normal</button>
<button class="knopf warnung">Löschen</button>

Das nutzen wir am Donnerstag für den Dunkelmodus. Ein zweites Argument ist der Rückfallwert: var(--akzent, teal).

Live-Coding: Ein Design-System im Kleinen

Wir gehen so vor:

1. Alle Farben im Stylesheet suchen und als Variablen in :root anlegen.
2. Die festen Werte durch var() ersetzen.
3. Schriftliste, Größe und Zeilenabstand am body festlegen.
4. Überschriften mit clamp() stufen und die Zeilenlänge begrenzen.
5. Zur Probe die Akzentfarbe ändern: Eine Zeile wirkt auf die ganze Website.

stil.css

/* Alle Designentscheidungen an einer Stelle */
:root {
  --farbe-text: #1c2330;
  --farbe-text-leise: #55606e;
  --farbe-akzent: #0f766e;
  --farbe-flaeche: #eef6f4;
  --farbe-linie: #c9d3d1;
  --farbe-fehler: #b91c1c;
  --farbe-fokus: #d97706;

  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --abstand-s: 0.5rem;
  --abstand-m: 1rem;
  --abstand-l: 2rem;
}

/* Elemente: gelten überall */
body {
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--farbe-text);
}

/* Größe wächst mit der Fensterbreite, bleibt aber zwischen zwei Grenzen */
h1 {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
  line-height: 1.15;
}

h2 {
  font-size: 1.5rem;
  line-height: 1.25;
}

/* Lesbare Zeilenlänge */
p,
li {
  max-width: 65ch;
}

h1,
h2 {
  color: var(--farbe-akzent);
}

/* Nachfahren: nur der Absatz im Kopf */
header p {
  font-size: 1.25rem;
  font-weight: bold;
}

Übung

Starter für die Übung

⤓ uebung-09-farben-und-schrift.zip herunterladen

ZIP-Datei entpacken und den Ordner in VS Code öffnen (Datei → Ordner öffnen).

Enthält: bilder/laufstrecke.svg, fest.html, index.html, kontakt.html, stil.css, termine.html

Der Verein hat einen neuen Vorstand, und der möchte Lila.

Stufe 1: Umfärben

Ändere nur die Variablen in :root, sodass die Seite überall lila ist.

Stufe 2: Kontrast

Prüfe in den DevTools Text und Überschriften. Erreichen sie überall mindestens 4,5:1? Passe die Werte an, falls nicht.

Stufe 3: Neue Variable

Führe --radius ein und verwende sie an den section-Rahmen.

Für Schnelle

Lass auch h2 mit clamp() mitwachsen. Setze dann nur im footer --farbe-text neu. Warum ändert sich die Farbe im footer, aber nicht im main?