Anfänger122025-01-15

CSS Typography - Schrift & Text perfekt stylen

Lerne alles über CSS-Typografie: font-family, font-size, font-weight, line-height, text-align und wie du lesbaren Text gestaltest.

#css#typography#font#text#schrift

CSS Typography - Text perfekt stylen

Gute Typografie macht den Unterschied zwischen einer amateurhaften und einer professionellen Webseite. Lass uns lernen, wie du Text perfekt gestaltest!

font-family - Die Schriftart

Definiert, welche Schriftart verwendet wird:

font-family
body {
    font-family: Arial, sans-serif;
}

h1 {
    font-family: 'Times New Roman', serif;
}

code {
    font-family: 'Courier New', monospace;
}

Die 5 Schriftarten-Familien

1. serif (mit Serifen)

  • Klassisch, elegant
  • Für gedruckte Texte
  • Beispiele: Times New Roman, Georgia

2. sans-serif (ohne Serifen)

  • Modern, klar
  • Für Bildschirme
  • Beispiele: Arial, Helvetica, Verdana

3. monospace (feste Breite)

  • Jedes Zeichen gleich breit
  • Für Code
  • Beispiele: Courier New, Consolas

4. cursive (Schreibschrift)

  • Handschriftlich
  • Sparsam einsetzen

5. fantasy (Dekorativ)

  • Für Überschriften
  • Sehr sparsam

Fallback-Schriften

Immer mehrere Schriften angeben (falls erste nicht verfügbar):

Fallback-Schriften
body {
    font-family:
        'Helvetica Neue',  /* 1. Wahl */
        Helvetica,         /* 2. Wahl */
        Arial,             /* 3. Wahl */
        sans-serif;        /* Fallback */
}

Warum wichtig? Nicht jeder Computer hat alle Schriften!

Google Fonts einbinden

Die einfachste Methode für schöne Schriften:

Google Fonts
/* Im HTML <head> */
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">

/* Im CSS */
body {
    font-family: 'Roboto', sans-serif;
}

Empfohlene Google Fonts:

  • Roboto (modern, klar)
  • Open Sans (sehr lesbar)
  • Lato (elegant)
  • Montserrat (für Überschriften)
  • Source Code Pro (für Code)

font-size - Die Schriftgröße

font-size
h1 {
    font-size: 32px;
}

p {
    font-size: 16px;
}

small {
    font-size: 12px;
}

Verschiedene Einheiten

px (Pixel) - Fix

font-size: 16px;  /* Genau 16 Pixel */

em - Relativ zum Elternelement

/* Wenn parent 16px hat: */
font-size: 2em;   /* = 32px */
font-size: 0.5em; /* = 8px */

rem - Relativ zur Root (html)

/* Wenn <html> 16px hat: */
font-size: 2rem;   /* = 32px */
font-size: 0.875rem; /* = 14px */

% - Prozent des Elternelements

font-size: 150%;  /* 1.5x größer als parent */

Empfehlung: Nutze rem für konsistente Größen!

Moderne font-size mit rem
html {
    font-size: 16px;  /* Basis */
}

body {
    font-size: 1rem;  /* = 16px */
}

h1 {
    font-size: 2.5rem;  /* = 40px */
}

h2 {
    font-size: 2rem;    /* = 32px */
}

p {
    font-size: 1rem;    /* = 16px */
}

small {
    font-size: 0.875rem;  /* = 14px */
}

font-weight - Die Schriftstärke

Macht Text fett oder dünn:

font-weight
/* Zahlenwerte (100-900) */
h1 {
    font-weight: 700;  /* Fett */
}

p {
    font-weight: 400;  /* Normal */
}

.light {
    font-weight: 300;  /* Dünn */
}

/* Schlüsselwörter */
strong {
    font-weight: bold;  /* = 700 */
}

.thin {
    font-weight: lighter;
}

Verfügbare Werte:

  • 100 - Ultra dünn
  • 300 - Dünn (Light)
  • 400 - Normal
  • 500 - Medium
  • 700 - Fett (Bold)
  • 900 - Ultra fett

Wichtig: Schrift muss diese Weights unterstützen!

line-height - Der Zeilenabstand

Einer der wichtigsten Werte für Lesbarkeit:

line-height
/* Zu eng (schlecht lesbar) */
.bad {
    line-height: 1;
}

/* Perfekt für Fließtext */
p {
    line-height: 1.6;
}

/* Für Überschriften */
h1 {
    line-height: 1.2;
}

