What’s a Point (pt) Anyway?
Think of a “point” as a unit from the print world. It’s an absolute, fixed-size unit. A 12pt font in Microsoft Word is designed to be a specific physical size when it’s printed on a piece of paper.
This is great for paper because paper doesn’t change size. But on the web, our “paper” is everything from a tiny watch screen to a giant 4K monitor. A fixed size that looks good on your laptop might be unreadable on a phone or comically huge on a TV.
And What’s a REM?
REM, on the other hand, stands for “Root EM”. It’s a relative unit.
But what is it “relative” to? It’s relative to the root font size of the webpage, which is the font size set on the <html> element.
By default, every single web browser (Chrome, Firefox, Safari) sets this root font size to 16px.
This means:
1rem=16px2rem=32px0.5rem=8px
The real magic happens when a user, perhaps someone with a visual impairment, goes into their browser settings and changes their default font size to “Large” or “Extra Large.” If they do this, the browser’s root size might become 20px or 24px.
If you built your site with REMs, your entire website (fonts, and even spacing) will “magically” scale up to match their preference. That’s true accessibility!
How to Use This Point to REM Converter
We made this tool as simple as possible.
- Base Font Size (PX): This is your website’s root font size. We’ve pre-filled it with
16px, which is the standard for 99% of projects. You should only change this if you have manually set a different font size on your<html>tag in CSS. - Point (pt): This is where you type in the point value from your design (e.g.,
12,18, or24.5). - REM: The tool instantly gives you the exact REM value to copy and paste into your CSS.
You also have handy “Copy” buttons to grab the values you need and a “Reset” button to clear the fields and start over.
Formula:
- Convert Points to Pixels: $\text{Pixels} = \text{Points} \times (96 / 72)$ or $\text{Pixels} = \text{Points} \times 1.333…$
- Convert Pixels to REM: $\text{REM} = \text{Pixels} / \text{Base Font Size (16px)}$
Point (pt) to REM Conversion (Base 16px)
| Point (pt) | Pixels (px) | REM (rem) |
| 6 pt | 8 px | 0.5 rem |
| 7 pt | 9.333 px | 0.583 rem |
| 8 pt | 10.667 px | 0.667 rem |
| 9 pt | 12 px | 0.75 rem |
| 10 pt | 13.333 px | 0.833 rem |
| 11 pt | 14.667 px | 0.917 rem |
| 12 pt | 16 px | 1 rem |
| 13 pt | 17.333 px | 1.083 rem |
| 14 pt | 18.667 px | 1.167 rem |
| 15 pt | 20 px | 1.25 rem |
| 16 pt | 21.333 px | 1.333 rem |
| 18 pt | 24 px | 1.5 rem |
| 20 pt | 26.667 px | 1.667 rem |
| 22 pt | 29.333 px | 1.833 rem |
| 24 pt | 32 px | 2 rem |
| 30 pt | 40 px | 2.5 rem |
| 36 pt | 48 px | 3 rem |
| 48 pt | 64 px | 4 rem |
| 72 pt | 96 px | 6 rem |
The Manual Math (If You’re Curious)
So, what’s happening behind the scenes? It’s a simple two-step conversion.
First, the browser has to figure out what a “point” even means in the context of a screen. The standard CSS conversion ratio is:
1pt = 1.333... px (or 96/72 pixels)
Second, we convert those pixels into REMs using the formula we already know:
REM = Pixels / Base Font Size
Let’s walk through an example:
You want to convert 18pt (a common heading size) with a base of 16px.
- Points to Pixels:
18pt * 1.333... = 24px - Pixels to REM:
24px / 16px = 1.5rem
So, 18pt is the same as 1.5rem in a standard browser setup. This tool just does all that for you in a fraction of a second.
Frequently Asked Questions (FAQ)
Q: Why not just use pixels (px) instead of points?
A: Pixels are definitely more common on the web than points! But px units are also (mostly) fixed. They don’t scale when a user changes their browser’s default font size, which is a major accessibility problem. REMs are flexible and respect the user’s settings.
Q: Is 12pt the same as 12px?
A: No! This is a very common mistake. As we saw in the formula, 12pt is actually 16px (12 * 1.333...). This is why a tool like this is so helpful—it prevents you from making that incorrect assumption.
Q: When should I use points in CSS?
A: Almost never. The only (and very rare) time pt units are useful is if you are creating a special “print-only” stylesheet, which is a CSS file that only applies when a user tries to print your webpage. For 99.9% of your regular web design, you should use rem (for fonts/spacing) or px (for things like borders).