CSS font sizing
Convert print font specs (in pt) to pixel values for web typography.
Convert typographic points to screen pixels — essential for web typography and CSS font sizing. Enter a custom DPI or PPI value to match your image, screen, or print workflow.
Enter the pixel density required by your screen, image, or print workflow. The preset values are examples, not detected device settings.
The calculator updates without reloading the page. Choose a preset density or type the DPI/PPI supplied by your design application, printer, or project specification. Copy the result when you are ready to use it elsewhere.
Points to pixels converts typographic points to screen pixels. 1 point = 1/72 inch, so at 96 DPI, 1pt = 1.333px. Points are the standard unit for typography (1pt = 1/72 inch). In CSS, the default conversion is 1pt = 1.333px (at 96 DPI). However, 1pt = 1px at 72 DPI, which is why screen and print measurements don't always align. This converter handles the accurate conversion.
px = pt × (DPI ÷ 72)pt = px ÷ (DPI ÷ 72)DPI and PPI are density inputs. PPI describes image pixels per inch, while DPI technically describes printer dots per inch. They are often entered as the same planning value, but they refer to different output systems.
Convert a 12pt font size to pixels at 96 DPI. The result is 16px — this is why browsers default to 16px as the base font size (equivalent to 12pt).
The example uses 96 DPI as an illustrative density. Changing the DPI/PPI field changes the pixel-to-physical-size relationship, so use the value required by your own project.
| Points | Pixels at 96 DPI |
|---|---|
| 6 pt | 8 px |
| 8 pt | 10.6667 px |
| 10 pt | 13.3333 px |
| 12 pt | 16 px |
| 14 pt | 18.6667 px |
| 16 pt | 21.3333 px |
| 18 pt | 24 px |
| 24 pt | 32 px |
| 30 pt | 40 px |
| 36 pt | 48 px |
| 48 pt | 64 px |
| 60 pt | 80 px |
| 72 pt | 96 px |
These lookup values use the example density of 96 DPI. Use the calculator for any other density rather than treating the table as universal.
A point (pt) is a typographic unit equal to 1/72 of an inch. It's the standard unit for font sizes, line spacing (leading), and other typographic measurements in both print and digital design.
The relationship between points and pixels depends on DPI. At 72 DPI, 1pt = 1px. At 96 DPI (CSS default), 1pt = 1.333px. At 300 DPI, 1pt = 4.167px.
In CSS, the pt unit is available but less commonly used than px for screen design. Browsers convert pt to px based on the system DPI setting, which is typically 96 DPI on Windows.
Convert print font specs (in pt) to pixel values for web typography.
Ensure consistent type sizing between print materials and digital versions.
Translate InDesign or Illustrator point sizes to CSS pixel values.
Convert minimum readable font sizes between pt and px for WCAG compliance.
A typographic point is a physical unit defined as 1/72 inch. A CSS pixel is a reference unit used by browsers, and CSS defines the absolute-unit relationship as 96 pixels per inch. That produces the familiar conversion of 1 point to 1.333 CSS pixels and 12 points to 16 pixels. A display's hardware PPI does not normally replace this CSS relationship because browsers and operating systems apply their own scaling.
Print and screen workflows therefore need different decisions. Keep point sizes in a print document when the typesetting application and printer understand them. Convert to pixels when recreating a print specification in a pixel-based design tool or when checking a CSS equivalent. For production websites, relative units such as rem often provide better user scaling than hard-coded point or pixel values.
Do not convert only the body font and guess the remaining hierarchy. Convert headings, captions, labels, line height, and spacing from the same source specification. At 96 DPI, 9 pt is 12 px, 10.5 pt is 14 px, 12 pt is 16 px, 18 pt is 24 px, and 24 pt is 32 px. These mathematical equivalents provide a consistent starting scale, but they do not guarantee identical visual size across different typefaces.
Typeface metrics influence how large text appears. Two fonts set to 12 points can have different x-heights, cap heights, widths, and line-box behavior. After converting, test the actual font with representative content, multiple viewport widths, and browser zoom. Preserve the intended hierarchy and readability rather than forcing every line break to match a print composition.
The editable DPI field is useful for image exports and specialized rendering workflows. At 72 DPI, one point equals one pixel; at 96 DPI, one point equals 1.333 pixels; at 144 DPI, one point equals two pixels; and at 300 DPI, one point equals about 4.167 pixels. Always state which density produced the result, especially when handing rasterized text or artwork to someone else.
Fractional pixel values are valid in CSS, where browsers can distribute them across device pixels during rendering. Raster canvas dimensions, however, normally require integers. Retain precision for layout calculations and round only the final bitmap boundary. For accessible interfaces, verify text at increased zoom and respect user font-size preferences; a correct numerical conversion alone does not establish comfortable reading size or compliance.
The calculation assumes that the measurement and DPI/PPI value refer to the same output workflow. It performs a mathematical conversion; it does not inspect an image file, detect a screen's density, change image resolution, or predict print quality.
Real printed or displayed size can differ because of application scaling, printer drivers, operating-system scaling, browser zoom, resampling, cropping, or device settings. Presets are illustrative and are not live device measurements.
Conversions use exact unit relationships internally, preserve full numeric precision during calculation, and round only the displayed result. One inch equals exactly 25.4 millimeters, 2.54 centimeters, 72 typographic points, or 6 picas. Pixels require a DPI/PPI input because a pixel has no fixed physical length by itself.
Enter a non-negative points value and a positive DPI/PPI value to calculate pixels. Keep the selected density with the copied result so the conversion can be reproduced later.