Faustregel:

  • Fließtext: 1.5 - 1.8
  • Überschriften: 1.1 - 1.3
  • Kleine Texte: 1.4 - 1.6

Ohne Einheit = relativ:

line-height: 1.6;  /* 1.6x der font-size */

text-align - Textausrichtung

text-align
h1 {
    text-align: center;  /* Zentriert */
}

p {
    text-align: left;    /* Links (Standard) */
}

.quote {
    text-align: right;   /* Rechts */
}

.legal {
    text-align: justify; /* Blocksatz */
}

Werte:

  • left - Linksbündig (Standard)
  • center - Zentriert
  • right - Rechtsbündig
  • justify - Blocksatz (Vorsicht: kann hässlich sein!)

text-decoration - Text-Dekoration

text-decoration
/* Links ohne Unterstreichung */
a {
    text-decoration: none;
}

/* Link mit Unterstreichung beim Hover */
a:hover {
    text-decoration: underline;
}

/* Durchgestrichener Text */
del {
    text-decoration: line-through;
}

/* Überstrichener Text */
.overline {
    text-decoration: overline;
}

text-transform - Groß-/Kleinschreibung

text-transform
h1 {
    text-transform: uppercase;  /* GROSSBUCHSTABEN */
}

.subtitle {
    text-transform: lowercase;  /* kleinbuchstaben */
}

.title {
    text-transform: capitalize; /* Erster Buchstabe Groß */
}

letter-spacing - Buchstabenabstand

letter-spacing
h1 {
    letter-spacing: 2px;  /* Mehr Platz zwischen Buchstaben */
}

.tight {
    letter-spacing: -1px; /* Enger zusammen */
}

.spaced {
    letter-spacing: 0.1em; /* Relativ */
}

Wann nutzen?

  • Überschriften: Etwas mehr Abstand (1-2px)
  • GROSSBUCHSTABEN: Mehr Abstand nötig
  • Normale Texte: Meist 0 lassen

word-spacing - Wortabstand

word-spacing
p {
    word-spacing: 5px;  /* Mehr Platz zwischen Wörtern */
}

Selten nötig! Nur für spezielle Effekte.

text-indent - Einrückung

text-indent
p {
    text-indent: 30px;  /* Erste Zeile einrücken */
}

Klassisch für: Buchstil-Texte (aber modern eher unüblich)

text-shadow - Text-Schatten

text-shadow
h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    /*           x   y  blur  farbe */
}

/* Mehrere Schatten */
.fancy {
    text-shadow:
        2px 2px 0 #ff0000,
        4px 4px 0 #00ff00,
        6px 6px 0 #0000ff;
}

Syntax:

text-shadow: x-offset y-offset blur-radius color;

Vollständiges Beispiel - Blog-Artikel

Professionelle Text-Styles
/* Basis-Einstellungen */
html {
    font-size: 16px;
}

body {
    font-family: 'Georgia', serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

/* Überschriften */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.5em;
}

h1 {
    font-size: 2.5rem;
    text-align: center;
    letter-spacing: -1px;
}

h2 {
    font-size: 2rem;
    margin-top: 1.5em;
}

h3 {
    font-size: 1.5rem;
}

/* Absätze */
p {
    margin-bottom: 1em;
}

/* Intro-Text */
.intro {
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.8;
    color: #666;
}

/* Links */
a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* Zitate */
blockquote {
    font-size: 1.25rem;
    font-style: italic;
    line-height: 1.8;
    border-left: 4px solid #007bff;
    padding-left: 1em;
    color: #666;
}

/* Code */
code {
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    background-color: #f5f5f5;
    padding: 2px 6px;
    border-radius: 3px;
}

Best Practices

✅ DO:

  1. Maximal 2-3 Schriftarten pro Seite
  2. line-height: 1.5-1.8 für Fließtext
  3. rem statt px für Größen
  4. Kontrast beachten (Text muss lesbar sein)
  5. Google Fonts für schöne Schriften
  6. Fallback-Schriften angeben

❌ DON'T:

  1. Zu viele Schriftarten (wirkt unruhig)
  2. Zu kleiner Text (min. 16px für Fließtext)
  3. Zu enger Zeilenabstand (schwer lesbar)
  4. Blocksatz (justify) auf Webseiten
  5. Dekorative Schriften für langen Text
  6. Comic Sans (bitte nicht! 😅)

Typografie-Hierarchie

Klare Hierarchie
/* Primäre Überschrift */
h1 {
    font-size: 2.5rem;
    font-weight: 700;
}

