Längen- und Distanzkonverter Massenkonverter Konverter für Volumenmaße von Massenprodukten und Lebensmitteln Flächenkonverter Konverter für Volumen und Maßeinheiten in kulinarischen Rezepten Temperaturkonverter Konverter für Druck, mechanische Spannung, Young-Modul Konverter für Energie und Arbeit Konverter für Leistung Konverter für Kraft Konverter für Zeit, lineare Geschwindigkeit, Konverter für flache Winkel, thermischer Wirkungsgrad und Kraftstoffeffizienz, Konverter für Zahlen in verschiedenen Zahlensystemen, Konverter für Maßeinheiten für Informationsmengen, Währungskurse, Damenbekleidungs- und Schuhgrößen, Herrenbekleidungs- und Schuhgrößen, Winkelgeschwindigkeits- und Rotationsfrequenzkonverter, Beschleunigungskonverter Konverter für Winkelbeschleunigung, Konverter für Dichte, Konverter für spezifisches Volumen, Konverter für Trägheit, Konverter für Kraftmoment, Konverter für Drehmoment, Konverter für spezifische Verbrennungswärme (nach Masse), Konverter für Energiedichte und spezifische Verbrennungswärme (nach Volumen), Konverter für Temperaturdifferenz, Konverter für Wärmeausdehnungskoeffizient, Konverter für thermischen Widerstand Konverter für Wärmeleitfähigkeit Konverter für spezifische Wärmekapazität Konverter für Energieexposition und Wärmestrahlungsleistung Konverter für Wärmestromdichte Konverter für Wärmeübertragungskoeffizient Konverter für Volumendurchfluss Konverter für Massendurchfluss Konverter für Molarfluss Konverter für Massenflussdichte Konverter für Molkonzentration Konverter für Massenkonzentration in Lösung Dynamisch (absolut) Viskositätskonverter Kinematischer Viskositätskonverter Oberflächenspannungskonverter Dampfdurchlässigkeitskonverter Wasserdampfströmungsdichtekonverter Schallpegelkonverter MKonverter Schalldruckpegel (SPL) Schalldruckpegelkonverter mit wählbarem Referenzdruck Luminanzkonverter Lichtintensitätskonverter Beleuchtungsstärkekonverter Computergrafik-Auflösungskonverter Frequenz und Wellenlängenkonverter, Dioptrienstärke und Brennweite, Dioptrienstärke und Linsenvergrößerung (×), Konverter für elektrische Ladung, Konverter für lineare Ladungsdichte, Konverter für Oberflächenladungsdichte, Konverter für Volumenladungsdichte, Konverter für elektrischen Strom, Konverter für lineare Stromdichte, Konverter für Oberflächenstromdichte, Konverter für elektrische Feldstärke, Konverter für elektrostatisches Potential und Spannung Konverter für elektrischen Widerstand Konverter für elektrischen Widerstand Konverter für elektrische Leitfähigkeit Konverter für elektrische Leitfähigkeit Konverter für elektrische Kapazität Induktivitätskonverter American Wire Gauge Converter Pegel in dBm (dBm oder dBm), dBV (dBV), Watt usw. Einheiten Magnetomotorischer Kraftwandler Spannungswandler Magnetfeld Magnetischer Flusswandler Magnetischer Induktionswandler Strahlung. Konverter der absorbierten Dosisleistung ionisierender Strahlung Radioaktivität. Konverter für radioaktiven Zerfall Strahlung. Belichtungsdosiskonverter Strahlung. Absorbierte Dosis-Konverter Dezimalpräfix-Konverter Datenübertragung Typografie- und Bildverarbeitungseinheiten-Konverter Holzvolumen-Einheiten-Konverter Berechnung der Molmasse Periodensystem der chemischen Elemente von D. I. Mendeleev

1 Pixel (X) = 0,752812499999996 Punkte (typografisch)

Ursprünglicher Wert

Umgerechneter Wert

Twip Meter Zentimeter Millimeter Symbol (X) Symbol (Y) Pixel (X) Pixel (Y) Zoll Lötpunkt (Computer) Lötpunkt (typografisch) Punkt NIS/PostScript-Punkt (Computer) Punkt (typografisch) em Strich cicero em Strichpunkt Dido

