Verwendung von relativen Schriftgrößen
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:
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:
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.
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.