Ein Punkt entspricht 1,3333 Pixel bei 96 dpi. Die Beziehung wird durch die CSS-Spezifikation und nicht durch einen physischen Bildschirm festgelegt: Ein CSS-Pixel ist als 1/96 Zoll definiert und ein Punkt als 1/72, sodass das Verhältnis genau 96/72 beträgt.
h2.units
Der Punkt ist die traditionelle Einheit der Schriftgröße, exakt 1/72 Zoll, seit PostScript sie in den 1980er Jahren standardisiert hat. Der Pixel im Webdesign ist überhaupt kein Hardware-Pixel – die CSS-Spezifikation definiert einen Referenz-Pixel als den Sehwinkel von 1/96 Zoll auf Armeslänge, und Browser bilden dies dann auf das ab, was das Display tatsächlich hat. Auf einem hochauflösenden Bildschirm kann ein CSS-Pixel zwei oder drei Geräte-Pixel entsprechen, weshalb eine 16-Pixel-Schrift auf einem Telefon und einem Desktop-Monitor trotz stark unterschiedlicher Pixeldichten die gleiche physische Größe hat.
h2.factor
Der Faktor ist genau 96 ÷ 72 = 4/3 = 1,3333. Also sind 12 pt 16 px, 9 pt sind 12 px und 18 pt sind 24 px. Die 96 dpi-Angabe stammt von Microsofts Entscheidung in Windows, diese Dichte für die Bildschirmdarstellung anzunehmen, die die CSS-Spezifikation später als Referenz übernahm. Dies traf nie auf einen bestimmten Monitor zu; es war eine Konvention, die gewählt wurde, damit in Punkten angegebener Text auf einem typischen Display der 1990er Jahre in einer lesbaren Größe erschien.
h2.usage
Web- und Interface-Design, wo ein Designer in Punkte in einem druckorientierten Tool arbeitet und ein Entwickler es in Pixel implementiert. Styleguides, die Schrift in Punkten angeben, müssen übersetzt werden, und 12 pt Fließtext, der zu 16 px wird, ist die häufigste Umrechnung in diesem Bereich. Die Anpassung von Markenrichtlinien von Print zu Web läuft darüber. Beachten Sie, dass moderne CSS-Praxis rem-Einheiten gegenüber beiden bevorzugt, gerade weil sie mit der vom Benutzer gewählten Basisgröße skalieren, anstatt fest zu sein.