Amerikanischer Drahtquerschnitt

Erfahren Sie mehr über die in der Typografie und digitalen Bildbearbeitung verwendeten Einheiten

allgemeine Informationen

Typografie ist das Studium der Wiedergabe von Text auf einer Seite und der Verwendung von Größe, Schriftart, Farbe und anderen visuellen Merkmalen, um den Text leichter lesbar und schön aussehen zu lassen. Die Typografie entstand Mitte des 15. Jahrhunderts mit dem Aufkommen von Druckmaschinen. Die Platzierung von Text auf einer Seite beeinflusst unsere Wahrnehmung – je besser er platziert ist, desto wahrscheinlicher ist es, dass der Leser versteht und sich daran erinnert, was im Text steht. Eine minderwertige Typografie hingegen erschwert die Lesbarkeit des Textes.

Schriftarten werden in verschiedene Typen unterteilt, beispielsweise Serifen- und serifenlose Schriftarten. Serifen sind ein dekoratives Element einer Schriftart, aber in manchen Fällen erleichtern sie die Lesbarkeit des Textes, manchmal passiert aber auch das Gegenteil. Der erste Buchstabe (blau) im Bild ist in der Serifenschrift Bodoni. Eine der vier Serifen ist rot umrandet. Der zweite Buchstabe (gelb) ist in der serifenlosen Schriftart Futura geschrieben.

Es gibt viele Klassifizierungen von Schriftarten, beispielsweise nach dem Zeitpunkt ihrer Entstehung oder dem zu einer bestimmten Zeit beliebten Stil. Ja, es gibt Schriftarten alter Stil– eine Gruppe, die die ältesten Schriftarten umfasst; neuere Schriftarten Übergangsstil; moderne Schriftarten, entstanden nach den Übergangsschriften und vor den 1820er Jahren; und endlich, neue Schriftarten oder modernisierte alte Schriftarten, also Schriftarten, die nach altem Vorbild zu einem späteren Zeitpunkt erstellt wurden. Diese Klassifizierung wird hauptsächlich für Serifenschriften verwendet. Es gibt andere Klassifizierungen basierend auf Aussehen Schriftarten, wie die Stärke der Linien, der Kontrast zwischen dünnen und dicken Linien und die Form der Serifen. Die heimische Presse hat ihre eigenen Klassifizierungen. Bei der Klassifizierung nach GOST werden Schriftarten beispielsweise nach dem Vorhandensein und Fehlen von Serifen, der Verdickung der Serifen, dem sanften Übergang von der Hauptlinie zur Serife, der Rundung der Serife usw. gruppiert. In Klassifizierungen russischer und anderer kyrillischer Schriftarten gibt es häufig eine Kategorie für altkirchenslawische Schriftarten.

Die Hauptaufgabe der Typografie besteht darin, die Größe der Buchstaben anzupassen und geeignete Schriftarten auszuwählen, um den Text so auf der Seite zu platzieren, dass er gut lesbar ist und schön aussieht. Es gibt eine Reihe von Systemen zur Bestimmung der Schriftgröße. In einigen Fällen bedeutet die gleiche Größe der Buchstaben in typografischen Einheiten, wenn sie in unterschiedlichen Schriftarten gedruckt werden, nicht die gleiche Größe der Buchstaben selbst in Zentimetern oder Zoll. Diese Situation wird im Folgenden ausführlicher beschrieben. Trotz der dadurch verursachten Unannehmlichkeiten hilft die aktuelle Schriftgröße Designern dabei, Text sauber und schön auf der Seite anzuordnen. Dies ist besonders wichtig im Layout.

Beim Layout müssen Sie nicht nur die Größe des Textes kennen, sondern auch die Höhe und Breite digitaler Bilder, damit diese auf die Seite passen. Die Größe kann in Zentimetern oder Zoll ausgedrückt werden, es gibt jedoch auch eine Einheit, die speziell zur Messung der Größe von Bildern entwickelt wurde: Pixel. Ein Pixel ist ein Element eines Bildes in Form eines Punktes (oder Quadrats), aus dem es besteht.

Definition von Einheiten

