CSS – Schriftarten und Textgestaltung

1. Textgestaltung mit CSS

Mit CSS können Schriftarten, Schriftgrößen, Schriftstärken, Textausrichtungen und viele weitere Texteigenschaften festgelegt werden.

Eine gute Textgestaltung verbessert die Lesbarkeit und sorgt für ein einheitliches Erscheinungsbild der Webseite.

2. font-family – Schriftart

Mit font-family wird festgelegt, welche Schriftart verwendet wird. Es können mehrere Schriftarten als Alternativen angegeben werden.

CSS-Code

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

Wenn Arial nicht verfügbar ist, versucht der Browser Helvetica zu verwenden. Danach wird eine verfügbare serifenlose Schriftart ausgewählt.

Verschiedene Schriftarten

3. Schriftfamilien

4. font-size – Schriftgröße

Mit font-size wird die Größe einer Schrift festgelegt.

CSS-Code

p {
    font-size: 18px;
}

h1 {
    font-size: 36px;
}

Ergebnis

5. Maßeinheiten für Schriftgrößen

Beispiel

html {
    font-size: 16px;
}

h2 {
    font-size: 2rem;
}

In diesem Beispiel entsprechen 2rem einer Schriftgröße von 32px.

6. font-weight – Schriftstärke

Mit font-weight wird festgelegt, wie dünn oder fett eine Schrift dargestellt wird.

CSS-Code

p {
    font-weight: normal;
}

h2 {
    font-weight: bold;
}

Ergebnis

7. font-style – Schriftstil

Mit font-style kann Text beispielsweise kursiv dargestellt werden.

CSS-Code

p {
    font-style: italic;
}

Ergebnis

8. line-height – Zeilenhöhe

Die Eigenschaft line-height bestimmt den Abstand zwischen den Textzeilen.

CSS-Code

p {
    line-height: 1.8;
}

Ergebnis

9. text-align – Textausrichtung

Mit text-align wird die horizontale Ausrichtung von Inline-Inhalten innerhalb eines Elements festgelegt.

CSS-Code

h1 {
    text-align: center;
}

p {
    text-align: right;
}

Ergebnis

10. text-decoration – Textdekoration

Mit text-decoration können Texte unterstrichen oder durchgestrichen werden.

CSS-Code

.unterstrichen {
    text-decoration: underline;
}

.durchgestrichen {
    text-decoration: line-through;
}

Ergebnis

11. text-transform – Groß- und Kleinschreibung

Mit text-transform kann die sichtbare Schreibweise eines Textes verändert werden.

CSS-Code

.titel {
    text-transform: uppercase;
}

.name {
    text-transform: capitalize;
}

Ergebnis

12. letter-spacing – Zeichenabstand

Mit letter-spacing wird der Abstand zwischen den Zeichen verändert.

CSS-Code

h2 {
    letter-spacing: 4px;
}

Ergebnis

13. word-spacing – Wortabstand

Die Eigenschaft word-spacing verändert den Abstand zwischen Wörtern.

CSS-Code

p {
    word-spacing: 12px;
}

Ergebnis

14. text-shadow – Textschatten

Mit text-shadow können Schatten hinter einem Text erzeugt werden.

CSS-Code

h1 {
    text-shadow: 2px 3px 5px
        rgba(0, 0, 0, 0.25);
}

Ergebnis

Die Werte bestimmen den horizontalen Versatz, den vertikalen Versatz, den Unschärferadius und die Schattenfarbe.

15. text-indent – Einzug der ersten Zeile

Mit text-indent kann die erste Zeile eines Textblocks eingerückt werden.

CSS-Code

p {
    text-indent: 35px;
}

Ergebnis

16. text-overflow – Zu langen Text kürzen

Mit text-overflow: ellipsis kann abgeschnittener Text durch Auslassungspunkte gekennzeichnet werden.

CSS-Code

.text {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Ergebnis

17. Schriftarten von externen Quellen

Zusätzlich zu lokal verfügbaren Schriftarten können eigene Schriftdateien eingebunden werden.

Beispiel mit @font-face

@font-face {
    font-family: "MeineSchrift";
    src: url("/fonts/meineschrift.woff2")
         format("woff2");
    font-display: swap;
}

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

Die Schriftdatei muss am angegebenen Speicherort vorhanden sein. Bei der Verwendung externer Schriftarten sind Lizenz- und Datenschutzfragen zu beachten.

18. Praktisches Beispiel: Eine Textkarte

HTML-Code

<div class="karte">
    <h2>Webentwicklung lernen</h2>
    <p>
        HTML, CSS, PHP und SQL
        einfach erklärt.
    </p>
</div>

CSS-Code

.karte {
    background: white;
    padding: 25px;
    border-radius: 12px;
}

.karte h2 {
    font-family: Arial, sans-serif;
    font-size: 25px;
    font-weight: 700;
    color: #173d70;
}

.karte p {
    font-size: 16px;
    line-height: 1.8;
    color: #475569;
}

Ergebnis

19. Praktische Übungen

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

h1 {
    font-size: 36px;
}

.wichtig {
    font-weight: bold;
}

h2 {
    text-align: center;
}

p {
    line-height: 1.8;
}

.titel {
    text-transform: uppercase;
}

h2 {
    letter-spacing: 3px;
}

text-decoration: underline;

20. Zusammenfassung

Mit CSS können Schriftarten, Schriftgrößen, Schriftstärken und Schriftstile verändert werden. Die Eigenschaften font-family, font-size, font-weight und font-style bilden dafür wichtige Grundlagen.

Weitere Eigenschaften wie line-height, text-align, text-decoration, text-transform und letter-spacing ermöglichen eine individuelle Textgestaltung.

Bei der Gestaltung sollte besonders auf gute Lesbarkeit, ausreichende Schriftgröße und sinnvolle Zeilenabstände geachtet werden.