CSS INTENSIVSTATION

Schriften (Font)

CSS-Typografie beschreibt die textuelle Gestaltung durch definierte Schriftattribute und deren visuelle Wirkung: Welche Schrift wird verwendet, wie gross ist sie, wie dick oder kursiv erscheint sie.

font-family

Schriftart wählen

Mit font-family wird festgelegt, welche Schrift verwendet wird. Mehrere Schriften werden als Fallback-Kette angegeben – der Browser nimmt die erste verfügbare.

Wichtig: Ob eine Schrift verfügbar ist, hängt davon ab, ob sie:

  • lokal auf dem System installiert ist (Systemfont), oder
  • als Webfont geladen wird (siehe: Lektion Webfonts)
body { 
  font-family: "Trebuchet MS", Arial, sans-serif; 
}

Das System lädt Trebuchet MS, dann Arial, sonst eine beliebige Sans-Serif.
Schriftnamen mit Leerzeichen müssen in Anführungszeichen gesetzt werden

Generische Schriftfamilien

Am Ende einer Fallback-Kette sollte immer eine generische Familie stehen. Der Browser wählt dann eine passende Systemschrift.

  • serifSchriften mit Serifen (Füsschen), z.B. Times New Roman, Georgia
  • sans-serifSchriften ohne Serifen, z.B. Arial, Helvetica, Verdana
  • monospaceSchriften mit fester Breite für alle Zeichen, z.B. Courier New
  • cursiveHandschriftliche Schriften
  • fantasyDekorative/Fantasieschriften

serif: The quick brown fox jumps over the lazy dog.

sans-serif: The quick brown fox jumps over the lazy dog.

monospace: The quick brown fox jumps over the lazy dog.

cursive: The quick brown fox jumps over the lazy dog.

fantasy: The quick brown fox jumps over the lazy dog.

Generische Schriftfamilien können von Browsern unterschiedlich dargestellt werden.

Häufige System-Schriften

Diese Schriften sind auf den meisten Systemen vorinstalliert und können sicher verwendet werden:

  • Arialsans-serif
  • Helveticasans-serif
  • Verdanasans-serif
  • Trebuchet MSsans-serif
  • Times New Romanserif
  • Georgiaserif
  • Palatinoserif
  • Courier Newmonospace

Tipp: Nutze immer eine Fallback-Kette mit generischer Familie am Ende.

font-weight

Schriftstärke

Legt die Strichstärke (das Gewicht) der Schrift fest.

  • normalNormale Strichstärke (entspricht 400)
  • boldFett (entspricht 700)
  • bolderDicker als das Elternelement (relativ)
  • lighterDünner als das Elternelement (relativ)
  • 100–900Numerische Werte in 100er-Schritten (100 = Thin, 400 = Normal, 700 = Bold, 900 = Black)
h1 { font-weight: normal; }  /* Überschrift nicht fett */
.highlight { font-weight: bold; }

Wichtig: Numerische Werte funktionieren nur, wenn die verwendete Schrift den entsprechenden Schnitt auch wirklich enthält (z.B. Regular/Bold/Black).

Wenn ein Schnitt fehlt: Der Browser wählt den nächst passenden verfügbaren Schnitt oder simuliert das Gewicht künstlich (Faux Bold – sieht oft schlechter aus).

font-style

Schriftneigung

Bestimmt die Neigung der Schrift.

  • normalNormale, aufrechte Schrift (Standard)
  • italicKursiv (echte kursive Schriftart, falls verfügbar)
  • obliqueSchräg (künstlich geneigt, falls keine echte Kursive vorhanden)
em { font-style: italic; }
cite { font-style: italic; }
.upright { font-style: normal; }

Unterschied italic vs. oblique:

  • italic nutzt eine echte kursive Schriftart (wenn vorhanden) mit eigenen Buchstabenformen
  • oblique ist nur eine künstliche Schrägstellung der normalen Schrift

letter-spacing

Buchstabenabstand