Die Größe von Buchstaben wird in der Typografie durch das Wort „Größe“ angegeben. Es gibt verschiedene Systeme zur Messung der Punktgröße, die meisten basieren jedoch auf der Einheit „Löten“ im amerikanischen und englischen Maßsystem (englisch pica) bzw. „cicero“ im europäischen Maßsystem. Der Name „Löten“ wird manchmal als „Spitze“ geschrieben. Es gibt verschiedene Arten des Lötens, die sich geringfügig in der Größe unterscheiden. Wenn Sie also Löten verwenden, sollten Sie sich daran erinnern, welches Löten Sie meinen. Ursprünglich wurde Cicero im heimischen Druck verwendet, mittlerweile ist aber auch das Löten üblich. Cicero und Computerlöten sind in der Größe ähnlich, aber nicht gleich. Manchmal wird Cicero oder Löten direkt zur Messung verwendet, um beispielsweise die Größe von Rändern oder Spalten zu bestimmen. Häufiger, insbesondere bei Textmessungen, werden angelötete Einheiten wie Druckpunkte verwendet. Die Lotgröße wird in verschiedenen Systemen unterschiedlich bestimmt, wie unten beschrieben.

Buchstaben werden wie in der Abbildung gezeigt gemessen:

Andere Einheiten

Obwohl das Computerlöten nach und nach andere Einheiten ersetzt und möglicherweise die bekannteren Ciceros ersetzt, werden gleichzeitig auch andere Einheiten verwendet. Eine dieser Einheiten ist Amerikanisches Löten Es entspricht 0,166 Zoll oder 2,9 Millimetern. Es gibt auch Drucklöten. Es entspricht dem amerikanischen.

Einige inländische Druckereien und in der Literatur über das Drucken verwenden immer noch Pica- eine Einheit, die vor dem Aufkommen des Computerlötens in Europa (mit Ausnahme von England) weit verbreitet war. Ein Cicero entspricht 1/6 eines französischen Zolls. Der französische Zoll unterscheidet sich geringfügig vom modernen Zoll. In modernen Einheiten entspricht ein Cicero 4,512 Millimeter oder 0,177 Zoll. Dieser Wert entspricht nahezu dem Löten am Computer. Ein Cicero entspricht 1,06 Computerlöten.

Runde Einbettung (em) und halbrunde Einbettung (en)

Die oben beschriebenen Einheiten bestimmen die Höhe von Buchstaben, es gibt aber auch Einheiten, die die Breite von Buchstaben und Symbolen angeben. Runde und halbkreisförmige Abstände sind solche Einheiten. Der erste Typ ist auch als em oder em bekannt, abgeleitet vom englischen Wort für den Buchstaben M. Seine Breite entsprach in der Vergangenheit der des englischen Buchstabens. Ebenso wird ein halbkreisförmiges Empat, das einer halben Runde entspricht, als En bezeichnet. Derzeit werden diese Werte nicht anhand des Buchstabens M ermittelt, da dieser Buchstabe auch bei gleicher Größe in verschiedenen Schriftarten unterschiedliche Größen haben kann.

Im Russischen werden der Gedankenstrich und der Gedankenstrich verwendet. Um Bereiche und Intervalle anzugeben (z. B. in der Phrase: „Nehmen Sie 3-4 Esslöffel Zucker“), wird ein End-Dash verwendet, auch End-Dash genannt. Der Bindestrich wird im Russischen in allen anderen Fällen verwendet (zum Beispiel in der Phrase: „Der Sommer war kurz und der Winter war lang“). Es wird auch Em-Dash genannt.

Probleme mit modernen Einheitensystemen

Vielen Designern gefällt das aktuelle System typografischer Einheiten, das auf Rationen oder Ciceros und typografischen Punkten basiert, nicht. Das Hauptproblem besteht darin, dass diese Einheiten nicht an das metrische oder imperiale Maßsystem gebunden sind und gleichzeitig in Verbindung mit Zentimetern oder Zoll verwendet werden müssen, in denen die Größe von Abbildungen gemessen wird.

