PT-in-PX-Umrechner

Der PT-in-PX-Umrechner wandelt Punkte in Pixel – und Pixel zurück in Punkte – für Bildschirm- und Druckarbeiten um. Die meisten Umrechner liefern eine einzige Zahl auf Grundlage des festen CSS-Verhältnisses 1pt = 1.3333px. Diese Antwort ist in einem Browser korrekt und fast überall sonst falsch, weil ein Punkt eine physische Einheit ist und die Anzahl der darin enthaltenen Pixel von der Ausgabeauflösung abhängt. Dieses Tool liefert beides: den CSS-Wert, den ein Browser tatsächlich darstellt, und den Geräte-Pixel-Wert bei 72, 150, 300, 600 oder jeder benutzerdefinierten DPI, außerdem die tatsächliche physische Größe in Millimetern und Zoll auf einem echten Lineal.

PT-in-PX-Formel

Ein Punkt ist exakt als ein Zweiundsiebzigstel Zoll definiert. Ein Zoll enthält so viele Pixel, wie die Ausgabeauflösung vorgibt. Zusammengenommen ergibt sich daraus die Umrechnung:

Im Web ist die Auflösung keine Variable. Die CSS-Spezifikation legt 1in = 96px per Definition fest, daher verwendet der Browser immer 96 und die Formel vereinfacht sich zu einer Konstanten:

Darum sind 12pt in jedem Browser auf jedem Gerät 16px, unabhängig davon, ob es sich um ein Laptop-Panel mit 1× oder einen Smartphone-Bildschirm mit 3× handelt. Der CSS-Pixel ist eine Referenzeinheit, kein Hardware-Pixel.

Ein Zoll, drei Namen

Am einfachsten lassen sich die Einheiten auseinanderhalten, wenn man sich merkt, dass sie alle dieselbe physische Strecke beschreiben. Jeder Balken unten ist genau einen Zoll breit:

PT-in-PX-Umrechnungstabelle

Die Webspalte ist die richtige für CSS. Die Spalte mit 300 DPI ist die richtige, wenn Sie ein PDF in ein Rasterbild exportieren, eine Druckdatei gestalten oder Text in einer zu druckenden Bitmap dimensionieren.

Warum dieselbe Punktgröße unterschiedliche Pixelzahlen ergibt

Das ist der eine Punkt, der die meisten Menschen verwirrt, daher lohnt es sich, ihn klar auszusprechen. Die physische Größe ändert sich nie: 12pt sind immer ein Sechstel Zoll. Was sich ändert, ist die Feinheit, mit der dieser Zoll abgetastet wird.

• 72 DPI — die historische Macintosh-Bildschirmauflösung, die genau so gewählt wurde, dass 1pt = 1px gilt. Sie ist in einigen älteren Bildpipelines noch der Standard, weshalb 12pt-Text manchmal enttäuschende 12 Pixel groß exportiert wird.
• 96 DPI — der Windows-Standard und die Referenzauflösung, auf die CSS festgelegt ist. Das ist die Webantwort und die Auflösung, die Ihr Browser verwendet.
• 150 DPI — Entwurfsdruckqualität oder Großformatarbeiten, die aus einiger Entfernung gelesen werden sollen.
• 300 DPI — der Standard für kommerziellen Druck. Eine Bildunterschrift mit 12pt benötigt in einem Export mit 300 DPI eine Höhe von 50 Pixeln, nicht 16.
• 600 DPI — feine Liniengrafik, hochwertige Druckaufträge und Laserausgabe, bei der Haarlinien wichtig sind.

Wenn Sie jemals Bildmaterial in „richtiger Größe“ exportiert haben und feststellen mussten, dass der Text unscharf und pixelig ausfiel, ist dieses Verhältnis fast immer die Ursache: Das Layout wurde in Punkten gemessen und das Raster bei 72 oder 96 DPI statt bei 300 erzeugt.

Was eine Punktgröße tatsächlich misst

