Sie sind hier: Startseite -> CSS-Grundlagen -> Textformatierung -> Schriftgröße

CSS-Grundlagen: font-size für die Schriftgröße

Schriftgröße: wie groß hättens wir gerne?

Nach der Schriftart gilt es zu überprüfen, welche Schriftgröße gewählt werden soll. Auch hier ist CSS ein mächtiges Werkzeug, das verschiedene Optionen anbietet und durch die zentrale Einstellung via CSS-Datei kann für die gesamte Webseite vorgegeben werden, wie groß ein Text dargestellt werden soll.

Aber nicht nur der Text kann adaptiert werden, auch Überschriften sind auf diese Weise einstellbar.

h1 { font-size: 18px; }
p { font-size: 12px; }
body { font-size: 80%; }

Im ersten Beispiel wird die Überschrift H1 (größtmögliche Überschrift bei HTML) mit der Schriftgröße 18 Pixel bestückt. Im zweiten Beispiel erhält ein Absatz die Schriftgröße 12 Pixel zugewiesen, im dritten Beispiel wird für eine Webseite generell die Einstellung 80% gewählt.

Dritteres ist eine wichtige Information. Im Webdesign hat man das Problem bekommen, dass es nicht so wie in den Anfangszeiten eine philosophische Frage gibt, ob man für 800 x 600 Pixel oder für 1024 x 768 Pixel optimiert, weil es in der Zwischenzeit eine Unzahl an Darstellungsformen gibt. Traditionell wurden Schriftgrößen in Pixel (px) angegeben, was aber insoferne ungünstig wird, wenn die Bildschirmauflösungen sich stark unterscheiden.

Alternativ kann statt Pixel (px) auch Punkt (pt) oder em (steht für equal M, gleich breit wie der Buchstabe M) genützt werden. Eine zusätzliche Option wurde oben gewählt: eine Prozentangabe. Diese passt sich nämlich der Bildschirmauflösung an.

Das Problem: wählt man diese Einstellung, muss man achten, ob vor allem bei kleinen Elementen, beispielsweise der Navigationsspalte, einer Servicespalte mit geringen Ausmaßen etc. ausreichend Platz zur Verfügung steht. Oft reicht der Platz dann nicht aus und das Layout wirkt hektisch bzw. fehlerhaft. Andererseits ist die Prozentangabe eine schöne Lösung, um auf die unterschiedlichsten Bildschirmauflösungen eingehen zu können. Wer genug Platz für den Text oder die Überschriften, Navigationspunkte etc. hat, sollte diesen Weg einmal testen.

Übersicht der Unterseiten

Beispiel: font-size

Informationen über ein praktisches CSS-Beispiel für die Verwendung von font-size zur Formatierung der Schriftgröße.

Zurück zum Hauptthema

Übersicht Textformatierung

Startseite CSS-Grundlagen