Darüber hinaus können Buchstaben in zwei verschiedenen Schriftarten sehr unterschiedlich groß sein, auch wenn sie an den typografischen Stellen gleich groß sind. Dies liegt daran, dass die Buchstabenhöhe als Höhe des Tippfelds gemessen wird, die nicht direkt mit der Höhe des Zeichens zusammenhängt. Dies macht es für Designer schwierig, insbesondere wenn sie mit mehreren Schriftarten im selben Dokument arbeiten. Die Abbildung zeigt ein Beispiel für dieses Problem. Die Größe aller drei Schriftarten in typografischen Punkten ist gleich, die Höhe des Zeichens ist jedoch überall unterschiedlich. Um dieses Problem zu lösen, schlagen einige Designer vor, den Punkt als Höhe des Zeichens zu messen.

Sie können die Länge in CSS in verschiedenen Einheiten angeben. Einige von ihnen stammen aus der typografischen Tradition, wie Punkt (pt) und Pica (pc), andere, z. Zentimeter (cm) und Zoll (in) sind uns im alltäglichen Gebrauch geläufig. Es gibt auch eine „magische“ Einheit, die speziell für CSS erfunden wurde: px. Bedeutet das, dass unterschiedliche Eigenschaften unterschiedliche Einheiten erfordern?

Nein, Maßeinheiten beziehen sich nicht auf Eigenschaften, sondern stehen in direktem Zusammenhang mit dem Anzeigemedium: Bildschirm oder Papier.

Beliebige Maßeinheiten können überall verwendet werden. Eine Eigenschaft mit einem Wert in Pixeln (Rand: 5 Pixel) akzeptiert auch Werte in Zoll oder Zentimetern (Rand: 1,2 Zoll; Rand: 0,5 cm) und umgekehrt.

Im Allgemeinen ist es jedoch besser, unterschiedliche Einheitensätze für die Anzeige auf dem Bildschirm und für den Ausdruck zu verwenden. Tipps zur Verwendung von Einheiten sind in der folgenden Tabelle zusammengefasst:

Das Verhältnis zwischen den absoluten Einheiten ist: 1 Zoll = 2,54 cm = 25,4 mm = 72 pt = 6 Stück

Wenn Sie ein Lineal zur Hand haben, können Sie die Genauigkeit Ihres Geräts überprüfen. Hier ist ein 1 Zoll (2,54 cm) hohes Rechteck:
72pt
↓

Die sogenannten absoluten Einheiten (cm, mm, in, pt und pc) in CSS bedeuten dasselbe wie überall sonst, allerdings nur, wenn das Ausgabegerät eine ausreichend hohe Auflösung hat. Bei einem Laserdrucker muss 1 cm genau 1 Zentimeter entsprechen. Auf Geräten mit niedriger Auflösung wie Computerbildschirmen ist dies jedoch für CSS nicht erforderlich. In der Tat, verschiedene Geräte und verschiedene CSS-Implementierungen neigen dazu, sie unterschiedlich darzustellen. Es ist besser, diese Einheiten für hochauflösende Geräte, insbesondere zum Drucken, zu belassen. Auf Computerbildschirmen und mobile Geräte Ah, es kann sein, dass es nicht wie erwartet ausgeht.

In der Vergangenheit erforderte CSS, dass absolute Einheiten auch auf Computerbildschirmen korrekt angezeigt wurden. Da es jedoch mehr fehlerhafte als korrekte Implementierungen gab und keine Verbesserungen erwartet wurden, verzichtete CSS 2011 auf diese Anforderung. Derzeit sind absolute Einheiten nur erforderlich, um beim Drucken und auf Geräten mit hoher Auflösung korrekt zu funktionieren.

CSS gibt nicht genau an, was unter „hoher Auflösung“ zu verstehen ist. Aber da billige Drucker heute mindestens 300 dpi haben, und gute Bildschirme Bei etwa 200 dpi liegt die Grenze höchstwahrscheinlich irgendwo zwischen diesen Werten.

Ein weiterer Grund, nirgendwo außer im Druck absolute Einheiten zu verwenden: Wir betrachten unterschiedliche Bildschirme aus unterschiedlichen Entfernungen. 1 Zentimeter sieht auf einem Desktop-Computerbildschirm klein aus. Aber auf einem mobilen Bildschirm, direkt vor Ihren Augen, ist das eine ganze Menge. Es ist besser, stattdessen relative Einheiten zu verwenden, z. B. em.

