px – em – % – pt – Schlüsselwort

Wenn es darum geht, die Schriftgröße in CSS festzulegen, haben Sie viele Möglichkeiten. Sie können ein „Schlüsselwort“ verwenden, wie z. B.p { font-size: small; }oder einen numerischen Wert. Bei der Verwendung eines Wertes müssen Sie eine Maßeinheit deklarieren, die selbst vier Optionen hat. Was ist am besten? Das hängt natürlich davon ab. Schauen wir uns das mal an

Schlüsselwort

Gültige Optionen für die Festlegung der Schriftgröße in Schlüsselwörtern sind xx-small, x-small, small, medium, large, x-large und xx-large sowie die relativen Schlüsselwörter smaller und larger.

Überraschenderweise ist die Größeneinstellung nach Schlüsselworten über Browser und Plattformen hinweg ziemlich konsistent. Sehen Sie unten eine Testseite in Opera, Firefox, IE 6 und Safari

Beachten Sie, dass es, obwohl sie ziemlich nah beieinander liegen, Unterschiede bei Zeilenumbrüchen und der Gesamthöhe des Absatzes gibt.

Nur wenn eines der relativen Größen-Schlüsselwörter verwendet wird, greift der „Kaskadeneffekt“ und die Schriftgröße des übergeordneten Elements beeinflusst das Kind. Wenn beispielsweise das übergeordnete Element auf medium und das untergeordnete Element auf large gesetzt war. Nur large würde verwendet, um das untergeordnete Element zu dimensionieren. Wenn jedoch das übergeordnete Element auf medium und das untergeordnete Element auf larger (beachten Sie: larger, nicht nur large) gesetzt war, würde das untergeordnete Element „hochskaliert“ werden, um größer als die Schriftgröße des übergeordneten Elements zu sein. Ändere das Elternteil, ändere das Kind, daher eine „Kaskade“.

Schlüsselwörter sind eine absolut gute Methode, um Schriftarten im Web zu skalieren. Eine der beliebtesten Techniken ist es, eine Schlüsselwort-Schriftgröße für das Body-Element festzulegen und dann überall sonst auf der Seite relative Schriftgrößen zu verwenden. Dies gibt die Möglichkeit, die Schriftgröße auf der Seite wirklich einfach zu vergrößern oder zu verkleinern (z. B. mit JavaScript) und die gesamte Seite konsistent nach oben und unten zu bewegen.

Schlüsselwörter bieten jedoch keine sehr feingranulare Kontrolle über Ihre Typografie, da die Auswahl recht begrenzt ist.

px

Wenn Sie eine feingranulare Kontrolle benötigen, ist die Skalierung von Schriftarten in Pixelwerten (px) eine ausgezeichnete Wahl (sie ist meine Lieblingsmethode). Auf einem Computerbildschirm ist es nicht genauer als ein einzelnes Pixel. Wenn Sie Schriftarten in Pixeln skalieren, weisen Sie Browser wörtlich an, die Buchstaben mit genau dieser Pixelhöhe darzustellen.

Windows, Mac, aliased, anti-aliased, cross-browsers, egal, eine Schriftart auf 14px eingestellt ist 14px hoch. Aber das heißt nicht, dass es trotzdem noch Variationen geben wird. In einem schnellen Test unten waren die Ergebnisse etwas konsistenter als bei Schlüsselwörtern, aber nicht identisch.

Aufgrund der Beschaffenheit von Pixelwerten kaskadieren sie nicht. Wenn ein übergeordnetes Element eine Pixelgröße von 18px hat und das untergeordnete Element 16px ist, ist das untergeordnete Element 16px. Allerdings können Schriftgrößeneinstellungen in Kombination verwendet werden. Wenn beispielsweise das übergeordnete Element auf 16px und das untergeordnete Element auf „larger“ gesetzt war, wäre das untergeordnete Element tatsächlich größer als das übergeordnete Element. Ein schneller Test zeigte mir das.

„Larger“ erhöhte die 16px des übergeordneten Elements auf 20px, eine Steigerung von 25 %.

Pixel hatten in der Vergangenheit einen schlechten Ruf wegen Bedenken hinsichtlich Zugänglichkeit und Benutzerfreundlichkeit. In IE 6 und darunter können in Pixeln eingestellte Schriftgrößen nicht vom Benutzer geändert werden. Das bedeutet, dass wir schicken jungen gesunden Designer Text in 12px einstellen und ihn auf dem Bildschirm gut lesen können, aber wenn Leute, die schon etwas älter sind, die Größe ändern wollen, um ihn lesen zu können, können sie es nicht. Das ist wirklich IE 6s Schuld, nicht unsere, aber wir haben, was wir haben, und wir müssen damit umgehen.

Die Einstellung der Schriftgröße in Pixeln ist die genaueste (und meiner Meinung nach befriedigendste) Methode, aber berücksichtigen Sie die Anzahl der Besucher, die immer noch IE 6 auf Ihrer Website nutzen, und deren Barrierefreiheitsbedürfnisse. Wir sind ganz am Rande dessen, dass wir uns darum nicht mehr kümmern müssen.

em

Em-Werte sind wahrscheinlich die schwierigsten Werte, um den Verstand zu wickeln, wahrscheinlich weil das Konzept selbst abstrakt und willkürlich ist. Hier ist die Sache: 1em entspricht der aktuellen Schriftgröße des betreffenden Elements. Wenn Sie die Schriftgröße nirgendwo auf der Seite festgelegt haben, dann ist es der Browser-Standard, der wahrscheinlich 16px ist. Also standardmäßig 1em = 16px. Wenn Sie eine Schriftgröße von 20px für Ihren Body festlegen würden, dann wäre 1em = 20px.

