Percent to PX Converter

Convert between Percentage (%) and Pixels (px) CSS units with customizable parent font size

Live Font Size Preview

Hello

Conversion Formula

How Percent and Pixels relate to each other

% → PX

px = (% ÷ 100) × parentSize

e.g. (100 ÷ 100) × 16 = 16px

PX → %

% = (px ÷ parentSize) × 100

e.g. (16 ÷ 16) × 100 = 100%

Percent always resolves relative to the parent element's value. Change the parent size in Settings to match your context.

CSS Style Properties

Percent value

h1 {
  font-size: 100%;
}

Pixel value

h1 {
  font-size: 0px;
}

Percent to PX Conversion Table

Parent font size: 16px

Percent (%)Pixels (px)
25%4px
50%8px
75%12px
100%16px
125%20px
150%24px
175%28px
200%32px
225%36px
250%40px
275%44px
300%48px
325%52px
350%56px
375%60px
400%64px
425%68px
450%72px
475%76px
500%80px

About Percent to PX Conversion

What is Percent (%)?

Percent (%) is a relative CSS unit. For font-size, 100% equals the parent element's font size. It scales with its context, making it useful for proportional, responsive layouts that adapt to the parent container.

What is PX (Pixels)?

PX (Pixels) is an absolute CSS unit. It does not scale with the parent element or user browser preferences — one CSS pixel corresponds to one device-independent reference pixel. PX is precise and predictable, best suited where exact fixed sizes are required.

The Conversion Formula

px = (% ÷ 100) × parentFontSize

With a default 16px parent: 50% = 8px, 100% = 16px, 150% = 24px. Change the parent font size in Settings to model a different element context.

When to Convert Percent to PX

  • Debugging computed font sizes — find the exact pixel value rendered from a percent style.
  • Migrating a percent-based stylesheet to a pixel-based design system.
  • Translating design specs expressed in percent to pixel values for developers.
  • Verifying that a percent size produces an accessible, readable pixel value.

Common Conversions (parent = 16px)

50%

8px

62.5%

10px

75%

12px

87.5%

14px

100%

16px

112.5%

18px

125%

20px

150%

24px

How to Use the Percent to PX Converter

  1. 1

    Enter your value

    Type the percentage (or px) value you want to convert into the "From Value" input field.

  2. 2

    Select the unit direction

    Choose % or px in both dropdowns. Use the swap button to reverse direction instantly.

  3. 3

    Set the parent font size if needed

    Click Show Settings to change the parent font size — the px value that 100% resolves to in your context.

  4. 4

    Read the result and copy

    The converted value appears instantly. Click Copy to copy it to your clipboard.

  5. 5

    Check the live preview and table

    The Live Font Size Preview shows how the result renders. The table lists common percent values and their pixel equivalents.

Tip: With the default 16px parent, multiply any percent value by 0.16 to get the pixel result. For example: 75% × 0.16 = 12px.

Common Use Cases

Debugging Computed Styles

  • • Find the exact px value rendered by a percent font size in your layout
  • • Verify that a percentage size produces the expected pixel output
  • • Cross-check browser DevTools computed values against your CSS percent

Design Handoff

  • • Translate percent-based CSS values to px for designers reviewing in Figma
  • • Convert percent font sizes to px for design documentation
  • • Align developer (percent) and designer (px) specifications in reviews

Legacy CSS Refactoring

  • • Convert a percent-based stylesheet to px for a pixel-perfect redesign
  • • Calculate px equivalents during migration to a new design system
  • • Audit percent-based font sizes and document their pixel output

Accessibility Auditing

  • • Verify that percent font sizes resolve to at least 16px for body text
  • • Check that small percentage values meet WCAG minimum size requirements in px
  • • Calculate the px equivalent of a percent size for an accessibility report

Layout & Width Calculations

  • • Find the exact px width of a percent-based column in a fixed-width container
  • • Calculate px padding or margin values from a percent-based spacing system
  • • Verify responsive breakpoint widths expressed as percentages in px

Learning & Teaching CSS

  • • Understand what pixel value a percent CSS property resolves to
  • • Demonstrate how parent font size changes affect percent-to-px output
  • • Use the live preview to visualise font size changes interactively

Frequently Asked Questions

What is the formula to convert percent to px?

px = (% ÷ 100) × parentFontSize. With a default 16px parent: 50% = 8px, 100% = 16px, 150% = 24px. Change the parent size in Settings if your context differs.

What does the parent font size represent?

For font-size, percent resolves relative to the parent element's font size. The default is 16px (the browser default root font size). Set it to your element's actual parent size for accurate results.

How do I find the computed px value of a percent font size in my browser?

Open browser DevTools (F12), select the element, and look at the "Computed" tab. The font-size field there shows the resolved px value. This tool lets you calculate that value without needing a live browser.

Does percent work for properties other than font-size?

Yes. For width and padding, percent is relative to the parent's width. For height, it is relative to the parent's height. Set the "parent font size" field to the relevant parent dimension for accurate results in those cases.

Is 100% always equal to 16px?

Only when the parent font size is 16px. If a parent element has font-size: 20px, then 100% = 20px and 80% = 16px. Use the Settings panel to adjust the parent size to match your context.

How do I convert px back to percent?

Use the swap button, or apply: % = (px ÷ parentFontSize) × 100. For 12px with a 16px parent: (12 ÷ 16) × 100 = 75%.

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 percent and rem for font sizes?

Percent resolves relative to the parent element, so it can produce different px values at different nesting levels. REM always references the root html element, giving a consistent px result everywhere. For global typography, REM is generally more predictable.