Die Einheiten em und ex hängen von der Schriftgröße ab und können für jedes Element im Dokument unterschiedlich sein. Die Einheit em ist einfach die Schriftgröße. In einem Element, dem eine Schriftart von 2 Zoll zugewiesen wird, bedeutet 1em diese 2 Zoll. Die Angabe von Abmessungen (z. B. für den Innenabstand) in em bedeutet, dass sie relativ zur Schriftart angegeben werden, und unabhängig davon, ob die Schriftart des Benutzers groß (z. B. auf einem großen Bildschirm) oder klein (z. B. auf einem mobilen Gerät) ist, bleiben diese Abmessungen proportional. Deklarationen wie text-indent: 1.5em und margin: 1em in CSS erfreuen sich großer Beliebtheit.

Das Ex-Gerät wird selten verwendet. Es gibt die Abmessungen an, die ausgehend von der x-Höhe der Schriftart gemessen werden sollten. Die X-Höhe ist grob gesagt die Höhe von Kleinbuchstaben wie z A, C, M, oder Ö. Schriftarten mit derselben Größe (und dementsprechend demselben Em) können einen großen Unterschied in der Größe von Kleinbuchstaben aufweisen. Wenn es wichtig ist, dass beispielsweise ein Bild der X-Höhe entspricht, steht Ihnen die Ex-Einheit zur Verfügung Service.

Die px-Einheit in CSS ist magisch. Es bezieht sich nicht auf die aktuelle Schriftart, aber normalerweise auch nicht auf physikalische Zentimeter oder Zoll. Eine px-Einheit ist definiert als etwas Kleines, aber Sichtbares, d. h. Eine 1 Pixel dicke horizontale Linie könnte mit scharfen Kanten gerendert werden (ohne Anti-Aliasing). Was als klar, klein und sichtbar gilt, hängt vom Gerät ab und davon, wie Sie es verwenden: ob Sie es direkt vor Ihre Augen halten, wie Handy, auf Armeslänge entfernt, wie ein Monitor, oder irgendwo dazwischen, so E-Book? Daher ist px per Definition keine feste Länge, sondern etwas, das vom Gerätetyp und seiner normalen Verwendung abhängt.

Um zu verstehen, warum die px-Einheit so ist, wie sie ist, stellen Sie sich einen CRT-Monitor aus den 1990er Jahren vor: Der kleinste Punkt, den er anzeigen konnte, war etwa 1/100 Zoll (0,25 mm) oder etwas größer. Die px-Einheit hat ihren Namen von diesen Bildschirmpixeln.

Aktuelle Geräte können prinzipiell kleinere, klare Punkte darstellen (obwohl diese ohne Lupe möglicherweise schwer zu erkennen sind). Aber Dokumente aus dem letzten Jahrhundert, die px in CSS verwendeten, sehen unabhängig vom Gerät gleich aus. Insbesondere Drucker können Linien deutlich dünner als 1 Pixel darstellen, aber selbst auf Druckern sieht eine 1 Pixel-Linie fast genauso aus wie auf einem Monitor. Geräte ändern sich, aber die px-Einheit sieht immer gleich aus.

Tatsächlich erfordert CSS, dass 1 Pixel in jeder Druckausgabe genau 1/96 Zoll entspricht. CSS geht davon aus, dass Drucker im Gegensatz zu Bildschirmen keine unterschiedlichen Pixelgrößen benötigen, um klare Linien anzuzeigen. Daher sieht px beim Drucken nicht nur unabhängig vom Gerät gleich aus, sondern wird auch mit demselben Wert gemessen (genau wie die Einheiten cm, pt, mm, in und pc, wie erläutert).

CSS gibt außerdem an, dass Bitmap-Bilder (z. B. Fotos) standardmäßig im Maßstab 1 Bildpixel mal 1 Pixel gerendert werden. Ein Foto mit einer Auflösung von 600 x 400 ist 600 Pixel breit und 400 Pixel hoch. Daher sind die Pixel des Fotos nicht an die Pixel des Ausgabegeräts gebunden (die sehr klein sein können), sondern an px-Einheiten. Dadurch können Sie Bilder genau an anderen Dokumentelementen ausrichten, solange Sie in Ihren Stilen px-Einheiten anstelle von pt , cm usw. verwenden.

