CSS font sizing
Convert print font specs (in pt) to pixel values for web typography.
Convert typographic points to pixels for web typography, raster exports, and print layouts. 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. Presets are examples, not detected device settings.
Take the typographic measurement in points (pt).
px = pt × (your DPI ÷ 72). At 96 DPI: px = pt × 1.333.
Use the resulting px value in CSS or your design tool.
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. A typographic point equals exactly 1/72 inch. Under CSS's fixed absolute-unit ratio, 1pt equals 1.333 CSS pixels because 1 inch equals 96 CSS pixels. A custom density is useful for raster and print workflows.
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 12 pt measurement using the CSS reference ratio of 96 pixels per inch. The mathematical result is 16 CSS pixels.
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, absolute units have a fixed relationship: 1 inch equals 96 CSS pixels and 72 points. A CSS pixel is a reference unit and does not necessarily equal one physical device pixel.
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.
Document the mathematical relationship between point and pixel values used by a project.
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.
See the conversion formula guide for the full derivation, reverse calculation, and additional examples.
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.