/* Sekundäre Überschrift */
h2 {
    font-size: 2rem;
    font-weight: 600;
}

/* Tertiäre Überschrift */
h3 {
    font-size: 1.5rem;
    font-weight: 600;
}

/* Normaler Text */
p {
    font-size: 1rem;
    font-weight: 400;
}

/* Kleintext */
small {
    font-size: 0.875rem;
}

Responsive Typography

Text sollte auf allen Geräten gut lesbar sein:

Responsive Schriftgrößen
/* Mobile First */
html {
    font-size: 14px;
}

h1 {
    font-size: 2rem;  /* 28px */
}

/* Tablet */
@media (min-width: 768px) {
    html {
        font-size: 16px;
    }

    h1 {
        font-size: 2.5rem;  /* 40px */
    }
}

/* Desktop */
@media (min-width: 1024px) {
    html {
        font-size: 18px;
    }

    h1 {
        font-size: 3rem;  /* 54px */
    }
}

📝 Quiz

Welcher line-height ist am besten für Fließtext?

📝 Quiz

Was ist der Vorteil von 'rem' gegenüber 'px'?

⚡

Tipps & Tricks

System-Font-Stack für Geschwindigkeit

Nutze System-Schriften für beste Performance:

body {
    font-family: -apple-system, BlinkMacSystemFont,
                 "Segoe UI", "Roboto", "Helvetica Neue",
                 Arial, sans-serif;
}

Vorteil: Keine Ladezeit, native Performance, OS-optimiert!

line-height ohne Einheit

Verwende unitlose line-height für flexible Vererbung:

/* ❌ Problematisch */
p {
    font-size: 16px;
    line-height: 24px;  /* Starr! */
}

/* ✅ Besser */
p {
    font-size: 16px;
    line-height: 1.5;  /* 150% der font-size */
}

Warum? Skaliert automatisch mit font-size!

Fluid Typography mit clamp()

Schriftgröße die sich anpasst ohne Media Queries:

h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    /* Min: 2rem, Ideal: 5vw, Max: 4rem */
}

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

Google Fonts optimiert laden

Lade Google Fonts performance-optimiert:

<!-- Preconnect für schnelleren Load -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Nur benötigte Weights laden -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

Display=swap: Zeigt Fallback-Font bis Google Font geladen ist!

Übungsaufgaben

Aufgabe 1: Blog-Header

Style einen Blog-Header:

  • Titel: 3rem, fett, zentriert
  • Untertitel: 1.5rem, dünn (300), grau
  • Autor: 1rem, italic

Aufgabe 2: Button-Text

Style Button-Text:

  • Großbuchstaben (uppercase)
  • Buchstabenabstand 1px
  • Fett (700)

Aufgabe 3: Artikel-Text

Style einen Artikel:

  • Body: Georgia, 1rem, line-height 1.7
  • Überschriften: Sans-serif
  • Links: blau, underline beim Hover

Nächste Schritte

Du kennst jetzt:

  • ✅ Schriftarten (font-family)
  • ✅ Größen (font-size mit rem)
  • ✅ Ausrichtung (text-align)
  • ✅ Zeilenabstand (line-height)
  • ✅ Best Practices

Als Nächstes lernst du:

  • Box Model (margin, padding, border)
  • Display & Position
  • Flexbox

Weiter so! 🚀

← CSS•Lektion 5 von 16
31% abgeschlossen
Lektion abgeschlossen!

Gut gemacht! 🎉

Du hast "CSS Typography - Schrift & Text perfekt stylen" abgeschlossen

Vorherige Lektion
CSS Farben - hex, rgb, rgba, hsl erklärt
Nächste Lektion
CSS Box Model - margin, padding, border verstehen
Alle Lektionen anzeigen

Artikel bewerten

0.0 (0 Bewertungen)

Bitte einloggen um zu bewerten

Das könnte dich auch interessieren

CSS Backgrounds & Borders - Hintergründe & Rahmen stylen

Lerne alles über CSS Backgrounds (Farben, Bilder, Gradients) und Borders (border-radius, box-shadow) für modernes Design.

Anfängercss

CSS Basics - Deine Seite gestalten

Lerne, wie du mit CSS deine HTML-Seiten zum Leben erweckst. Farben, Schriftarten, Layouts - alles was du für schöne Webseiten brauchst.

Anfängercss

CSS Box Model - margin, padding, border verstehen

Lerne das CSS Box Model verstehen: Content, Padding, Border, Margin und den Unterschied zwischen box-sizing: content-box und border-box.

Anfängercss
Zurück zu CSS