Einer der verwirrendsten Aspekte CSS ist die Anwendung Schriftgröße Attribut zur Textskalierung. Mithilfe von CSS können Sie die Textgröße im Browser mithilfe von vier verschiedenen Maßeinheiten ändern. Welche dieser vier Einheiten eignet sich am besten für das Web? Diese Frage hat zu verschiedenen Diskussionen und Kritik geführt. Eine eindeutige Antwort zu finden ist schwierig, da die Frage selbst komplex ist.

Lernen Sie die Einheiten kennen

1. „Ems“ (em): „em“ ist eine skalierbare Einheit, die in Webdokumenten verwendet wird. „em“ entspricht der aktuellen Schriftgröße. Wenn die Schriftgröße im Dokument beispielsweise 12pt beträgt, entspricht 1em 12pt. „em“ ist von Natur aus skalierbar, sodass 2em 24pt, 0,5em 6pt usw. entspricht. Die Verwendung von „em“ wird in Webdokumenten aufgrund seiner Skalierbarkeit und seiner Nützlichkeit auf mobilen Geräten immer beliebter.
2. Pixel (px): „px“ sind Einheiten fester Größe, die auf Bildschirmen verwendet werden (z. B. zum Lesen auf einem Computerbildschirm). Ein Pixel entspricht einem Punkt auf Ihrem Computerbildschirm (dem kleinsten Element der Bildschirmauflösung). Viele Webdesigner verwenden px in Webdokumenten, um eine pixelgenaue Darstellung ihrer Website bei der Anzeige in einem Browser zu erreichen. Eines der Probleme bei der Verwendung von px besteht darin, dass diese Einheiten keine Skalierung für sehbehinderte Leser oder mobile Geräte ermöglichen.
3. Punkte (pt): „pt“, traditionell in Printmedien verwendet (alles, was auf Papier gedruckt werden muss usw.). Ein „pt“ entspricht 1/72 Zoll. „pt“ haben wie „px“ eine feste Einheitsgröße und können nicht skaliert werden.
4. Prozente (%): Die Prozenteinheiten sind bis auf einige wesentliche Unterschiede denen von „em“ ähnlich. Erstens beträgt die aktuelle Schriftgröße 100 % (d. h. 12pt = 100 %). Durch die Verwendung von „%“ wird Ihr Text vollständig für mobile Geräte skalierbar und benutzerfreundlich (Barrierefreiheit).

Was ist also der Unterschied?

Der Unterschied zwischen den Schriftgrößeneinheiten wird leicht zu verstehen sein, wenn Sie sie in Aktion sehen. Typischerweise ist 1em = 12pt = 16px = 100 %. Sehen wir uns anhand dieser Schriftgrößen an, was passiert, wenn Sie die Basisschriftgröße (mithilfe der CSS-Textauswahl) von 100 % auf 120 % erhöhen.

Ändern der Schriftgröße von 100 % auf 120 %.

Wie Sie sehen können, haben „em“ und „%“ die Schriftgröße erhöht, während dies bei „px“ und „pt“ nicht der Fall war. Das Festlegen einer absoluten Größe für Ihren Text mag einfach sein, aber für Ihre Besucher ist es viel besser, skalierbaren Text zu verwenden, der auf jedem Gerät oder Computer angezeigt werden kann. Aus diesem Grund werden für Webdokumenttexte vorzugsweise die Einheiten „em“ und „%“ verwendet.

„em“ vs. „%“

Wir haben herausgefunden, dass die Einheiten „px“ und „pt“ nicht die besten für Webdokumente sind, was uns dazu zwingt, „em“ und „%“ zu verwenden. Theoretisch sind die Einheiten „em“ und „%“ identisch, in der Praxis weisen sie jedoch geringfügige Unterschiede auf, die es zu berücksichtigen gilt.

