PX to PT: The Quick Guide for Designers & Developers
Ever been in that spot where your web design looks perfect on screen, but the print proof looks… off? Or maybe you’re a developer getting specs from a print designer, and the numbers just don’t add up.
The culprit is often the “language barrier” between Pixels (PX) and Points (PT). They seem similar, but they’re built for two completely different worlds: digital screens vs. physical paper.
Let’s clear up the confusion and make translating between them easy.
PX to PT Conversion Table
For those who just need a quick answer, here’s a handy cheat sheet. We’re using the standard web conversion rate, where the most common pairing is 16px = 12pt.
| Pixels (PX) | Points (PT) |
| 10px | 7.5pt |
| 12px | 9pt |
| 14px | 10.5pt |
| 16px | 12pt (Standard) |
| 18px | 13.5pt |
| 24px | 18pt |
| 32px | 24pt |
| 48px | 36pt |
| 72px | 54pt |
How to Convert PX to PT
So, how do you “translate” between these two units? The key is to understand what they are.
- Pixels (PX): Think of these as the tiny squares of light on your monitor. They are a digital unit. Their physical size isn’t fixed—a pixel on your phone is much smaller than a pixel on a big TV. They’re ideal for web design because they adapt to the screen.
- Points (PT): These come from the world of printing. A point is a physical unit of measurement. It’s always, always 1/72nd of an inch. When you print a 12pt font, it will measure the same size on paper, no matter what.
The “conversion” is just a standard agreement. The web (via CSS) created a bridge, assuming that a typical screen has 96 “dots per inch” (DPI).
At that resolution, 96 pixels would equal 1 inch. Since 72 points also equal 1 inch, we get our magic relationship: 96px = 72pt.
Formulas
If you like to do the math yourself, it’s actually pretty simple.
Formula 1: How to Convert Pixels to Points
To find out the value of 1 pixel, you just divide.
1px = 72 / 96 pt
This simplifies to:
Points = Pixels * 0.75
Formula 2: How to Convert Points to Pixels
To go the other way, you just flip the fraction.
1pt = 96 / 72 px
This simplifies to:
Pixels = Points * 1.333...
Pro Tip: Multiplying by 1.333... can be messy. A more precise way is to multiply your point value by 4 and then divide by 3 (since 96/72 simplifies to 4/3).
Examples
Let’s see that math in action with a couple of real-world scenarios.
Example 1: Web Designer to Print Designer
- Scenario: You’re a web designer, and your website’s main paragraph text is
16px. Your client loves it and wants a matching printed brochure. - Conversion: You need to convert your pixel value to points.
- Math:
16px * 0.75 = 12pt - Answer: You tell the print designer to use
12ptfont for the brochure to maintain a consistent brand feel.
Example 2: Print Designer to Web Developer
- Scenario: You’re a developer. A graphic designer handed you a mockup from Adobe Illustrator. The main headline font is set to
36pt. You need to code this in CSS. - Conversion: You need to convert the point value to pixels.
- Math:
36pt * (4 / 3) - Answer:
(36 * 4) / 3 = 48px. You would writefont-size: 48px;in your stylesheet.
How to Use This PX to PT Converter?
Of course, why bother with messy math and fractions when you can just use this tool? We’ve made it as simple as possible.
- It’s 100% Two-Way: You can type in either box. Just click the “PX” field and type your pixel value, or click the “Point (pt)” field and type your point value.
- Get Instant Results: The tool does the math for you as you type. There’s no “convert” button to press. The other box will fill in automatically.
- Copy and Go: Once you have your number, just click the “Copy PX” or “Copy Point” button to instantly copy the value to your clipboard.
- Start Fresh: Click the “Reset” button to clear both fields and start your next conversion.
It’s that easy! No formulas, no fuss. Just fast, accurate answers.