Eine Schrift mit 12pt ist kein 12 Punkte hoher sichtbarer Buchstabe. Die Punktgröße beschreibt das Geviertquadrat — das unsichtbare Entwurfsraster, auf dem eine Schrift gezeichnet wird. Wie viel von diesem Quadrat die Buchstaben einnehmen, hängt vollständig vom Schriftgestalter ab. Deshalb können zwei Schriften bei derselben Punktgröße sehr unterschiedlich groß wirken.

Sollten Sie pt oder px in CSS verwenden?

Für Bildschirmstile sollten Sie px oder rem verwenden. Punkte sind in CSS eine absolute Einheit, genau wie px, und haben daher denselben Nachteil für die Barrierefreiheit: In pt gesetzter Text ignoriert die Schriftgrößeneinstellung des Browsers. Die Verwendung von pt führt außerdem leicht zu Verwirrung, weil ein Kollege beim Lesen des Stylesheets annehmen könnte, dass damit physische Punkte auf dem Ausgabegerät gemeint sind, obwohl das nicht der Fall ist.

Wo pt wirklich sinnvoll ist, ist ein Druck-Stylesheet, weil die Ausgabe tatsächlich in Zoll gemessen wird:

@media print {
  body { font-size: 11pt; line-height: 1.45; }
  h1   { font-size: 24pt; }
  h2   { font-size: 18pt; }
  .no-print { display: none; }
}

Browser beziehen diese Punkte bei der Erstellung des Druckauftrags auf die tatsächliche Papiergröße. Dadurch wird ein 11pt-Fließtext auf der Seite wirklich als 11pt ausgegeben — genauso groß, wie es ein Textverarbeitungsprogramm erzeugen würde.

Ein Word- oder InDesign-Dokument ins Web umrechnen

1. Übernehmen Sie die Punktgrößen direkt aus dem Stylesheet des Dokuments — typischerweise 11pt Fließtext, 16pt Unterüberschriften und 24pt Überschriften.
2. Fügen Sie alle Werte auf einmal in das Wertefeld ein, durch Kommas getrennt, und lassen Sie die Auflösung auf 96.
3. Lesen Sie die CSS-Pixelspalte ab. 11pt werden zu 14.67px, 16pt zu 21.33px und 24pt zu 32px.
4. Runden Sie vor der Veröffentlichung auf eine saubere Skala. Drucktypografie toleriert ungewöhnliche Brüche; Web-Schriftgrößenskalen lesen sich bei ganzen oder halben Pixeln besser, daher werden aus 14.67px normalerweise 15px oder 16px.
5. Wandeln Sie die endgültigen Pixelwerte in rem um, wenn Ihr Designsystem relative Einheiten verwendet.

Verwandte absolute CSS-Einheiten

Punkte gehören zu einer kleinen Familie absoluter Einheiten, die CSS auf denselben Zoll mit 96 Pixeln bezieht. Wenn Sie die gesamte Familie kennen, werden Umrechnungen trivial:

• 1in = 96px = 72pt = 6pc = 25.4mm
• 1pc (Pica) = 12pt = 16px
• 1cm = 37.795px ≈ 28.35pt
• 1mm = 3.7795px ≈ 2.835pt
• 1Q (Viertelmillimeter) = 0.945px

So verwenden Sie diesen Umrechner

1. Richtung auswählen: pt → px oder px → pt.
2. Werte eingeben: eine Zahl oder eine vollständige, durch Kommas oder Leerzeichen getrennte Schriftskalierung (bis zu 20 Werte auf einmal). Nachgestellte Einheiten wie 12pt werden akzeptiert und ignoriert.
3. Ausgabeauflösung festlegen: 96 DPI für CSS und Web beibehalten oder einen Chip für 72, 150, 300 oder 600 DPI anklicken.
4. Umrechnen anklicken: Ergebnis, DPI-Vergleich, Vorschau in echter Punktgröße, Millimeterlineal und Referenzreihe ablesen.
5. CSS kopieren: Eine Schaltfläche kopiert jede font-size-Deklaration, wobei der ursprüngliche Punktwert in einem Kommentar erhalten bleibt.

