Point to Percent

Point to Percent Converter

Express point sizes as percentage font sizes relative to a parent element. With the default 16px base, 15 points becomes 125%. Enter a different base when the target element sits inside text that is not 16px.

Formula

percent = pt × (96 ÷ 72) ÷ base × 100

For a 16px base this reduces to percent = pt × 8.3333, because 12pt = 16px = 100%.

Worked example: HTML email templates

Email designers often receive specs in points because the copy was drafted in Word or Outlook. A newsletter spec says: body 12pt, headline 18pt, legal footer 9pt. Many email templates set a base size on a wrapper table and size everything else in percentages to survive clients that rewrite pixel values. At a 16px base, the conversions are 100%, 150%, and 75%. If the wrapper uses 14px instead, set the base to 14: the headline becomes 171.4286% and the footer 85.7143%.

Percentages and user settings

A percentage keeps the text tied to its parent, and ultimately to the browser's default size when used on the root element. Writing html { font-size: 100%; } rather than 16px is the recommended way to respect a reader's preferred text size, and converting point-based specs into percentages follows the same principle.

Common pitfall

Percent font sizes compound. A 150% heading placed inside a 125% section renders at 1.5 × 1.25 = 1.875 times the outer size. When nesting, compute the parent's pixel size first and enter that as the base.

To reverse the calculation, use Percent to Point. For root-relative sizes that never compound, try Point to REM.