Schriftgrößen in CSS – REM statt Pixel verwenden
Lesezeit: ca. 3 Minuten
CSS Schriftgröße: REM statt Pixel verwenden für bessere Skalierbarkeit
In der Webentwicklung ist die Wahl der richtigen Maßeinheiten für Schriftgrößen entscheidend für die Zugänglichkeit und Skalierbarkeit einer Website. Während Pixel (px) feste Werte darstellen, bieten REM-Einheiten eine flexible und benutzerfreundlichere Alternative. In diesem Beitrag erfährst du, warum die Verwendung von REM gegenüber Pixeln vorteilhaft ist und wie du sie effektiv einsetzen kannst.
Was sind Pixel (px) und REM?
• Pixel (px): Eine feste Maßeinheit, die exakt einen Bildpunkt auf dem Bildschirm repräsentiert. Unabhängig von den Einstellungen des Benutzers bleibt die Größe konstant.
• REM (Root EM): Eine relative Maßeinheit, die sich auf die Schriftgröße des Wurzelelements (<html>) bezieht. 1rem entspricht der im <html>-Tag definierten Schriftgröße. Standardmäßig ist dies in den meisten Browsern 16px.
Warum REM statt Pixel verwenden?
1. Bessere Skalierbarkeit: Da REM-Einheiten relativ zur Wurzel-Schriftgröße sind, passen sie sich dynamisch an, wenn der Benutzer die Standard-Schriftgröße seines Browsers ändert. Dies verbessert die Zugänglichkeit für Benutzer mit Sehbeeinträchtigungen.
2. Einfachere Wartung: Durch die Verwendung von REM kannst du globale Anpassungen der Schriftgröße vornehmen, indem du lediglich die Schriftgröße des <html>-Elements änderst. Dies erleichtert die Responsive Design-Anpassungen.
3. Konsistenz: REM-Einheiten verhindern unerwartete Skalierungen, die bei der Verwendung von EM-Einheiten in verschachtelten Elementen auftreten können, da sie stets auf die Schriftgröße des Wurzelelements verweisen.
Wie setzt man REM effektiv ein?
Um die Berechnung von REM-Werten zu vereinfachen, kannst du die Schriftgröße des <html>-Elements auf 62.5% setzen:
html {
font-size: 62.5%;
}
➡ Erklärung: Standardmäßig beträgt die Schriftgröße des <html>-Elements 16px. Durch Setzen auf 62.5% wird sie auf 10px reduziert (16px * 0,625 = 10px). Dies erleichtert die Umrechnung: 1rem entspricht nun 10px, 1.6rem entspricht 16px usw. So kannst du Pixelwerte durch einfaches Verschieben des Dezimalkommas in REM umrechnen.
Beispiel:
h1 {
font-size: 2.4rem; /* entspricht 24px */
}
p {
font-size: 1.6rem; /* entspricht 16px */
}
➡ Hinweis: Stelle sicher, dass andere Maßeinheiten wie Abstände und Padding ebenfalls in REM angegeben werden, um ein konsistentes und skalierbares Design zu gewährleisten.
Fazit
Die Verwendung von REM-Einheiten anstelle von Pixeln für Schriftgrößen in CSS fördert die Zugänglichkeit, Skalierbarkeit und Wartbarkeit deiner Website. Durch die Anpassung der Schriftgröße des <html>-Elements auf 62.5% wird die Berechnung von REM-Werten vereinfacht, was die Entwicklung effizienter gestaltet. Setze REM-Einheiten bewusst ein, um ein flexibles und benutzerfreundliches Design zu gewährleisten.