Font Size Converter

Convert between px, rem, em, pt, %, and vw instantly. Set your base font size and see live results.

Base Font Size

Root font size (px): Browser default is 16px. Change to match your project.

Unit Converter — type in any field

<div class="fs-unit-block">
  <div class="fs-unit-label">px — Pixels</div>
  <div class="fs-unit-input-row">
    <input class="fs-unit-input" id="fs-px" type="number" min="0" step="0.5" placeholder="16" />
    <button class="fs-copy-btn" data-copy="fs-px">Copy</button>
  </div>
  <div class="fs-unit-desc">Absolute screen pixels</div>
</div>

<div class="fs-unit-block">
  <div class="fs-unit-label">rem — Root EM</div>
  <div class="fs-unit-input-row">
    <input class="fs-unit-input" id="fs-rem" type="number" min="0" step="0.0625" placeholder="1" />
    <button class="fs-copy-btn" data-copy="fs-rem">Copy</button>
  </div>
  <div class="fs-unit-desc">Relative to root element font size</div>
</div>

<div class="fs-unit-block">
  <div class="fs-unit-label">em — Element EM</div>
  <div class="fs-unit-input-row">
    <input class="fs-unit-input" id="fs-em" type="number" min="0" step="0.0625" placeholder="1" />
    <button class="fs-copy-btn" data-copy="fs-em">Copy</button>
  </div>
  <div class="fs-unit-desc">Relative to parent element font size</div>
</div>

<div class="fs-unit-block">
  <div class="fs-unit-label">pt — Points</div>
  <div class="fs-unit-input-row">
    <input class="fs-unit-input" id="fs-pt" type="number" min="0" step="0.5" placeholder="12" />
    <button class="fs-copy-btn" data-copy="fs-pt">Copy</button>
  </div>
  <div class="fs-unit-desc">Print unit: 1pt = 1/72 inch = 1.333px</div>
</div>

<div class="fs-unit-block">
  <div class="fs-unit-label">% — Percent</div>
  <div class="fs-unit-input-row">
    <input class="fs-unit-input" id="fs-pct" type="number" min="0" step="1" placeholder="100" />
    <button class="fs-copy-btn" data-copy="fs-pct">Copy</button>
  </div>
  <div class="fs-unit-desc">% of parent/root font size</div>
</div>

<div class="fs-unit-block">
  <div class="fs-unit-label">vw — Viewport Width</div>
  <div class="fs-unit-input-row">
    <input class="fs-unit-input" id="fs-vw" type="number" min="0" step="0.01" placeholder="1" />
    <button class="fs-copy-btn" data-copy="fs-vw">Copy</button>
  </div>
  <div class="fs-unit-desc">1vw = 1% of viewport width (assumes 1440px)</div>
</div>

Live Preview

The quick brown fox jumps over the lazy dog.

Rendering at 16px

Conversion Table — Common Sizes

px	rem	em	pt	%	vw (1440px)

Calculated with base = 16px. Change base above to update.

Conversion Formulas

px → rem

rem = px ÷ base

e.g. 24px ÷ 16 = 1.5rem

rem → px

px = rem × base

e.g. 1.5rem × 16 = 24px

px → em

em = px ÷ parent-px

Same as rem when parent = root

px → pt

pt = px × 0.75

e.g. 16px × 0.75 = 12pt

px → %

% = (px ÷ base) × 100

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

px → vw

vw = (px ÷ vp) × 100

vp = viewport width (default 1440px)