PT to PX Converter
Points to pixels at the exact 4:3 ratio CSS fixes, with the table of common sizes and the reason your screen's DPI has nothing to do with it.
Input 12pt
In px 16px
In rem 1rem
Exact ratio 1pt = 4/3px, 1px = 3/4pt
CSS inch 96px, fixed by the specification
Common pt sizes
8pt 10.6667px
9pt 12px
10pt 13.3333px
10.5pt 14px
11pt 14.6667px
12pt 16px <- yours
14pt 18.6667px
16pt 21.3333px
18pt 24px
24pt 32px
36pt 48px
48pt 64px
72pt 96px
12pt is exactly 16px, not approximately. CSS fixes an inch at 96px and a
point is a seventy-second of an inch, so the ratio is 4 to 3 and it
never varies with the screen. A Retina display has more device pixels
per CSS pixel; it does not have more CSS pixels per inch.
Points belong in print stylesheets, where the page really is measured in
physical units, and in the older email clients that still want them. In
a screen stylesheet they are a rounding error waiting to happen: 11pt is
14.6667px, which no browser will render on a whole pixel.
For screen type, rem is the unit that respects the reader. 1rem here
scales with the browser's font size setting, which a pixel value does
not, and a point value does not either.
The conversion is the same in Word, InDesign and Figma only by
coincidence of the 72-point inch. Those tools measure a real inch at
whatever the output device prints; a browser measures a notional one at
96px. The number agrees, the meaning does not.
Output is valid and updates as you type.
Fix the highlighted fields to update the output.
12pt is 16px. Not about 16px: exactly 16px, on a phone, a projector and a 5K monitor.
That surprises people who expect a DPI setting to be involved, so it is worth saying why. CSS fixes an inch at 96 pixels. Not your screen’s inch, a notional one written into the specification. A point is a seventy-second of an inch, so a point is 96/72 pixels, which is 4/3, and nothing measures your display to work it out.
How to use
- Put in the size.
- Pick the direction.
- Read the exact conversion, and the table of common sizes with yours marked.
Example
12pt, the default size in most word processors:
Input 12pt
In px 16px
In rem 1rem
Exact ratio 1pt = 4/3px, 1px = 3/4pt
CSS inch 96px, fixed by the specification
Common pt sizes
8pt 10.6667px
9pt 12px
10pt 13.3333px
10.5pt 14px
11pt 14.6667px
12pt 16px <- yours
14pt 18.6667px
18pt 24px
24pt 32px
36pt 48px
48pt 64px
72pt 96pxThe row worth looking at is 11pt: 14.6667px. Nothing renders that on a whole pixel, which is the argument against points in a screen stylesheet in one line. The clean ones are the multiples of 3: 9pt, 12pt, 18pt, 24pt, 36pt, 72pt.
Pitfalls
A CSS pixel is not a device pixel. On a display with a device pixel ratio of 2, one CSS pixel is painted with four device pixels. That changes sharpness and it changes nothing about this conversion, because the whole coordinate system is in CSS pixels.
Points do not belong in a screen stylesheet. They come from print, where the page really is measured in physical units. On screen they add a division by three for no benefit and produce sizes no browser lands on cleanly.
They do belong in a print stylesheet. Inside @media print, physical units are
the right ones, and a reader printing a page will get what you specified from a
printer driver rather than what a pixel guess produced.
Some email clients still want pt. Older Outlook in particular, because it renders through Word. If you are writing HTML email, points are a compatibility decision rather than a style one.
Neither pt nor px respects the reader’s font size setting. Someone who has set
their browser to 20px default gets 16px text from both. rem is the unit that
follows that setting, which is why the rem value is on the output.
Word and Figma agree with this by coincidence. They measure a real inch at whatever the output device prints; a browser measures a notional one at 96px. The number matches, the meaning does not, and on a scaled OS display the physical size on your desk will not match at all.
Compatibility
Arithmetic in the browser: nothing is uploaded and nothing is stored. The share link carries the value.
The 96-pixels-to-the-inch anchor is in CSS Values and Units, and it has been the
behaviour of every browser since the mid-2000s. The absolute units pt, pc, in,
cm, mm and Q are all defined from it, so they are all exact multiples of each
other and of px.
Operating system display scaling changes how large a CSS pixel looks on the glass. It does not change the ratio between a point and a pixel, so nothing on this page needs to know about it.
Frequently asked questions
Why is 1pt 1.333px and not 1.333 of a screen pixel?
What is 16px in points?
Should I use pt, px or rem?
rem for anything a reader might want larger, which is most text. px for hairlines,
borders and anything that genuinely is one device-independent pixel. pt in print
stylesheets and in email, and nowhere else.