design tool
PT to PX converter
At the standard screen resolution of 96 pixels per inch, 12 pt is 16 px: multiply points by 96 and divide by 72. Type a size in pt, px, em, rem or mm, choose the resolution, and see the size in every unit at once with a sample line of text drawn at that size.
Loading the tool…
- Runs on your device, nothing is uploaded
- Free, no sign in
- No watermark, no file limit
How it works
- 1
Type a size
Any number, with its unit from the list: pt, px, em, rem or mm.
- 2
Choose the resolution
96 for web and screen work, 150 for designs on the flyer canvas, 300 for print images.
- 3
Set the base for em and rem
Browsers default to 16 px; change it if your site sets a different root size.
- 4
Copy the value you need
Each card has a copy button that includes the unit, ready to paste into CSS or a design tool.
Why 12 pt equals 16 px
A point is 1/72 of an inch, a print measure that dates back to metal type. CSS defines a pixel as 1/96 of an inch. So one point is 96 over 72, or 1.333, CSS pixels, and 12 pt is 16 px. That is also why browsers default to 16 px text: it matches the 12 point body text people were used to in word processors. The W3C CSS Values and Units specification fixes these ratios, so the conversion is exact in every browser.
Why 1 pt is not 1 px
On paper, physical size is all that matters, and points measure it. On screen, layouts are measured in pixels, and a pixel's physical size depends on the display. A 12 pt font in a document and a 12 px font on a web page are very different sizes: 12 px is only 9 pt. Mixing the two is the most common reason text looks too small when a print layout is rebuilt for the web, or too large the other way round.
The flyer canvas at 150 DPI
The flyer builder's canvas sizes are set in pixels at 150 DPI: an A4 page is 1,240 by 1,754 pixels, which is 8.27 inches times 150. So a size typed in pixels on that canvas maps to print at 150 per inch, not 96. Twelve point text on an A4 flyer is 25 pixels there, not 16. Choose 150 in the tool when working out sizes for a flyer design, so text sized on screen comes out at the intended point size on paper.
Print at 300 DPI
Images for commercial print are usually prepared at 300 pixels per inch. At that resolution 12 pt is 50 pixels. Use 300 when you are setting type inside a raster image, such as text on a photo for a poster, to make sure it prints at the size you expect. Body text in print is usually 9 to 12 pt; headings scale up from there, and text read from a distance, like a poster, needs far more.
em, rem and millimetres
rem is relative to the root font size of the page, usually 16 px, so 1.5 rem is 24 px. em is relative to the font size of the element's parent, which makes it compound when elements are nested; the tool assumes the parent uses the base you set. Millimetres convert from points through the inch: 1 pt is 0.3528 mm, so 12 pt is 4.23 mm. Typographers sometimes give cap height or x height in millimetres for signage, which the mm figure helps compare.
Choosing sizes for documents and decks
Readable body text on screen sits around 16 to 18 px; in a printed document around 10 to 12 pt. Slides are viewed from a distance, so their text is much larger. The document builder and presentation builder set sizes through their own type scales, and checking a planned size here first helps when matching an existing brand guide that gives sizes in points.
Limits
- CSS pixels are reference pixels of 1/96 inch, not device pixels; a high density screen draws each CSS pixel with several of its own.
- em depends on the parent element's font size; the tool treats it like rem, using the base you set.
- Print sizes assume the page prints at 100% scale.
- The sample is capped at 200 px tall so very large sizes still fit.
What it does not do
- It does not detect your screen's physical resolution.
- It does not choose fonts.
- It does not store anything.
Questions people ask
How many pixels is 12 pt?
16 pixels at 96 pixels per inch, the CSS standard used by browsers. At 150 per inch, the flyer canvas resolution, it is 25 pixels, and at 300 per inch, common for print images, it is 50 pixels. The formula is points times the resolution divided by 72.
What font size should body text be in print?
Most printed documents use 10 to 12 pt body text, with 11 pt a common default. Smaller sizes suit footnotes and captions. Text for older readers, or read at arm's length, benefits from 12 pt or more. Posters and signs need sizes based on viewing distance instead.
Is a CSS pixel the same as a screen pixel?
No. A CSS pixel is a reference unit of 1/96 inch at a typical viewing distance. High density screens, such as phones and recent laptops, draw each CSS pixel using two, three or more device pixels, which is why text stays the same size but looks sharper on them.
How do I convert px to rem?
Divide the pixel size by the root font size, usually 16. So 24 px is 1.5 rem and 14 px is 0.875 rem. If the site sets a different root size, such as 10 px for easy maths, set that as the base here and the conversion follows.
How big is 12 pt in millimetres?
About 4.23 mm, because a point is 1/72 inch and an inch is 25.4 mm. That measures the font's nominal size, the height of its body, not the height of a capital letter, which is usually around 70% of it depending on the typeface.
Design a flyer at the right type size
Take what you made here into flyers.
Create a flyer with OneCraftMore tools like this
- Pixels to inches converterConvert pixels to inches and centimetres at any DPI, or work back from a print size to pixels, with the largest print size at six common densities.
- DPI calculatorEnter a pixel size and a print size and see the sheet drawn at real proportions, the area your file covers sharply, and a plain verdict on whether it will do.
- Poster font size calculatorA poster font size calculator: enter the reading distance and the sheet to get the minimum title, heading and body text size in points, drawn to scale.
- Font pairing toolA font pairing tool that previews a heading and body font together at flyer, slide and document sizes, then gives you the Google Fonts CSS to copy.
- Find the fonts used in a PowerPointSee the fonts used in a PowerPoint file: theme heading and body fonts, fonts set on each slide, masters and layouts, and which ones are embedded in the .pptx.
Background reading: the question page on this.
Written and checked by the OneCraft team. Last checked .