Share
Ich werde eine umfassende Aussage machen; Pixel haben keinen Platz im Webdesign. Es gibt nur einen Grund, warum Sie sich immer noch auf Pixel verlassen - und das liegt daran, dass Sie sich noch nicht mit ems beschäftigt haben. Lass uns das ändern!
Decorative M mit freundlicher Genehmigung von Frances Mcleod - Gewinner des TypeFight # 34 Wenn wir Websites erstellen, müssen wir dem Browser mitteilen, wie „großes“ Zeug ist: „Diese Überschrift ist so groß“, „Dieser Container ist ja hoch“, „Dieses Formular ist breiter als das“, wie wir eine Seite gestalten. Pixel waren als gewählte Maßeinheit immer vollkommen sinnvoll. Wir geben auf einem Bildschirm aus, was würden wir sonst noch verwenden?!
Es stellt sich jedoch heraus, dass Pixel von Natur aus unflexibel sind. Und es stellt sich heraus, dass die Unflexibilität für das Web nicht gut ist.
Oliver Reichenstein hat vor langer Zeit gesagt: "Das Web besteht zu 95% aus Typografie", aber es dauerte einige Jahre, bis die Menschen mit der Idee einverstanden waren. Inhalt und Nutzer; Sie sind unsere Prioritäten als Webdesigner, und typografische Gestaltung hilft uns, diese Prioritäten zu erreichen.
Browser zeigen die Textkopie in einer Standardgröße an. Auf Desktops ist dies in der Regel 16 Pixel, mobile Browser variieren. Benutzer können diese Standardeinstellung je nach Wunsch ändern.
Oft verwenden Webdesigner CSS, um die Grundschriftgröße in Stein zu fassen…
… Verhindern, dass der Benutzer sein eigenes Leseerlebnis maßschneidert, wodurch der Inhalt weniger zugänglich wird.
Die erste Lektion gibt dem Benutzer die Energie zurück. Verhindern Sie nicht, dass Benutzer ihre eigene Schriftgröße festlegen, sondern stellen Sie sicher, dass Sie auf Augenhöhe sind. Setzen Sie Ihre Basisschriftart auf 100% des Browserstandards:
dann können wir von dort aus arbeiten.
Wir müssen noch definieren, wie groß unsere verschiedenen typografischen Elemente sind, insbesondere wenn wir ein CSS-Reset-Verfahren zum Entfernen aller Standardgrößen verwendet haben. Eine ziemlich typische modulare Waage würde ungefähr so aussehen:
Diese Zahlen werden seit Jahrhunderten verwendet, um die Proportionen zu optimieren, ohne zu viele der im Druck verwendeten Blöcke physisch herstellen zu müssen. Es gibt alle Arten von kluger Mathematik, die Skalen wie diese rechtfertigen, und ich bin mir sicher, dass Sie erkennen können, dass diese Auswahl auch für das Auge angenehm ist.
Wir würden diese Skala in unsere eigene Typografie übersetzen, indem wir CSS etwas wie folgt anwenden:
(Wie wir schon gesagt haben) ist die Verwendung von festen Pixelwerten jedoch unflexibel, also korrigieren wir das…
Ein EM ist eine Maßeinheit. Genau wie Pixel kann ems die Größe von Elementen auf einer Webseite bestimmen. Im Gegensatz zu Pixeln, bei denen es sich um absolute Pixel handelt, sind die Ems relativ zur Schriftgröße des übergeordneten Elements.
1em entspricht der geerbten Schriftgröße. Wenn die Schriftgröße von a Ems bekommen ihren Namen vom Drucken. Wann genau der Begriff zum ersten Mal verwendet wurde, ist unklar, aber als Großbuchstabe M (ausgesprochen emm) entspricht am ehesten der quadratischen Druckform, auf der die Druckbuchstaben platziert wurden, um der Messung ihren Namen zu geben. Unabhängig von der Punktgröße der betreffenden Schrift würde der Block des Großbuchstaben M den Em definieren. Ein Em ist normalerweise etwas größer als die Buchstabenform, aber Sie bekommen die Idee. Wir haben bereits begonnen, unsere typografische Skalierung in Pixeln festzulegen. Wie konvertieren wir das in Ems? Eine einfache Berechnung, die die gewünschte Schriftgröße in Bezug auf die Schriftgröße des Körpers ausdrückt: Wir nehmen an, dass die Körpergröße 16px ist, um unsere 36px zu konvertieren So wird unser Maßstab mit der obigen Methode konvertiert: Einige dieser Werte können etwas komplexer werden, aber haben Sie keine Angst, mit den Dezimalstellen so genau wie möglich zu sein. Browser geben immer ihr Bestes, um die genauen Werte zu rendern. Spitze: Es ist oft nützlich, sich in den Kommentaren eine Notiz zu machen, um sich daran zu erinnern, wie Sie die einzelnen Werte berechnet haben. Die Nummer Eins, die die meisten Leute mit Ems haben, kommt von Komplikationen, die durch Kaskadierung entstehen. Ein em-Wert ist relativ zum Wert des nächstgelegenen Elternteils, der versehentlich Dinge durcheinander bringen kann, wenn Sie nicht aufpassen. Schauen Sie sich die folgende CSS an, die darauf abzielt, Anker und Absätze gleich groß zu machen: Schauen Sie sich jetzt dieses unschuldige Markup an: Wie zu erwarten, erscheint alles gut im Browser. Sowohl der Absatz als auch der Anker werden bei 1.2em relativ zur Schriftgröße des Texts angezeigt Wenn wir jedoch einen zweiten Anker einführen würden innerhalb den Absatz, mal sehen was passiert: Der Anker im Absatz hat immer noch die Größe 1.2em, aber das ist jetzt relativ zum übergeordneten Absatz, der bereits 19.2px ist - Hinweis: Verschachtelte Listenelemente in Navigationsmenüs sind ein klassisches Beispiel dafür, wo das Kaskadieren außer Kontrolle geraten kann - achten Sie darauf. Es gibt keine Lösung dafür; Als letztes möchten Sie eine zusätzliche Regel hinzufügen, um die Größe der Anker zu verringern, die zufällig in Absätzen enthalten sind. Dies ist eine einfache Fahrt nach Migrainesville. Damit CSS und HTML immer gewartet werden können, ist Keep It Simple ™ wichtig. Das sollte helfen! Die Verwendung von Ems bedeutet zwar, dass Sie manchmal sehr viel darüber nachdenken müssen. Wenn Sie dies tun, werden Sie jedoch gezwungen sein, Ihren Akt zu bereinigen und effizient zu programmieren. Rems sind nützlich und verhalten sich genauso wie ems, ohne die Kaskadierung. Jedes Rem, das Sie definieren, ist relativ zur Schriftgradgröße. Die Unterstützung ist jedoch bei weitem nicht so gut, weshalb IE8 und älter einen pixelbasierten Fallback benötigen. Wir haben das CSS behandelt Es gibt keine feste Regel dafür, wie groß die Zeilenhöhe sein sollte, aber 1.5em ist ein guter Wert, um es auszuprobieren und macht Ihre Typografie angenehm lesbar. Spitze: Werfen Sie einen Blick auf Bryan Gruhlkes Vorschlag in den Kommentaren zur Verwendung von Einheitenwerten mit Zeilenhöhe… Hinweis: Die Dinge können kompliziert werden, wenn Sie versuchen, ein Grundlinienraster mit Ems festzulegen. Dies ist jedoch ein Thema für einen anderen Artikel. Wenn Sie sich einfallen lassen, Ihr Layout in Bezug auf die Schriftgröße flexibel zu gestalten, werden Sie feststellen, dass Sie beim Anordnen von Elementen auf der Seite immer weniger Pixel benötigen. Wenn es sich um flüssige Layouts handelt, sollten Sie% -Werte verwenden, um die Breite eines bestimmten Elements zu bestimmen. Bei der Bestimmung der horizontalen Abmessungen sollten keine Pixel zu sehen sein. Der vertikale Abstand kann mit ems sehr einfach erreicht werden; Auch hier geht es darum, mit Markup und Styling sauber zu sein. Betrachten Sie die Begrenzung der Margen auf Unterseite Ihrer Elemente, um die Verwaltung des vertikalen Rhythmus zu erleichtern. Wenn Sie eine definieren müssen Abgerundete Ecken eines Knopfes? Stellen Sie das ein Textschatten, Kastenschatten, dito. Und wenn Sie die Größe von ändern müssen alles unter bestimmten umständen wie kleinere viewports? Ändern Sie die Basisschriftgröße des Texts in der entsprechenden Medienabfrage Wie alle hervorragenden wissenschaftlichen Regeln muss es eine Ausnahme geben, um dies zu beweisen. In diesem Fall fällt mir ein gutes Szenario ein, in dem Sie möglicherweise Pixel benötigen. Grenzen. Wenn Sie in ems eine Rahmenbreite (oder die Höhe einer horizontalen Regel) definieren, wird sie möglicherweise so klein berechnet, dass der Browser sie nicht darstellen kann. In diesem Fall sehen Sie es einfach nicht. Bei horizontalen Regeln haben Sie möglicherweise Stile wie diese: Um zu verhindern, dass es verschwindet, wenn die Körpergröße zu klein ist, können Sie Folgendes hinzufügen: Dort. Ein Pixel Dangit. Rahmenbreiten können (leider) keinen Mindestwert haben, daher ist eine ähnliche Sicherung in diesem Fall nicht möglich. Stattdessen können Sie die Randbreitenwerte von verwenden Beginnen Sie noch heute mit ems! Ihr Inhalt ist typografisch fundiert, unabhängig davon, ob Sie es merken oder nicht. Auf Pixel zurückzugreifen, Zahlen zu konvertieren und im Hinblick auf feste Layouts zu denken, ist nicht einmal notwendig. Fangen Sie an, in ems zu denken, und Sie werden die Pixel bald ganz vergessen. Wenn Sie sich eine Situation vorstellen können, in der Sie Ems einfach nicht verwenden können, würde ich es gerne in den Kommentaren hören!
Ein Großbuchstabe M in Calendas Plus - der umgebende Platz ist 1 hoch und 1 breit Umwandlung von Pixeln
, wir bekommen:
Probleme beim Kaskadieren
(1,2 * 16px = 19,2px).
(1,2 * 19,2px = 23,04px). Dies gibt uns in einigen Teilen unserer Seite extra große Anker; kaum wünschenswert.Die Reparatur
Rems
Was ist mit Ems woanders??
Schriftgröße Eigentum; Ein vernünftiger erster Schritt in der Verwendung von ems, aber jetzt schauen wir uns das an Zeilenhöhe. Wenn es jemals eine Eigenschaft gab, die "keine Pixelwerte verwenden" ausruft, ist es die Zeilenhöhe. Die Zeilenhöhe eines typografischen Elements sollte (in einem früheren Artikel genauer beschrieben) sein immer relativ zur Schriftgröße sein. Wenn Sie eine Überschrift haben, deren Größe in ems festgelegt ist, deren Zeilenhöhe jedoch in Pixel eingestellt ist, kann dies zu hässlichen Überlappungen und einer schlechten visuellen Beziehung im Allgemeinen führen.
In diesem Fall ist 1.5em 1,5 * 18px Das ist 27px Strukturelemente
Höhe (das kann bei flexiblen Layouts schwierig sein), verwenden Sie auch ems. Vielleicht erstellen Sie eine Navigation und müssen die Höhe der Menü-Links festlegen. Diese sollten mit der Schriftgröße größer und kleiner werden.Grenzradius mit ems, so dass alles nahtlos skaliert.
Werfen Sie einen Blick auf diesen Codepen, um ein anschauliches Beispiel dafür zu erhalten, worüber ich hier spreche RWD
Körper Schriftgröße: 90%; und wham! Ihre gesamte Site wird in der Zeit skaliert, in der Sie auf "Enter" klicken.Ausnahmen
Schauen Sie sich diese kleine Demo an hr height: .02em; Grenze: keine; Hintergrund: weiß; Marge: 2em 0; Umriss: keine; Bildschirmsperre; Lösche beide; Breite: 100%;
min-Höhe: 1px;
dick, Mittel und dünn, Diese Werte skalieren jedoch nicht mit der Schriftgröße besser als Pixel.Fazit
Lesen Sie weiter
Accentsconagua