Sie befinden sich hier:
Homepage
»
Webseitengestaltung
»
Blog
»
HTML und CSS Tipps
05.05.2014

Verwendung von relativen Schriftgrößen

Kategorie(n): HTML und CSS Tipps

Responsive Webdesign gewinnt in der Entwicklung von modernen Webseiten, die auf unterschiedlichen Endgeräten mit verschiedenen Displaygrößen dargestellt werden sollen, immer mehr an Bedeutung. Das heißt natürlich auch, dass die Schriftgrößen flexibel (relativ) und nicht als Absolutwert in px oder pt definiert werden müssen.

Es gibt zwei grundlegende Arten, um Schriftarten relativ zu definieren. Sie können die Schriftgröße in Prozent angeben oder in em. 1em entspricht in etwa der Breite des Großbuchstabens „M“. Die meisten Browser haben eine Standardschriftgröße von 16px, was 1em bzw. 100% entspricht.

Ich empfehle als Einheit em, da prozentuale Schriftangaben von manchen Browsern fehlerhaft interpretiert werden.

Die passende Notation sieht wie folgt aus:

body {
  font-size: 100.01%;
}
.gr1 {
  font-size: 0.875em;
}
.gr2 {
  font-size: 0.8125em;
}
.gr3 {
  font-size: 0.75em;
}

Als Basis (Initialgröße) wurde 100.01% für das Root-Element definiert, um diverse Darstellungsprobleme bei älteren Browsern zu kompensieren.

Hier ist das Ergebnis:

font-size: 0.875em; - entspricht 14px

font-size: 0.8125em; - entspricht 13px

font-size: 0.75em; - entspricht 12px

Vererbung von Schriftgrößen

Beachten Sie, dass die relativen Größenangaben vererbt werden, d.h. wenn die Schriftgröße in einem Elternelement 0.875em (entspr. 0,875*16px=14px) beträgt und deren Kindelement noch einmal auf 0,8125 reduziert wird, so ist die Schriftgröße am Kindelement nur noch 0,875*0,8125*16px=11,375px. Die Berechnung für das Enkelelement würde 8,53px ergeben (0,875*0,8125*0,75*16px)

In der Praxis sieht das wie folgt aus:

font-size: 0.875em; - entspricht 14px
font-size: 0.8125em; - entspricht 11,375px
font-size: 0.75em; - entspricht 8,53px

Moderne Browser akzeptieren als Einheit ebenfalls Root-em „rem“. Hier bezieht sich die relative Angabe der Schriftgröße auf das Root-Element der Webseite (html bzw. body). Bei dieser Einheit werden die Schriftgrößen nicht vererbt.

Umrechnungstabelle px / pt zu em

Die Umrechnung von statischen Schriftgrößen in relative Schriftgrößen ist eine einfache mathematische Aufgabe. In der nachfolgenden Tabelle können Sie die entsprechenden Werte ablesen.

Pixel
em
Punkte
9px
0.5625em
7pt
10px
0.625em
8pt
11px
0.685em
8pt
12px
0.75em
9pt
13px
0.8125em
10pt
14px
0.875em
11pt
15px
0.9375em
11pt
16px
1em
12pt
17px
1.0625em
13pt
18px
1.125em
14pt
19px
1.1875em
14pt
20px
1.25em
15pt
21px
1.3125em
16pt
22px
1.375em
17pt
23px
1.4375em
17pt
24px
1.5em
18pt

Fazit

Natürlich sind relative Schriftgrößen nur eine Aspekt. Logischerweise müssen die umschließenden Blöcke mindestens genauso flexibel sein, sonst macht das Ganze wenig Sinn. Insofern sollten Sie auch für <div>, <p>, <img>, <section> etc. relative Maße bevorzugen. Beachten Sie aber die Vererbung bzw. verschachteln Sie Maßangaben nicht zu tief. Sie verlieren schnell die Übersicht.

Autor: Mein Name ist Harry Kämpf und ich bin seit vielen Jahren als Projekt Manager im Webumfeld tätig. Auf diesen Erfahrungen basieren die Tipps zur Webseitengestaltung. Ich schreibe gern über Webthemen, nehme aktuelle Trends auf und berate bei Bedarf. Mehr Infos über mich können Sie auf meiner Homepage nachlesen.

78

Kommentare:

11.Juli2014

Vielen Dank für die Erklärung. Seitdem die Smartphone-Nutzer-Zahlen steigen, wird ein responsive Design immer wichtiger. Wie gut, dass es immer wieder Tipps und Anleitungen gibt, wie man das Design gestalten kann.

Fragen / Anregungen?

Sicherheitsabfrage:
Datenschutzhinweis: Die eingegebenen Daten werden nicht an Dritte weitergegeben.