Typografie und Schriftarten

Diese Lektion behandelt Schriftarten, Textformatierung und typografische Eigenschaften in CSS. Richtiges Setzen von Text ist entscheidend für Lesbarkeit und Design.

1. Schriftfamilien

• serif – klassische Schriftarten mit Serifen
• sans-serif – moderne, serifenlose Schriften
• monospace – feste Breite für jedes Zeichen
• cursive – kursiv, dekorativ
• fantasy – ausgefallene, dekorative Schriften

p {
    font-family: Arial, Helvetica, sans-serif;
}

2. Schriftgröße

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

3. Schriftstil und Gewicht

• font-style: normal | italic | oblique;
• font-weight: normal | bold | 100–900;

em {
    font-style: italic;
}
strong {
    font-weight: bold;
}

4. Zeilenhöhe und Buchstabenabstand

• line-height – Zeilenhöhe
• letter-spacing – Abstand zwischen Buchstaben
• word-spacing – Abstand zwischen Wörtern

p {
    line-height: 1.6;
    letter-spacing: 0.05em;
    word-spacing: 0.1em;
}

5. Textausrichtung

h2 {
    text-align: center;
}
p {
    text-align: justify;
}

6. Textdekoration und Transformation

• text-decoration: none | underline | overline | line-through;
• text-transform: uppercase | lowercase | capitalize;

a {
    text-decoration: none;
    text-transform: uppercase;
}

7. Farbe

p {
    color: #2b7cff;
}
span {
    color: rgba(255,0,0,0.8);
}

8. Zusammenfassung

• font-family: Wahl der Schriftart
• font-size: Textgröße in px, em, rem etc.
• font-style & font-weight: Stil und Gewicht
• line-height, letter-spacing, word-spacing: Abstände für bessere Lesbarkeit
• text-align, text-decoration, text-transform: Ausrichtung und Stil
• color: Textfarbe