Im obigen Beispiel haben wir Prozentsätze (im Body-Tag) als grundlegende Einheit für die Schriftgröße verwendet. Wenn Sie Ihre Basiseinheit für die Schriftgröße von „%“ in „em“ ändern (d. h. body (Schriftgröße: 1em;)), sollen merke den Unterschied nicht. Sehen wir uns an, was passiert, wenn „1em“ unsere Basiseinheit ist und wenn der Client die „Schriftgröße“ in seinen Browsereinstellungen ändert (viele Browser, wie z. B. Internet Explorer, verfügen über diese Option).

Die Schriftgröße, wenn der Client die Textgröße im Browser ändert.

Wenn die Textgröße im Client-Browser auf „mittel“ eingestellt ist, gibt es keinen erkennbaren Unterschied zwischen „em“ und „%“. Wenn der Parameter jedoch geändert wird, wird der Unterschied sehr groß. Bei der Einstellung „Kleinst“ ist „em“ viel kleiner als „%“, bei der Einstellung „Größte“ hingegen wird „em“ viel größer als „%“ angezeigt. Und während viele argumentieren, dass die Einheiten in „em“ wie beabsichtigt skaliert werden, wird der Text in „em“ in der Praxis zu dramatisch skaliert, was dazu führt, dass der kleinste Text auf manchen Geräten unleserlich wird.

Urteil

Theoretisch sind „em“-Einheiten der neue und kommende Schriftgrößenstandard im Web, aber in der Praxis ermöglichen „%“-Einheiten eine konsistentere und komfortablere Textdarstellung für Benutzer. Beim Ändern von Client-Parametern änderte sich der Text in „%“ in angemessenen Proportionen, was es Designern ermöglicht, Lesbarkeit, Zugänglichkeit und Design beizubehalten.

Gewinner: Prozent (%).

Die Verwendung des Attributs „font-size“ zum Skalieren von Text ist einer der schwierigsten Aspekte des Stils in CSS. CSS bietet vier Einheiten zum Messen der Größe des in einem Webbrowser angezeigten Textes. Welche dieser vier Einheiten eignet sich am besten für Webdokumente? Dieses Thema hat viele Diskussionen und Kontroversen ausgelöst. Es ist schwierig, eine eindeutige Antwort auf eine solche Frage zu geben.

Kennenlernen der Einheiten

Ähm ( em): em ist eine skalierbare Einheit, die für Webdokumente verwendet wird. Ein Geviert entspricht der aktuellen Schriftgröße. Wenn die Schriftgröße des Dokuments beispielsweise 12pt beträgt, entspricht 1em 12pt. Da em skaliert ist, entspricht 2em 24pt, .5em entspricht 6pt usw. Aufgrund seiner Skalierbarkeit und hohen Kompatibilität mit mobilen Geräten wird em zunehmend in Webdokumenten verwendet.

Pixel ( px): Pixel sind Einheiten fester Größe, die für alles verwendet werden, was auf einem Computerbildschirm gelesen wird. Ein Pixel entspricht einem Punkt auf einem Computerbildschirm (dies ist der kleinste Teil der Bildschirmauflösung). Viele Webdesigner verwenden Pixel in Webdokumenten, um sicherzustellen, dass die Website bei der Anzeige in einem Browser pixelgenau erscheint. Das einzige Problem besteht darin, dass die Pixel nicht vergrößert werden können, um sehbehinderten Lesern gerecht zu werden, oder verkleinert werden können, um das Lesen auf mobilen Geräten zu erleichtern.

Punkte ( pt): Punkte werden traditionell in gedruckten Medien verwendet (d. h. für alles, was auf Papier gedruckt wird). Ein Punkt entspricht 1/72 Zoll. Punkte sind Pixeln sehr ähnlich, da sie eine feste Größe haben und nicht vergrößert/verkleinert werden können.

1. Prozentsatz ( % ): Percent ist em sehr ähnlich, abgesehen von einigen wesentlichen Unterschieden. Erstens beträgt die aktuelle Schriftgröße 100 % (d. h. 12pt = 100 %). Mithilfe der Prozenteinheit können Sie Ihren Text vergrößern/verkleinern, um das Lesen zu erleichtern.

