Hey there! If you’ve spent any time designing interfaces, wrestling with typography, or prepping files for a client, you’ve probably hit this classic roadblock. You go to set your font size, look at the dropdown menu, and see two options staring back at you: px and pt.
Are we supposed to use 16px or 16pt? Are they the same thing? Does it even matter?
Spoiler alert: It absolutely matters, and mixing them up can lead to some major design headaches down the road. Let’s strip away the heavy technical jargon and break down exactly what pixels and points are, when to use them, and why they act the way they do.
Pixels (px): The Digital LEGO Bricks
Think of a pixel as a single, tiny, glowing LEGO brick on your screen.
When you look at your laptop, phone, or TV, you aren’t actually seeing a smooth, continuous image. You’re looking at a massive, invisible grid made up of millions of these little glowing bricks. Each pixel can only be one color at a time. Put enough of them together, and your brain sees a beautifully designed landing page or a picture of a cat.
Because screens are physically built out of pixels, the pixel is the absolute standard for anything that lives on a screen. If you design a button that is 200px wide, you are telling the computer, “Make this button exactly 200 glowing LEGO bricks wide.”
Points (pt): The Physical Heavyweights
Now, let’s step away from the screen. Imagine you have a physical ruler, a piece of paper, and a pen.
A point (pt) is a real-world, physical unit of measurement, just like an inch or a centimeter. It actually comes from the old-school days of the printing press. To be exact, one point is exactly 1/72 of an inch.
If you tell a printer to make a font 72pt, it will print letters that are exactly one inch tall on the physical paper, no matter what kind of screen you used to design it. Points don’t care about screens, resolutions, or glowing LEGO bricks. They only care about physical space.
The Big Clash: Why It Gets Confusing
Here is where the wires get crossed.
If you design a flyer for print, you use points because the end result is a physical object. But if you try to use points for web design, things get messy fast. Since a point is a physical size (1/72 of an inch), your computer has to do a bunch of math to figure out how many of its specific screen pixels equal a physical point.
Because every monitor has a different pixel density (a cheap desktop monitor vs. a razor-sharp MacBook Retina display), a 16pt font might look perfectly readable on one screen and absurdly huge or tiny on another.
The Golden Rule: If it’s going to be printed on paper, use points (pt). If it’s going to live on a web browser, use pixels (px).
The Apple Curveball: iOS “Points”
Just when you thought you had it figured out, Apple had to make things a little spicy.
If you design apps for iOS, you’ve probably noticed that Apple’s design guidelines ask you to measure things in “points.” Wait, I thought points were for print?!
They usually are. But Apple hijacked the word and created something called a resolution-independent point.
Think of it like a “flexible pixel.” Because Apple has so many different screens (standard, Retina, Super Retina), they created their own digital point system so designers wouldn’t have to redesign an app five times for five different iPhones.
In iOS design, you design in “points” (which act like a baseline). Then, the iPhone’s software automatically scales those points into actual pixels depending on how sharp the screen is.
-
On an old iPhone, 1pt = 1px.
-
On a Retina screen, 1pt = a 2×2 grid of pixels.
-
On a Super Retina screen, 1pt = a 3×3 grid of pixels.
Skipping the Math
Let’s be real—sometimes you are forced to jump between the two formats. Maybe you’re translating a digital logo into a print brochure, or a client handed you a brand guide with strict 12pt font rules that you need to put on a website.
Instead of breaking out the calculator and stressing over the conversions, let the robots do the heavy lifting:
-
If you need to translate web sizes for a print project, just use a handy pixel to point converter.
-
If you are going the other direction and need to make sense of print guidelines for a screen, a point to pixel converter will absolutely save your sanity.
The Designer’s Cheat Sheet
Don’t want to memorize the math? No problem. Here is your quick-reference cheat sheet for when to use which unit.
| The Project | Your Go-To Unit | Why We Do It |
| Web Design & UI | Pixels (px) or rem | Browsers render in pixels. It gives you pixel-perfect control over the digital grid. |
| Print Design (Flyers, Books) | Points (pt) | You are designing for physical space. A point is a fixed, real-world measurement. |
| iOS App Design | Apple Points (pt) | It lets your design scale smoothly across different iPhone screen densities (1x, 2x, 3x). |
| Android App Design | dp / sp | Android’s version of the flexible point, tailored for thousands of different device screens. |
| The Math Conversion | 16px ≈ 12pt | At standard web resolution (96 PPI), 16 digital pixels roughly equals 12 physical points. |