Häufig gestellte Fragen

Wie rechne ich pt in px um?

Multiplizieren Sie den Punktwert mit der Ausgabeauflösung und teilen Sie durch 72, weil ein Punkt ein Zweiundsiebzigstel Zoll ist. Im Web ist die Auflösung auf 96 DPI festgelegt, daher gilt px = pt × 1.3333. Zum Beispiel sind 12pt 16px.

Wie viele Pixel sind 12pt?

In CSS und in jedem Browser sind 12pt genau 16px. In einer Druck- oder Bilddatei mit 300 DPI ist derselbe 12pt-Text 50 Pixel hoch, bei 600 DPI 100 Pixel, weil die Pixelanzahl mit der Auflösung skaliert, während die physische Größe gleich bleibt.

Ist 1pt immer 1.3333px?

In CSS sind es immer 1.3333px, weil die CSS-Spezifikation einen Zoll genau auf 96 Pixel festlegt. Für Rasterausgaben gilt das nicht: Bei 300 DPI entspricht ein Punkt 4.1667 Geräte-Pixeln, bei 72 DPI genau einem Pixel.

Was ist der Unterschied zwischen pt und px?

Ein Punkt ist eine physische typografische Einheit von einem Zweiundsiebzigstel Zoll, die im Druck, in Textverarbeitungsprogrammen und im Desktop-Publishing verwendet wird. Ein Pixel ist eine Anzeigeeinheit. In CSS ist der Pixel ebenfalls an eine physische Referenz von einem Sechsundneunzigstel Zoll gebunden. Deshalb lassen sich die beiden Einheiten im Web mit einem festen Verhältnis umrechnen, aber nicht in Bilddateien.

Soll ich pt oder px in CSS verwenden?

Verwenden Sie px oder rem für Bildschirmstile und pt für Druck-Stylesheets. Punkte sind eine absolute physische Einheit, daher ignoriert in pt gesetzter Text die Schriftgrößeneinstellung des Browsers. In einem @media print-Block ist pt die natürliche Einheit, weil die Ausgabe tatsächlich in Zoll gemessen wird.

Welche DPI soll ich für den Druck verwenden?

300 DPI ist der Standard für kommerziellen Druck und Ausgabe in Fotoqualität, 150 DPI ist für Entwürfe und Großformatarbeiten mit Betrachtungsabstand akzeptabel, und 600 DPI wird für feine Liniengrafik sowie hochwertige Druckaufträge verwendet. Setzen Sie das Auflösungsfeld auf den Wert, den Ihr Drucker oder Exportdialog erwartet.

Warum ist 12pt-Text auf dem Bildschirm nicht 12 Punkte hoch?

Die Punktgröße beschreibt das Geviertquadrat der Schrift, also das Entwurfsraster, auf dem die Buchstaben gezeichnet werden, nicht die Höhe einzelner Glyphen. Die Versalhöhe beträgt typischerweise etwa 70% der Geviertgröße und die x-Höhe etwa 50%, daher sind 12pt-Versalien ungefähr 8.4pt hoch.

Ändert das Geräte-Pixelverhältnis die Umrechnung von pt in px?

Nein. Auf einem Bildschirm mit 2× oder 3× meldet der Browser 12pt weiterhin als 16 CSS-Pixel und stellt diese 16 CSS-Pixel anschließend mit 32 oder 48 Hardware-Pixeln dar. Der CSS-Pixel ist eine Referenzeinheit, daher ändern sich die Zahlen in Ihrem Stylesheet nicht — die zusätzlichen Hardware-Pixel machen dieselbe Größe nur schärfer.

Zusätzliche Ressourcen

• CSS-Längeneinheiten – MDN
• Absolute Längen – W3C CSS Values