Was ist der Unterschied?

Der Unterschied zwischen diesen Einheiten lässt sich anhand konkreter Beispiele leicht verstehen. So verhalten sie sich zueinander: 1em = 12pt = 16px = 100 %. Sehen wir uns an, was passiert, wenn wir die Hauptschriftgröße (mithilfe des Body-CSS-Selektors) von 100 % auf 120 % erhöhen.

Wie Sie sehen können, erhöhen sich Ems und Prozentsatz mit zunehmender Grundschriftgröße, Pixel und Punkte jedoch nicht. Es ist einfach, eine absolute Größe für Ihren Text zu verwenden, aber es ist viel einfacher, skalierbaren Text zu verwenden, der auf jedem Gerät angezeigt wird. Daher ist es vorzuziehen, für den Text eines Webdokuments die Einheiten Em und Prozent zu verwenden.

EM oder Prozentsatz?

Wir haben festgestellt, dass Punkt und Pixel nicht die besten Einheiten für Webdokumente sind. Also bleiben uns Em und Percent. Theoretisch sind Em und Prozent die gleichen Einheiten, in der Praxis gibt es jedoch geringfügige Unterschiede zwischen ihnen, die nicht ignoriert werden können.

Im obigen Beispiel haben wir die Einheit „Prozentsatz“ als Basisschriftgröße (für das Body-Tag) verwendet. Wenn Sie die Basisschriftgröße von Percent auf Em ändern (d. h. body ( font-size: 1em; ) ), werden Sie wahrscheinlich keinen Unterschied bemerken. Sehen wir uns an, was passiert, wenn die Schriftgröße des Textkörpers 1em beträgt und wenn der Client die Einstellung „Textgröße“ des Browsers ändert (diese Einstellung ist in einigen Browsern wie Internet Explorer verfügbar).

Wenn die Textgröße im Client-Browser auf „Mittel“ eingestellt ist, gibt es keinen Unterschied zwischen Em und Percent. Wenn Sie diese Einstellung jedoch ändern, wird der Unterschied deutlich spürbar. Bei der Einstellung „Kleinst“ sind die Ems viel kleiner als die Prozente. Und bei der Einstellung „Größte“ ist das Gegenteil der Fall – Em ist viel größer als Prozent. Man könnte sagen, dass Em-Einheiten so skaliert sind, wie sie sein sollten, aber in der Praxis wird dieser Text zu stark skaliert, und auf manchen Geräten wird der kleinste Text unleserlich.

Abschluss

Theoretisch ist die Einheit Em der neue Standard für Schriftgrößen in Webdokumenten, in der Praxis zeigt sich jedoch, dass die Einheit Prozent benutzerfreundlicher ist. Wenn sich Clienteinstellungen ändern, wird Text, der die Einheit „Prozent“ verwendet, entsprechend skaliert, sodass Designer die Lesbarkeit, Zugänglichkeit und das visuelle Design beibehalten können.

Gewinner: Prozentsatz (%).

Wenn ich ein neues Design erstelle, verwende ich normalerweise Prozentsätze für das Körperelement (body (font-size: 62,5%; )) und skaliere dann mit ems weiter. Solange die Texteinstellungen auf „Prozentsatz“ eingestellt sind, können Sie für alle anderen CSS-Regeln und -Selektoren entweder „Prozentsatz“ oder „Em“ verwenden und dennoch die Vorteile der Verwendung von „Prozentsatz“ als primäre Schriftgröße nutzen.

In den letzten Jahren hat sich diese Praxis im Webdesign stark durchgesetzt.
Pixel werden jetzt als gültige Einheiten für die Schriftgröße verwendet (Benutzer können die „Zoom“-Funktion des Browsers verwenden, um kleinen Text zu lesen). Allerdings wird die Pixelnutzung aufgrund mobiler Geräte mit Bildschirmen mit sehr hoher Pixeldichte problematisch (einige). Android-Geräte und iPhone haben eine Dichte von 200–300 Pixel pro Zoll, was die Lesbarkeit von 11- und 12-Pixel-Schriftarten erschwert. Daher verwende ich weiterhin „Prozentsatz“ als Hauptschriftgröße für Webdokumente.