Rechnen Sie typografische Punkt in Pixel um

Der Punkt ist eine Einheit des Drucks. Ein Punkt misst 1/72 Zoll, also 0,3528 mm, und in dieser Größe geben Word, InDesign und Illustrator den Schriftgrad an. Das Pixel ist eine Einheit des Bildschirms und entspricht im Stylesheet 1/96 Zoll, also 0,2646 mm [1]. Die gesamte Umrechnung ist das Verhältnis dieser beiden Zahlen: 96 geteilt durch 72 ergibt 1,333.

Daraus entsteht das Paar, das jede Entwicklerin auswendig kennt: 12 pt sind 16 px. Sechzehn Pixel sind die Standardgröße für Text in jedem Browser und der Wert, den ein rem annimmt. Ein Dokument, das in Zwölf-Punkt gesetzt wurde, trägt damit exakt denselben Schriftgrad auf eine Webseite.

Der Umrechner eignet sich für Gestalterinnen, die ein Layout an die Entwicklung übergeben, für alle, die eine E-Mail-Signatur aufbauen, und für jeden, der eine Vorgabe in Punkt erhält und in einem Werkzeug arbeitet, das in Pixel rechnet.

Weiter unten finden Sie eine Tabelle mit 30 Schriftgrößen, eine Tabelle der Konturstärken, den Vergleich von fünf Punktsystemen sowie die Anleitung zum Umstellen der Einheit in Illustrator, Photoshop, InDesign, Affinity, Inkscape, Figma und Word. Den umgekehrten Weg übernimmt der Umrechner von Pixel in Punkt.

Die Formel hat eine Gestalt: Pixel = Punkt × 96 ÷ 72, also die Multiplikation mit 4/3. In die andere Richtung multiplizieren Sie Pixel mit 0,75. Achtzehn Punkt ergeben 24 px, vierundzwanzig Punkt ergeben 32 px, und 36 pt ergeben glatte 48 px.

Zweiundsiebzig Punkt sind genau ein Zoll, also entsprechen 72 pt gleichzeitig 96 px und 25,4 mm. Diese Gleichheit ist eine bequeme Kontrolle beim Rechnen im Kopf. Sie gilt auch nach unten: 0,75 pt sind exakt ein Pixel, und 1,5 pt sind zwei.

Woher stammt nun ausgerechnet die 96? Das W3C hat festgelegt, dass ein Zoll im Stylesheet 96 Pixel umfasst, und das Referenzpixel als den Sehwinkel eines einzelnen Pixels auf einem Bildschirm mit 96 dpi beschrieben, betrachtet aus einer Armlänge Entfernung [1]. Die Zahl selbst ist älter als das Web und geht auf eine Entscheidung zurück, die in den achtziger Jahren bei Microsoft fiel.

Der Bildschirm des ersten Macintosh zeigte 512 × 342 Bildpunkte bei 72 PPI, einer Dichte, die so gewählt war, dass ein Pixel auf einen typografischen Punkt fällt. PC-Monitore lagen damals in ähnlicher Größenordnung, doch bei Microsoft fiel auf, dass ein Monitor etwa ein Drittel weiter vom Auge entfernt steht als ein Blatt Papier in der Hand, Bildschirmtext also größer ausfallen muss. Windows meldete daraufhin eine um genau dieses Drittel erhöhte Dichte: für Bildschirme mit realen 72 PPI gab es 96 PPI an [2]. Text wurde lesbar, Elf-Punkt unter Windows entsprach Acht-Punkt auf dem Macintosh, und die 96 blieb im System, dann in den Browsern und schließlich im CSS-Standard.

Über weite Strecken der Druckgeschichte bedeutete der Punkt in jedem Land etwas anderes, und jede Schriftgießerei führte eigene Maße. Pierre Simon Fournier brachte 1737 als Erster Ordnung hinein und schnitt seine Stempel im Maßstab von 72 Punkt auf den Pariser Zoll. Ein halbes Jahrhundert später band François-Ambroise Didot seinen Punkt an 1/864 des pied du roi, woraus 0,376065 mm bei 20 °C wurden. Auf einen Meter kommen damit 2660 Punkt [3].

Der Didot-Punkt wurde zum Maßsystem des gesamten deutschsprachigen Raums. Zwölf Didot-Punkt heißen Cicero und messen 4,512 mm; vier Cicero ergeben eine Konkordanz, also 48 Punkt oder glatte 18 mm. Der Name Cicero stammt aus Venedig: Johannes und Wendelin von Speyer druckten 1469 die Briefsammlung Epistolae ad familiares von Marcus Tullius Cicero in genau diesem Schriftgrad [3].

Beide Einheiten sind bis heute im Programm: Die Linealeinheiten von InDesign führen neben Punkt und Pixel auch Cicero, Agaten und Pica. Eine Agate misst 5,5 Punkt, rund 1,94 mm, und stammt aus dem Zeitungssatz für Kleinanzeigen und Ergebnislisten.

Den runden Wert brachte erst PostScript. Adobe legte 1984 fest, dass ein Punkt genau 1/72 Zoll misst, und Apple baute darauf die Typografie des Macintosh auf, dessen Bildschirm damals 72 Pixel je Zoll zeigte. Mit diesem Punkt rechnet der Umrechner oben, und seine Definition wiederholt der CSS-Standard [1]. Zwölf solcher Punkte ergeben ein Pica, und das sind bei 96 DPI genau 16 Pixel und bei 300 DPI 50 — diesen Schritt rechnet der Umrechner von Pica in Pixel.