Farben & Schriften

Farben und Schriften sind die Grundbausteine eines guten Webdesigns. In diesem Kapitel lernst du alle Farbformate kennen, wie du Schriftarten einbindest und wie du eine ansprechende Typografie erstellst.

Farbformate in CSS

CSS bietet mehrere Wege, Farben zu definieren:

Farbnamen

p { color: red; }
h1 { color: darkblue; }
div { background-color: lightgray; }

Es gibt ueber 140 benannte Farben in CSS. Fuer professionelle Projekte sind die anderen Formate aber praeziser.

HEX-Werte

/* 6-stellig: #RRGGBB */
h1 { color: #e44d26; }       /* Orange */
p { color: #333333; }         /* Dunkelgrau */

/* 3-stellig (Kurzform): #RGB */
h2 { color: #fff; }           /* Weiss = #ffffff */
span { color: #09f; }         /* = #0099ff */

/* 8-stellig mit Transparenz: #RRGGBBAA */
div { background: #e44d2680; } /* 50% transparent */

RGB und RGBA

/* Rot, Gruen, Blau (0-255) */
h1 { color: rgb(228, 77, 38); }

/* Mit Transparenz (0-1) */
div { background: rgb(228, 77, 38 / 0.5); }

/* Alte Schreibweise (funktioniert auch) */
div { background: rgba(228, 77, 38, 0.5); }

HSL und HSLA

HSL ist oft intuitiver als RGB:

/* Farbton (0-360), Saettigung (0-100%), Helligkeit (0-100%) */
h1 { color: hsl(14, 82%, 52%); }         /* Orange */

/* Mit Transparenz */
div { background: hsl(14, 82%, 52% / 0.5); }

/* Farbvariationen einfach erstellen */
.light { background: hsl(14, 82%, 90%); }   /* Hell */
.medium { background: hsl(14, 82%, 52%); }  /* Normal */
.dark { background: hsl(14, 82%, 30%); }     /* Dunkel */

Vergleich der Farbformate

Format	Beispiel	Wann verwenden
Farbnamen	`red`	Prototypen, schnelle Tests
HEX	`#e44d26`	Standardformat, aus Design-Tools
RGB	`rgb(228, 77, 38)`	Wenn du Transparenz brauchst
HSL	`hsl(14, 82%, 52%)`	Farbvariationen erstellen

Moderne Farbfunktionen

/* color-mix() -- Farben mischen */
.mixed {
    background: color-mix(in srgb, #e44d26, white 30%);
    /* 70% Orange + 30% Weiss */
}

/* Farbvariationen mit color-mix() */
.light {
    background: color-mix(in srgb, var(--primary), white 40%);
}

.dark {
    background: color-mix(in srgb, var(--primary), black 30%);
}

Wo Farben ueberall eingesetzt werden

.element {
    /* Textfarbe */
    color: #333;

    /* Hintergrundfarbe */
    background-color: #f8fafc;

    /* Rahmenfarbe */
    border-color: #e2e8f0;

    /* Schattenfarbe */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    /* Umrissfarbe */
    outline-color: #264de4;

    /* Textschatten */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

Farbverlaeufe (Gradients)

Linearer Verlauf

/* Von oben nach unten */
.gradient-1 {
    background: linear-gradient(to bottom, #e44d26, #264de4);
}

/* Schraeg */
.gradient-2 {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

/* Mehrere Farben */
.gradient-3 {
    background: linear-gradient(to right, #e44d26, #f59e0b, #10b981);
}

Radialer Verlauf

.radial {
    background: radial-gradient(circle, #e44d26, #264de4);
}

Schriftarten in CSS

System-Schriftarten

Verwende Schriftarten, die auf dem Geraet des Nutzers bereits installiert sind:

body {
    /* Moderne System-Font-Stack */
    font-family: system-ui, -apple-system, 'Segoe UI',
                 Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Serif (mit Serifen) */
.serif {
    font-family: Georgia, 'Times New Roman', Times, serif;
}

/* Monospace (feste Breite) */
code {
    font-family: 'Cascadia Code', 'Fira Code', Consolas,
                 'Courier New', monospace;
}

Google Fonts einbinden

<!-- Im HTML <head> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

body {
    font-family: 'Inter', sans-serif;
}

@font-face (eigene Schriftdateien)

@font-face {
    font-family: 'MeineSchrift';
    src: url('fonts/meineschrift.woff2') format('woff2'),
         url('fonts/meineschrift.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* Text sofort anzeigen */
}

body {
    font-family: 'MeineSchrift', sans-serif;
}

Typografie-Eigenschaften

Schriftgroesse

/* Moderne Schriftgroessen mit rem */
html { font-size: 16px; }   /* Basis */
h1 { font-size: 2.5rem; }   /* 40px */
h2 { font-size: 2rem; }     /* 32px */
h3 { font-size: 1.5rem; }   /* 24px */
p { font-size: 1rem; }      /* 16px */
small { font-size: 0.875rem; } /* 14px */

/* Responsive Schriftgroesse mit clamp() */
h1 {
    font-size: clamp(1.75rem, 4vw, 3rem);
    /* Minimum: 1.75rem, Maximum: 3rem, dazwischen: 4vw */
}

Schriftstil und -staerke

.text {
    font-weight: 400;    /* Normal */
    font-weight: 700;    /* Fett */
    font-weight: bold;   /* = 700 */

    font-style: normal;
    font-style: italic;  /* Kursiv */
}

Zeilenhoehe und Zeichenabstand

p {
    line-height: 1.6;           /* Zeilenhoehe (ideal: 1.5-1.8) */
    letter-spacing: 0.02em;     /* Zeichenabstand */
    word-spacing: 0.05em;       /* Wortabstand */
}

h1 {
    line-height: 1.2;           /* Enger bei Ueberschriften */
    letter-spacing: -0.02em;    /* Optisch enger */
}

Textausrichtung und Dekoration

.center { text-align: center; }
.right { text-align: right; }
.justify { text-align: justify; }

/* Textdekoration */
a { text-decoration: none; }          /* Unterstrich entfernen */
a:hover { text-decoration: underline; }

.strike { text-decoration: line-through; }
.underline {
    text-decoration: underline;
    text-decoration-color: #e44d26;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

Textumwandlung

.upper { text-transform: uppercase; }      /* GROSSBUCHSTABEN */
.lower { text-transform: lowercase; }      /* kleinbuchstaben */
.capital { text-transform: capitalize; }    /* Erster Buchstabe Gross */

Eine Typografie-Skala erstellen

Professionelle Webseiten verwenden eine konsistente Typografie-Skala:

:root {
    /* Farben */
    --color-text: #1a1a2e;
    --color-text-light: #4a5568;
    --color-accent: #e44d26;

    /* Schriften */
    --font-heading: 'Georgia', serif;
    --font-body: system-ui, sans-serif;

    /* Groessen-Skala */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
    line-height: 1.6;
}

h1 {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    line-height: 1.2;
    color: var(--color-text);
}

h2 {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    line-height: 1.3;
}

Uebungen

Uebung 1: Farbpalette erstellen

Erstelle eine Farbpalette mit 5 Farben in HSL. Zeige jede Farbe als <div> mit dem Farbcode als Text an.

Uebung 2: Typografie-System

Erstelle ein Typografie-System mit:

Einer Google Font fuer Ueberschriften
Einer System-Font fuer Fliesstext
Einer Groessen-Skala von xs bis 4xl
Konsistenten Zeilenhoehen

Uebung 3: Gradient-Buttons

Erstelle drei Buttons mit unterschiedlichen Gradient-Hintergruenden und passenden Hover-Effekten.

Was kommt als Naechstes?

Im naechsten Kapitel lernst du das CSS Box-Modell — eines der wichtigsten Konzepte in CSS:

Wie Margin, Padding und Border zusammenspielen
Box-Sizing verstehen
Abstaende richtig einsetzen

Zusammenfassung

CSS bietet verschiedene Farbformate: Farbnamen, HEX, RGB, HSL
HSL ist ideal fuer Farbvariationen, HEX ist der Standard
color-mix() mischt Farben direkt in CSS
System-Fonts sind schnell, Google Fonts bieten mehr Auswahl
clamp() erstellt responsive Schriftgroessen
Eine Typografie-Skala mit CSS Custom Properties schafft Konsistenz

Pro-Tipp: Verwende font-display: swap beim Laden von Web Fonts. Damit wird der Text sofort mit einer Fallback-Schrift angezeigt und erst gewechselt, wenn die gewuenschte Schrift geladen ist. So vermeidest du unsichtbaren Text (FOIT)!