Fonts im Web: Standardschriften und neue Webfonts

Schriftarten sind wie der Tonfall einer Webseite. Die gleiche Seite kann mit einer anderen Schrift plötzlich ganz anders wirken: seriöser, verspielter, technischer oder einfach besser lesbar. Lange Zeit war man im Web eher eingeschränkt und nutzte vor allem Schriften, die beim Besucher sowieso installiert waren. Das nennt man “websichere Schriften”.

Heute gibt es zusätzlich Webfonts. Das sind Schriftarten, die direkt von der Webseite geladen werden. Dadurch kann eine Seite beim Besucher genauso aussehen wie bei dir, auch wenn die Schrift nicht installiert ist. Viele nutzen dafür Google Fonts, weil es schnell geht und eine große Auswahl bietet. Nur: nicht übertreiben, denn zu viele Fonts machen die Seite langsam und wirken schnell unruhig.

Beispiele: gleicher Text, verschiedene Fonts

Unten siehst du immer den gleichen Satz, aber in verschiedenen Fonts. Zusätzlich steht der Fontname einmal im Klartext dabei. Im Mustertext ist Font fett, Muster unterstrichen und darzustellen kursiv, damit du die Unterschiede schneller erkennst.

Wie du Fonts in CSS setzt

Schriften definierst du mit font-family. Am besten gibst du immer eine Liste an. Wenn ein Font fehlt, nimmt der Browser den nächsten. Das ist stabil und spart Stress.

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

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

Und noch ein Klassiker: nicht zu klein setzen. Viele Seiten wirken “modern”, sind aber schlecht lesbar, weil alles mini ist. Eine solide Schriftgröße plus genug Zeilenhöhe fühlt sich sofort besser an, auch ohne fancy Design. Das wird gern vergessen, vor allem wenn man zu lange vorm Bildschirm sitzt.

FAQ zu Fonts