CSS-Schriftgrößenbestimmung: Pixel vs. Em vs. Rem vs. Percent vs. Viewport Units

Es wurde viel über Pixel vs. Em vs. Percent vs. Rem diskutiert und darüber, welche Schrifteigenschaft wann zu verwenden ist. Trotz der über 100 Artikel im Internet kann dieses Thema sehr verwirrend sein, da die Verwendung dieser Schrifteigenschaften je nach den Bedürfnissen unserer Projekte unterschiedlich ist. Einige Leute empfehlen zum Beispiel, keine festen Pixelwerte auf der Basisebene (HTML- und Body-Elemente) zu verwenden, da der Benutzer keine Möglichkeit hat, die Schriftgröße nach seinen Wünschen zu ändern. Aber für Leute wie mich, die auf Bootstrap angewiesen sind, ist das nicht ratsam. Am Ende haben wir einen festen Basiswert in Pixeln und müssen die Schrifteigenschaften unseres gesamten Projekts relativ zu den Basis-Pixelwerten erstellen.

Dieser Artikel erklärt den Unterschied zwischen diesen Schrifteigenschaften und wie man sie am besten verwendet. Natürlich gibt es keinen richtigen Weg, um dies zu tun, und ein großer Teil der Schriftgrößen zu verwenden und wie wird weitgehend deterministisch sein, basierend auf unserem Verständnis dieser Schriftgrößeneinheiten und das Projekt in Frage.

Pixel: Vor dem Aufkommen des responsiven Designs wurden Pixel weithin als DIE Schriftgrößeneinheit für alles verwendet, von der Typografie bis hin zu Breite, Polsterung und Höhe. Pixel sind jedoch Einheiten mit fester Größe und ändern sich nicht je nach Größe des Ansichtsfensters oder sind skalierbar. Wenn Sie eine responsive Website unter Verwendung von Pixeln erstellen möchten, kann es sehr schwierig werden, den Überblick über alle pixelbasierten Werte im gesamten CSS-Stylesheet zu behalten, einschließlich der Werte in Media Queries. Welche Schrifteigenschaft können wir also verwenden, die es uns ermöglicht, minimale Änderungen an unserem CSS-Stylesheet vorzunehmen und dennoch skalierbar zu sein? Hier kommen em, rem, Prozent und Viewport-Einheiten ins Spiel.

Em:Em ist eine flexible, skalierbare Einheit, die vom Browser in Pixelwerte umgewandelt wird. Wenn die Standardschriftgröße in Chrome 16 px beträgt, ist 1 em = 16 Pixel. Ein großes Missverständnis über em ist, dass es relativ zur Schriftgröße des übergeordneten Elements ist. Gemäß der W3-Spezifikation ist em relativ zur Schriftgröße des Elements, in dem es verwendet wird. Dieser Artikel hier erklärt das Konzept von em auf eine klare und detaillierte Weise. Wenn Sie wirklich wissen wollen, wie em funktioniert, sollten Sie den oben genannten Artikel nicht auslassen. em werden üblicherweise für typografische Elemente wie Überschriften, Texte, Absätze und die mit der Typografie verbundenen Elemente wie Ränder, Auffüllungen usw. verwendet. Wenn Sie die Schriftgröße Ihrer Basis-HTML- und Body-Elemente in Pixeln festlegen und die Eigenschaften Ihrer Typografie-Elemente mit ems definiert sind, brauchen Sie für responsives Design nur die Standard-Schriftgröße auf der Basisebene zu ändern, z. B.

@media (max-width: 400px) {
html, body { font-size: 15px; }
}

, und alle em-Werte werden automatisch auf die Basisebene umgerechnet.

Allerdings haben ems einen großen Nachteil: Vererbung! Ein Beispiel: Ein <div> mit einer Schriftgröße von 16px, das ein <p> mit einer Schriftgröße von 2em enthält, entspricht 32 px für das <p> Element. Fügen Sie nun ein <div> innerhalb des <p> mit einer Schriftgröße von 0,5em hinzu, so wird das Ergebnis des div 16px sein, die Hälfte von 32 px, nicht 8px. Hier kommt rems ins Spiel.

Rem: Rem ist relativ zur Schriftgröße des Wurzelelements (html-Element). Wenn die Schriftgröße des html-Elements 16 px beträgt, dann ist 1rem = 16 px. Rem ist IMMER relativ zum Wurzelelement, unabhängig davon, wie verschachtelt die Elemente sind. Die Verwendung von rems ohne ems kann jedoch zu Problemen führen, da die Typografie entweder zu groß oder zu klein werden kann, was zu Skalierungsproblemen führen kann. Dieser Artikel erklärt eine gute Möglichkeit, dieses Problem zu lösen.

Prozentwerte: Prozentwerte sind immer relativ zu einem anderen Wert, sei es der übergeordnete Wert des Elements oder eine andere Eigenschaft des Elements selbst. Prozentwerte werden häufig im Responsive Design verwendet. Ein gutes Beispiel ist das Bootstrap-Framework von Twitter. Das 12-Spalten-Layout von Bootstrap hat seine Breiten in Prozentwerten festgelegt, so dass sie immer fließend und relativ zu ihrem übergeordneten Element bemessen sind
Prozentwerte werden häufig für die Breite und Höhe von Containern, Divs und für die Größe von responsiven Bildern verwendet.

Ansichtsfenstereinheiten: Viewport width and height properties are relative to the width/height of the current viewport size.

1vw = 1% of viewport width
1vh = 1% of viewport height

Viewport bedeutet hier die Fenstergröße des Browsers. Wenn Sie die Größe Ihres Elements auf der Basis der Viewport-Breite und nicht des übergeordneten Elements/Wurzelelements bestimmen wollen, dann müssen Sie Viewport-Einheiten für die Schriftgröße verwenden. vw/vh-Einheiten eignen sich hervorragend für die Typografie und werden häufig für dieselbe verwendet.
Hier ist ein großartiger Artikel, der erklärt, wie man diese Eigenschaft verwendet.

Abschließendes Urteil: Da ich Bootstrap häufig verwende, ist meine Standardgröße in Pixel. Ich verwende Prozent, um die Breite und Höhe von Bildern, Containern und divs, ems und rems für Typografie und typografische Elemente wie margin, padding usw. festzulegen. Ich spiele gerade mit Viewport-Einheiten für responsive Typografie und finde es großartig. Experimentieren Sie viel mit diesen Schrifteigenschaften und Sie werden bald einen für Sie maßgeschneiderten Stil finden.