PT to Percent Converter
Convert between Points (pt) and Percentage (%) CSS units with customizable DPI and parent font size
Live Font Size Preview
Hello
Conversion Formula
How Points and Percent relate to each other via pixels
PT → %
% = pt × (dpi ÷ 72) ÷ parent × 100
e.g. 12pt × (96 ÷ 72) ÷ 16 × 100 = 100%
% → PT
pt = (% ÷ 100) × parent × (72 ÷ dpi)
e.g. (100 ÷ 100) × 16 × (72 ÷ 96) = 12pt
CSS Style Properties
PT value
p {
font-size: 12pt;
}Percent value
p {
font-size: 0%;
}PT to Percent Conversion Table
Based on parent font size: 16px, DPI: 96
| Points (pt) | Percent (%) | Pixels (px) |
|---|---|---|
| 3pt | 25% | 4px |
| 6pt | 50% | 8px |
| 9pt | 75% | 12px |
| 12pt | 100% | 16px |
| 15pt | 125% | 20px |
| 18pt | 150% | 24px |
| 21pt | 175% | 28px |
| 24pt | 200% | 32px |
| 27pt | 225% | 36px |
| 30pt | 250% | 40px |
| 33pt | 275% | 44px |
| 36pt | 300% | 48px |
| 39pt | 325% | 52px |
| 42pt | 350% | 56px |
| 45pt | 375% | 60px |
| 48pt | 400% | 64px |
| 51pt | 425% | 68px |
| 54pt | 450% | 72px |
| 57pt | 475% | 76px |
| 60pt | 500% | 80px |
About PT to Percent Conversion
What is PT (Points)?
PT (Points) is a typographic unit traditionally used in print design. One point equals 1/72 of an inch. In CSS, 1pt converts to a pixel value based on the screen's DPI — at 96 DPI (standard screen), 1pt ≈ 1.333px.
What is Percent (%)?
Percent (%) is a relative CSS unit based on the parent element's corresponding property.
For font-size, 100% equals the parent element's font size.
This makes it highly context-dependent and ideal for responsive scaling.
The Conversion Formula
% = pt × (dpi ÷ 72) ÷ parentFontSize × 100
At 96 DPI and a 16px parent: 12pt = 100%. The formula chains pt→px→% via screen DPI and parent font size.
Common Conversions (DPI=96, parent=16px)
6pt
50%
8pt
66.7%
9pt
75%
10pt
83.3%
11pt
91.7%
12pt
100%
14pt
116.7%
16pt
133.3%
How to Use the PT to Percent Converter
- 1
Enter your value
Type the point (or %) value you want to convert into the "From Value" input field.
- 2
Select the unit direction
Choose pt or % in both dropdowns. Use the swap button to reverse direction instantly.
- 3
Adjust settings if needed
Click Show Settings to change the parent font size (default 16px) and screen DPI (default 96). Both affect the conversion result.
- 4
Read the result and copy
The converted value appears instantly in the "To Value" field. Click the Copy button to copy it to your clipboard.
- 5
Check the live preview and table
The Live Font Size Preview shows how the result looks visually. The conversion table below lists common PT values with their percent and pixel equivalents.
Tip: At 96 DPI and a 16px parent, 12pt equals exactly 100%. This is equivalent to the default browser font size, making 12pt a common typographic baseline.
Common Use Cases
Print-to-Web Typography
- • Convert a designer's print spec (e.g. 10pt body text) to percent for a CSS stylesheet
- • Match web font sizes to print mockups using the same typographic scale
- • Adapt a PDF or InDesign document's font sizes for a web redesign
Responsive Font Sizing
- • Convert absolute pt values to scalable percent for accessible layouts
- • Ensure font sizes scale with user browser preferences
- • Translate a fixed-size stylesheet to a fluid percentage-based system
Email Template Development
- • Many email clients support pt for font sizes — convert to % for CSS fallback
- • Standardise font sizes across HTML email templates
- • Match email typography to the equivalent web % value for consistency
CMS & Theme Customisation
- • CMS theme editors often accept % font sizes — convert from a pt spec
- • Override inherited font sizes using a calculated percentage value
- • Build a shared reference table for your design system documentation
Cross-Unit Design Systems
- • Reconcile a mixed-unit codebase during a CSS refactor
- • Translate design tokens in pt to percent for developer handoff
- • Build consistent type scales across print and digital products
Learning & Teaching CSS
- • Understand how pt relates to % via DPI and parent font size
- • Demonstrate the difference between absolute and relative CSS units
- • Use the live preview to show students visual font size differences instantly
Frequently Asked Questions
What is the formula to convert PT to percent?
The formula is: % = pt × (dpi ÷ 72) ÷ parentFontSize × 100. At 96 DPI with a 16px parent, 12pt = 100%. The conversion chains pt→px (via DPI) then px→% (via parent size).
Why does 12pt equal 100% by default?
At 96 DPI, 12pt converts to 16px (12 × 96/72 = 16). Since the default parent font size is also 16px, 16px equals exactly 100% of the parent — so 12pt = 100%.
When should I use PT instead of percent in CSS?
PT is best for print stylesheets (@media print) or email clients that expect absolute units. Percent is better for web layouts because it scales relative to the parent element and respects user font size preferences.
Does changing the DPI setting affect the result?
Yes. DPI determines how many pixels one point equals. At 96 DPI (screen), 1pt ≈ 1.333px. At 72 DPI (print), 1pt = 1px exactly. Changing DPI in the settings recalculates all conversions.
What does changing the parent font size do?
The parent font size determines what 100% means. If the parent is 20px instead of 16px, the same number of pixels equals a smaller percentage. For example, 16px = 80% of a 20px parent instead of 100%.
How do I convert percent back to PT?
Use the swap button in this tool, or apply the reverse formula: pt = (% ÷ 100) × parentFontSize × (72 ÷ dpi). For example, 150% with a 16px parent at 96 DPI = 18pt.
Is my data safe? Does this tool send data to a server?
No data leaves your browser. All calculations happen entirely client-side using JavaScript. Nothing you enter is uploaded or stored anywhere.
What is the difference between PT and PX?
PT (points) is an absolute unit from print typography: 1pt = 1/72 inch. PX (pixels) is a CSS absolute unit tied to screen resolution. At 96 DPI, 1pt = 1.333px. At 72 DPI (legacy Mac), 1pt = 1px exactly.