Warum Sie Schriftgrößen nicht mit em einstellen sollten

Wenn es um das Festlegen von Schriftgrößen in CSS geht, werden üblicherweise zwei relative Einheiten verwendet: em und rem. Beide Einheiten sind relativ zur Schriftgröße des übergeordneten Elements, aber es gibt einige wichtige Unterschiede zwischen den beiden. In diesem Blogbeitrag untersuchen wir die Unterschiede zwischen rem und em und wann es am besten ist, beide zu verwenden.

Lassen Sie uns zunächst definieren, was em und rem sind. Em ist eine relative Maßeinheit, die auf der Schriftgröße des übergeordneten Elements basiert. Wenn die Schriftgröße des body-Elements beispielsweise 16 Pixel beträgt, entspricht 1em 16 Pixel. Wenn die Schriftgröße eines untergeordneten Elements auf 1,5 em festgelegt ist, entspricht dies dem 1,5-fachen der Schriftgröße des übergeordneten Elements.

Rem hingegen ist auch eine relative Maßeinheit, die sich aber an der Schriftgröße des Root-Elements (typischerweise dem HTML-Element) orientiert. Das heißt, wenn die Schriftgröße des Root-Elements auf 16 Pixel eingestellt ist, dann wäre 1rem auch gleich 16 Pixel, unabhängig davon, wo es im Dokument verwendet wird.

Also, was sind die Unterschiede zwischen em und rem? Der Hauptunterschied besteht darin, dass em-Einheiten relativ zur Schriftgröße des übergeordneten Elements sind, während rem-Einheiten relativ zur Schriftgröße des Stammelements sind. Dies bedeutet, dass rem-Einheiten nicht von Änderungen der Schriftgröße von übergeordneten Elementen betroffen sind, während em-Einheiten von kaskadierenden Effekten betroffen sein können.

Ein weiterer Unterschied besteht darin, dass rem-Einheiten einfacher zu berechnen sind als em-Einheiten, insbesondere wenn es um verschachtelte Elemente geht. Da rem-Einheiten auf dem Stammelement basieren, müssen Sie beim Festlegen von Schriftgrößen nicht die Schriftgröße jedes übergeordneten Elements berechnen.

Also, wann sollten Sie em vs. rem verwenden? Em-Einheiten werden am besten für Schriftgrößen verwendet, die relativ zur Schriftgröße eines bestimmten übergeordneten Elements sein müssen. Wenn Sie beispielsweise möchten, dass die Schriftgröße einer Unterüberschrift das 1,2-fache der Schriftgröße der übergeordneten Überschrift beträgt, können Sie 1,2em für die Unterüberschrift verwenden.

Rem-Einheiten hingegen werden am besten für Schriftgrößen verwendet, die im gesamten Dokument einheitlich sein müssen, unabhängig davon, wo sie verwendet werden. Wenn Sie beispielsweise möchten, dass alle Überschriften eine Schriftgröße von 2rem haben, können Sie die Schriftgröße des Stammelements auf 16px festlegen und 2rem für alle Überschriften verwenden.

Zusammenfassend lässt sich sagen, dass sowohl em- als auch rem-Einheiten nützlich sind, um Schriftgrößen in CSS festzulegen, aber sie haben unterschiedliche Anwendungsfälle. Em-Einheiten werden am besten für Schriftgrößen verwendet, die relativ zur Schriftgröße eines bestimmten übergeordneten Elements sein müssen, während rem-Einheiten am besten für Schriftgrößen verwendet werden, die über das gesamte Dokument hinweg konsistent sein müssen.