Schriftgröße mit CSS und font-size festlegen

Wie groß soll die Schrift sein?

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.

Außerdem hat man viele flexible Möglichkeiten für die verschiedensten Elemente der Seite von der Überschrift bis zum normalen Text oder auch der Beschriftung der Navigation.

Schriftgröße in CSS mit font-size festlegen

Webhosting mit viel Software bei Alfahosting (Affiliate-Link)

Jeglicher Text und jede Beschreibung kann mit CSS vordefiniert werden:

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.

Das dritte Beispiel 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 insofern ungünstig wird, wenn die Bildschirmauflösungen sich stark unterscheiden.

Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)

Alternativ kann statt Pixel (px) auch Punkt (pt) oder em (steht für equal M, gleich breit wie der Buchstabe M) genutzt werden und immer öfter wird rem eingesetzt. Eine zusätzliche Option wurde oben gewählt: eine Prozentangabe. Diese passt sich nämlich der Bildschirmauflösung an. Das Thema bringt aber immer wieder neue Erkenntnisse und so hat man festgestellt, dass die Pixelangabe wirklich nicht so gut ist, aber sie ist sehr verbreitet. Viele sind dazu übergegangen, mit em zu arbeiten. Aber dabei hat sich bei verschachtelten Elementen gezeigt, dass die Schriftgröße stets falsch dargestellt wurde, weil man mehrere Bezugspunkte hat.

Die Empfehlung geht daher dahin, dass man em rem nutzt, weil rem bezieht sich auf die wahre Größe und leitet davon ab. So entsteht die Schriftgröße, wie man sie sich vorstellt. Gerade bei verschiedenen Ebenen, die jeweils eine Schriftgröße mitbekommen, passiert es sonst nämlich, dass nachgeordnete Elemente oft eine größere Schriftart haben als die übergeordnete Ebene. Mit rem wird das verhindert.

Beispiele zur Schriftgröße

font-size: 18px

font-size: 12px

font-size: 80%

font-size: 18pt

font-size: 400%

font-size: 2,2cm

font-size: 2em

font-size: 2rem

font-size: 1cm

Die Beispiele zeigen die verschiedenen Möglichkeiten, wie man in CSS die Schriftgröße anführen kann. Prozent und Pixel (px) sind weit verbreitet, em wird auch immer wieder gewählt, rem setzt sich langsam durch und der Unterschied zwischen em und rem bei gleichem Wert 2 ist schon gewaltig.

Lesen Sie auch

Die Textformatierung ist bei CSS neben der Positionierung eine Hauptaufgabe, weil gefälliger Text einfach eher angenommen wird und einen Mehrwert darstellt. Man darf es nicht übertreiben, aber man kann sich damit sich auch einmal spielen und ein wenig die Reaktionen überprüfen. Wichtig ist einmal die grundsätzliche Einstellung der Schriftart und Schriftgröße.

Dann kommen Befehle, die sehr häufig benötigt werden. Dazu gehört font-weight für die Fettschrift, alternativ und nicht so häufig wird man font-style für kursiv nutzen. Sehr oft braucht man color für die Textfarbe und text-decoration speziell bei der Gestaltung und Auszeichnung der Links.

Und dann gibt es noch weitere Einstellungen wie den Abstand von Buchstaben und Wörter, den Schatten oder auch die Textumwandlung und die Schriftvariante.

Themenseiten

Startseite CSS-Grundlagen

Schriftgröße mit CSS und font-size festlegen

Wie groß soll die Schrift sein?

Schriftgröße in CSS mit font-size festlegen

Beispiele zur Schriftgröße

Lesen Sie auch

Diesen Artikel teilen

Infos zum Artikel

Kategorien

Interner Bereich