CSS Schriftgrößen

font-size

Die Verwendung unterschiedlicher Schriftgrößen ist ein wichtiges Gestaltungshilfmittel. Überschriften heben sich so von Fließtext ab und gliedern damit den Text. Dies führt zu einer besseren Lesbarkeit und bietet dem eiligen Leser einen Überblick. Allerdings sollten unterschiedliche Schriftgrößen mit Bedacht gewählt werden, denn schnell kann eine Seite überladen und unübersichtlich wirken.

Die Schriftgröße wird im CSS mit font-size festgelegt, z. B. h1 { font-size: 40px; }

Achtung: Überschriften sollten nicht als Absätze mit großen Schriften gestaltet werden, sondern immer mithilfe der Tags <h1> bis <h6>. Das spielt eine Rolle für die Ermittlung der Gliederung einer Website (Outline) und hat damit wahrscheinlich eine Bedeutung für die Suchmaschinenoptimierung.

Man unterscheidet zwischen absoluter (Pixel px, Point pt) oder relativer (Geviert em, Prozent %) Schriftgröße.

Hinweis: Wenn keine font-size angegeben wird, nimmt der Browser die Standardgrößen für Textelemente an, z. B. für Absätze <p> 16px (=1em).

Und nun – welche Einheit ist jetzt geeignet für den Entwurf von Webseiten.

Am weitesten verbreitet ist die Verwendung von px für Pixel. Lediglich in älteren Browsern tritt das Problem auf, dass die Schriftgröße nicht skaliert werden kann.

Das W3C empfiehlt die Verwendung von em (Geviert). Im Druck bezeichnet 1 em die Breite eines Gevierts. Im Web dagegen ist ein 1 em die aktuelle Schriftgröße in Pixel. 2 em bedeutet also die doppelte Schriftgröße.

Hast Du Fragen, Anmerkungen, Kritik? Dann schreib mir doch.