CSS - Textgestaltung

Textgestaltung mit CSS: Blockschrift, Abstände & Co.

In CSS kannst du das Aussehen von Text ganz gezielt anpassen – nicht nur durch Farben und Größen, sondern auch durch die Form der Buchstaben, den Abstand zwischen ihnen und die Schriftart selbst. Hier ein paar wichtige Eigenschaften:

1. Groß- oder Kleinbuchstaben erzwingen mit text-transform

  • uppercase: wandelt alles in GROẞBUCHSTABEN um
  • lowercase: wandelt alles in kleinbuchstaben um
  • capitalize: schreibt jedes Wort groß

    • 2. Buchstabenabstand steuern mit letter-spacing
    Mit letter-spacing kannst du bestimmen, wie viel Abstand zwischen einzelnen Buchstaben sein soll. Das erzeugt zum Beispiel einen Blockschrift-Eindruck, wenn man den Wert etwas erhöht.

    3. Schriftstärke mit font-weight
    Mit font-weight regelst du die Dicke der Schrift. Gängige Werte sind normal, bold, oder Zahlen wie 400, 700 usw.

    4. Schriftart bestimmen font-family
    Hier legst du fest, welche Schriftart verwendet werden soll – zum Beispiel serifenlose Schriftarten wie Arial, Verdana oder Roboto. 

    <!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Textgestaltung mit CSS</title>
  <style>
    body {
      background-color: #111;
      color: #eee;
      font-family: 'Segoe UI Variable', sans-serif;
      padding: 20px;
    }

    .normal {
      font-size: 1.2em;
    }

    .blockschrift {
      text-transform: uppercase;
      letter-spacing: 0.2em;
      font-weight: bold;
      font-family: Roboto;
    }

    .kapitalisiert {
      text-transform: capitalize;
    }

    .engschrift {
      letter-spacing: -1px;
    }

    .leicht {
      font-weight: 300;
    }
  </style>
</head>
<body>

  <p class="normal">Das ist ein ganz normaler Absatztext ohne besondere Stilregeln.</p>

  <p class="blockschrift?">dieser text wirkt wie eine blockschrift mit abstand zwischen den buchstaben im Font Roboto.</p>

  <p class="kapitalisiert">dieser text wird automatisch kapitalisiert – jedes wort beginnt mit einem großbuchstaben.</p>

  <p class="engschrift">Dieser Text hat einen sehr engen Buchstabenabstand, fast schon komprimiert.</p>

  <p class="leicht">Dieser Text ist sehr leicht und dünn – ein eleganter Effekt durch geringes font-weight.</p>

</body>
</html>
    Beispiel bc006

    Was du daraus lernen kannst

    Mit nur wenigen CSS-Eigenschaften kannst du die Wirkung deines Textes stark verändern. Der „Blockschrift“-Effekt entsteht besonders durch:

  • Großbuchstaben {text-transform: uppercase}.
  • breite Buchstabenabstände {letter-spacing}
  • kräftige Schrift {font-weight: bold}