Warum Ems?

Ich habe Text schon immer nur in px skaliert. Selbst als es ganz offensichtlich uncool war, dies zu tun – in den Tagen, als clevere Leute Wert darauf legten, dass Text in px nicht in IE 6-8 skaliert werden konnte. Ich bin jetzt auf Ems umgestiegen. Ich habe noch nicht jedes einzelne Projekt umgestellt, aber meine Denkweise hat sich geändert. Warum? Ich habe endlich ein paar überzeugende Gründe gefunden, die ich jetzt verstehe.

Sie müssen die Schriftgrößen für verschiedene Bildschirmgrößen ändern

Die gleiche Körpergröße, die auf einem Handybildschirm gut aussieht, sieht auf einem breiten Desktop-Layout nicht gut aus. Sehen Sie sich Trent's Seite als gutes Beispiel an. Text sollte auf großen Bildschirmen etwas größer sein.

Nehmen wir an, Sie durchsuchen Ihr Stylesheet und finden 50 verschiedene font-size-Deklarationen in px. Das sind 50 Stellen, an denen Sie die Schriftgröße über eine Media Query ändern müssen, wenn sich die Bildschirmgröße ändert. Das sind 50 Rückschläge.

Zunächst einmal sind 50 Stellen zu viele für alle außer den größten Websites. Aber nehmen wir an, diese 50 Stellen wären alle in em. Nun müssen Sie über Media Queries nur noch die Schriftgröße des Body ändern, und diese Änderung wird sich im gesamten Dokument ausbreiten und die Größen entsprechend anpassen.

body {
  font-size: x-large;
}
@media (max-width: 1000px) {
  body { font-size: large; }
}
@media (max-width: 500px) {
  body { font-size: medium; }
}

Es ist sowieso willkürlich

Geräte versuchen zwar, die physische Größe von „1px“ unabhängig von ihrer Bildschirmdichte zu normalisieren. Was für eine seltsame Sache. Ein Pixel hat nichts mit einem echten Pixel auf Ihrem Bildschirm zu tun. Es ist tatsächlich eine Winkelmessung.

Sie fühlen sich vielleicht wohler, wenn Sie in px skalieren, weil Sie es schon länger tun, aber das macht es nicht intuitiver. Sie wählen einen Wert, der auf dem Bildschirm gut aussieht. Was spielt es für eine Rolle, ob es 1,35 oder 17 ist?

Relativer Raum

Nehmen wir an, Sie verwenden Bildsymbole in Ihrem Design. Sie möchten sie nach Belieben auf Überschriften anwenden. Sie möchten, dass die Größe dieser Symbole proportional zur Größe der Überschrift ist. Sie können keinen Platz wie padding-left: 20px reservieren, da dies immer 20px sein wird, unabhängig von der Schriftgröße der Überschrift. Wenn Sie diesen Abstand in ems festlegen, können Sie einen Raum reservieren, der sich auf die aktuelle font-size dieser Überschrift bezieht.

Beziehungen

Wenn Sie sich voll auf Ems einlassen, können Sie Dinge wie margin und padding in ems festlegen. Das bedeutet, wenn Sie die font-size des Bodys reduzieren, wird auch der Abstand auf Ihrer Website reduziert. Dies verbindet das Design Ihrer Website mit der Typografie, was eine Art großer Ying/Yang-Synergie-Aktion ist.

Kleine Nachteile

Es gibt immer noch ein paar ärgerliche Dinge mit Ems, wie die Kaskadierung. Wenn Sie entscheiden, dass Listenelemente font-size: 1.1em haben sollen und dann verschachtelte Listen haben, wird dies kaskadiert und die Schriftgröße der Kind-Listen erhöht. Das wollten Sie wahrscheinlich nicht. Sie können es mit li li { font-size: 1em; } beheben, aber das ist die Art von Sache, die einem auf den Keks gehen kann. Dort können Rems ins Spiel kommen, aber das kann auch knifflig sein, da die Browserunterstützung geringer ist (IE 9+).