Historisch gesehen glaube ich, dass der „em“-Wert auf der Breite des Großbuchstabens M basiert, aber zitieren Sie mich nicht.

Die Dinge werden mit ems etwas komplizierter, wenn wir eine komplexere Schriftgrößeneinstellung vornehmen. Sagen wir, wir brauchen eine Überschrift mit einer größeren Schriftgröße, also setzen wirh1 { font-size: 2em; }Diese „2“ ist im Wesentlichen ein Multiplikator des aktuellen em-Wertes. Wenn der aktuelle em-Wert also 16px beträgt, wird dieses Überschriften-Tag 32px betragen. Diese Berechnung ist sauber, aber Sie können sich vorstellen, dass sie oft nicht sauber ist und Rundungen stattfinden müssen.

Die beliebteste Methode, mit em-Werten zu arbeiten, ist die Einstellung der Schriftgröße für den Body auf 62,5 %. Da die Standard-Browser-Schriftgröße 16px beträgt, ergibt dies 10px (ohne sie auf 10px festzulegen, was nicht kaskadiert). Die Verwendung von 10 als Multiplikator ist viel einfacher als die Verwendung von 16. Auf diese Weise benötigen Sie eine Schriftgröße von 18px? Verwenden Sie font-size: 1.8em.

Warum also das ganze em-Zeug, wenn es nur eine Abstraktion von Pixelwerten ist?

1. Sie sind in IE 6 skalierbar
2. Die Beziehung zu anderen Größen (elastische Breiten-Websites)
3. Ems kaskadieren wie verdammt noch mal

Die erste ist die wichtigste. Wenn Sie im Grunde Pixel verwenden möchten, aber die Barrierefreiheitsprobleme nicht mögen, könnten Ems die Lösung für Sie sein.

Ems sind nicht nur für Schriftarten, es ist eine Maßeinheit, die Sie für jede andere Länge (Höhe, Breite usw.) verwenden können. Elastische Breiten-Websites verwenden für alles em-Werte, was die Website im Wesentlichen „zoombar“ macht, was bedeutet, dass beim Erhöhen der Schriftgröße alles bis zur Breite der Website hochskaliert wird. Ems haben auf diese Weise eine direkte Beziehung zueinander. Wenn Sie eine Box haben, die 10em hoch ist, und eine Schrift darin, die 1em groß ist, nimmt sie genau 1/10 der Höhe dieser Box ein. Dieses exakte proportionale Verhältnis macht em-Werte zu einer leistungsstarken Webdesign-Technik.

Es gibt eine potenzielle Bedenken bei ems, in Bezug auf #3. Sie kaskadieren tatsächlich. Jeder em-Wert bezieht sich auf den Wert seines übergeordneten Elements. Wenn Sie ems als direkte Ersetzung für Pixelwerte verwenden, kann dies zu Problemen führen. Sie könnten beispielsweise sowohl Ihre „p“ (Absatz) als auch Ihre „li“ (Listenpunkt) Schriftgrößen auf 1,2em einstellen. Sieht heute gut aus, aber morgen werden Inhalte auf der Website veröffentlicht, die einen Absatz innerhalb eines Listenpunkts haben. Diese beiden Werte werden kaskadieren (1,2 x 1,2) und dieser Listenpunkt wird in der Schriftgröße größer sein als alle anderen. Kein Ausweg, außer das Tag zu entfernen.

%

Prozente sind ziemlich offensichtlich, wie sie funktionieren. Das heißt, sie funktionieren genau so, wie Sie es erwarten würden. Wenn ein übergeordnetes Element die Schriftgröße von 20px hat und das untergeordnete Element 50% hat, ergibt sich 10px. Genau wie bei ems ist die Beschaffenheit der Prozent-Skalierung, dass sie relativ ist. Sie kaskadiert auch auf die gleiche Weise, so dass das Problem, das oben mit dem Listenpunkt und dem Absatz beschrieben wurde, auch hier zutrifft.

Eine beliebte Technik zur Verwendung von Prozentwerten für Schriftgrößen ist es, eine vernünftige Schriftgröße für den Body festzulegen (wie z. B. „small“) und dann für alles andere Prozente zu verwenden. Dies ermöglicht es Ihnen, dieses Schlüsselwort an einer einzigen Stelle auszutauschen, um die Schriftgrößen auf der gesamten Seite zu skalieren, was Dinge wie eine Schriftgrößenänderungsfunktion erheblich erleichtert.

pt

Die letzte Maßeinheit, in der es möglich ist, Schriftgrößen zu deklarieren, sind Punktwerte (pt). Punktwerte sind nur für Print-CSS! Ein Punkt ist eine Maßeinheit, die für reale Typografie auf Papier verwendet wird. 72 Punkte = ein Zoll. Ein Zoll = ein realer Zoll wie auf einem Lineal. Kein Zoll auf einem Bildschirm, der rein willkürlich auf der Auflösung basiert.

So wie Pixel bei der Schriftgrößeneinstellung auf Monitoren absolut genau sind, sind Punktgrößen auf Papier absolut genau. Für die besten plattform- und browserübergreifenden Ergebnisse beim Drucken von Seiten richten Sie eine Druck-Stylesheet ein und skalieren alle Schriftarten mit Punktgrößen.

Zur guten Übersicht: Der Grund, warum wir keine Punktgrößen für die Bildschirmdarstellung verwenden (abgesehen davon, dass es absurd ist), ist, dass die plattform- und browserübergreifenden Ergebnisse drastisch unterschiedlich sind.