letter-spacing legt den zusätzlichen Abstand zwischen Buchstaben fest. Standardmässig ist dieser Wert 0 (normal).

h1 { letter-spacing: 0.1em;}

Werte

  • normalStandard-Abstand (entspricht 0)
  • emRelativ zur Schriftgrösse: 0.05em
  • pxAbsolut: 2px
  • Negative WerteMöglich: -0.05em (engere Buchstaben)

Positive Werte – Buchstaben auseinander

Der schnelle braune Fuchs springt 

letter-spacing: 0; /* normal */

Der schnelle braune Fuchs springt 

letter-spacing: 0.1em; /* locker */

Der schnelle braune Fuchs springt 

letter-spacing: 0.3em; /* sehr locker */

Negative Werte – Buchstaben enger

Der schnelle braune Fuchs springt 

letter-spacing: -0.05em; /* enger */

Vorsicht: Negative Werte können bei manchen Schriften zu unlesbaren Überlappungen führen.

Beispiele

1. Überschriften in Grossbuchstaben

Moderne Überschrift 

h1 {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

GROSSBUCHSTABEN wirken ohne zusätzlichen Abstand oft zu gedrängt. Ein kleiner letter-spacing von 0.05em bis 0.1em verbessert die Lesbarkeit deutlich.

2. Kleine Schriften lesbarer machen

Kleiner Text mit letter-spacing: 0.05em – besser lesbar 

font-size: 0.75rem;
letter-spacing: 0.05em;

Kleiner Text ohne letter-spacing – etwas schwerer zu lesen 

font-size: 0.75rem;
letter-spacing: 0; /* normal */

3. Logo-Schriftzüge und Branding

Brand Name 

font-size: 2rem;
letter-spacing: 0.2em;
text-transform: uppercase;

Wann NICHT verwenden?

  • Fliesstext: Normaler Absatztext braucht meist keinen zusätzlichen letter-spacing
  • Enge Layouts: Mehr Buchstabenabstand = mehr Platz nötig
  • Script-Schriften: Handschriftliche Fonts werden oft unleserlich

Best Practices

  • Verwende em statt px – skaliert besser mit der Schriftgrösse
  • Für Uppercase-Überschriften: 0.05em bis 0.15em
  • Für Logos/Branding: 0.1em bis 0.3em
  • Negative Werte sparsam einsetzen (max. -0.05em)
  • Immer in verschiedenen Schriftgrössen testen

word-spacing

Wortabstand

word-spacing legt den zusätzlichen Abstand zwischen Wörtern fest. Diese Eigenschaft wird deutlich seltener verwendet als letter-spacing.

p {
  word-spacing: 0.2em;
}

Werte

  • normalStandard-Wortabstand (entspricht 0)
  • emRelativ: 0.5em
  • pxAbsolut: 10px
  • Negative WerteMöglich: -0.2em (engere Wörter)

Positive Werte – Wörter auseinander

Der schnelle braune Fuchs springt über den faulen Hund 

word-spacing: 0; /* normal */

Der schnelle braune Fuchs springt über den faulen Hund 

word-spacing: 0.5em; /* locker */

Der schnelle braune Fuchs springt über den faulen Hund 

word-spacing: 1em; /* sehr locker */

Negative Werte – Wörter enger

Der schnelle braune Fuchs springt über den faulen Hund 

word-spacing: -0.2em; /* enger */

Vorsicht: Negative Werte können Wörter zu nah beieinander bringen und die Lesbarkeit verschlechtern.

Wann wird word-spacing verwendet?

1. Künstlerische/Dekorative Texte

S P A C E D O U T 

font-size: 2rem;
word-spacing: 0.3em;

2. Korrektur bei Blocksatz

Bei text-align: justify entstehen manchmal zu grosse Lücken. Mit negativem word-spacing kann das kompensiert werden:

Dies ist ein kurzer Text im Blocksatz mit leicht reduziertem Wortabstand, um extreme Lücken zu vermeiden. 
text-align: justify;
word-spacing: -0.05em;

Wann NICHT verwenden?

  • Normaler Fliesstext: Standard-Wortabstand ist fast immer optimal
  • Bei automatischem Blocksatz: Der Browser verteilt Abstände bereits automatisch
  • Responsive Layouts: Feste word-spacing kann bei verschiedenen Bildschirmgrössen problematisch sein

Best Practice: word-spacing wird sehr selten benötigt – der Standard-Wortabstand ist fast immer optimal. Nur in Spezialfällen wie künstlerischen Texten oder Blocksatz-Korrekturen anpassen.

Alle drei Eigenschaften kombiniert

Die drei Eigenschaften line-height, letter-spacing und word-spacing beeinflussen sich gegenseitig und können zusammen eingesetzt werden:

Perfekt abgestimmte Überschrift

Dies ist ein Absatz mit optimierten Abständen. Die line-height sorgt für angenehme Zeilenabstände, während minimales letter-spacing die Lesbarkeit bei dieser Schriftgrösse verbessert. 

h3 {
  line-height: 1.2;
  letter-spacing: 0.05em;
  word-spacing: 0.1em;
  text-transform: uppercase;
}

p {
  line-height: 1.6;
  letter-spacing: 0.01em;
  word-spacing: 0;
}

font-variant – Kapitälchen

Erzeugt Kapitälchen (Small Caps), abhängig von der verwendeten Schrift.

  • normalNormale Darstellung
  • small-capsKleinbuchstaben werden als verkleinerte Grossbuchstaben dargestellt

The Quick Brown Fox Jumps Over The Lazy Dog

.caps { font-variant: small-caps; }

font

Kurzschreibweise für Fonts

Mit der font-Eigenschaft lassen sich mehrere Font-Eigenschaften in einer Zeile kombinieren. Die Reihenfolge ist wichtig!

Syntax

font: [font-style] [font-variant] [font-weight] font-size[/line-height] font-family;

Pflichtangaben: font-size und font-family müssen immer angegeben werden.
Optional: font-style, font-variant, font-weight und line-height
Hinweis: Der Slash / wird nur benötigt, wenn line-height gesetzt werden soll (z.B. 1.5rem/1.3).

Dieser Text nutzt die Kurzschreibweise:
font: bold 1.5rem/1.3 Georgia, serif; 

.title {
  font: bold 1.5rem/1.3 Georgia, serif;
}

/* Entspricht: */
.title {
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1.3;
  font-family: Georgia, serif;
}

Vorsicht: Die font-Kurzschreibweise setzt alle nicht angegebenen Werte auf ihren Standard zurück. In der Praxis werden die einzelnen Eigenschaften oft separat gesetzt, um mehr Kontrolle zu haben.

/* Vorher */
h1 { 
  font-weight: 900; 
  font-size: 2rem;
}

/* Nachher - font-weight wird auf 400 (normal) zurückgesetzt! */
h1 { 
  font: 2rem Arial, sans-serif; 
}

Kurz gesagt

  • font-family mit Fallback-Kette und generischer Familie am Ende
  • rem für konsistente Grössen, em nur wenn kontextabhängig gewünscht
  • vw = 1% der Viewport-Breite, vh = 1% der Viewport-Höhe
  • clamp(min, preferred, max) für fluid responsive Typografie mit Grenzen
  • font-weight funktioniert nur mit verfügbaren Schriftschnitten
  • italic ist echte Kursive, oblique nur geneigt
  • letter-spacing legt den Buchstabenabstand fest – wird vor allem für Überschriften in GROSSBUCHSTABEN verwendet
  • Positive letter-spacing-Werte (0.05em - 0.15em) verbessern Lesbarkeit bei Uppercase-Text
  • word-spacing legt den Wortabstand fest – wird sehr selten verwendet
  • Standard-Wortabstand ist fast immer optimal, nur in Spezialfällen anpassen
  • Alle drei Eigenschaften verwenden em für bessere Skalierung

Font Themen Font Size | Font Styling | Font line-height | Text Umbruch