TPToolpazar

Global Araç

Px To Rem Converter

16px in rem / em

1rem

1em

16rem in px

256px

rem vs em — quick rule

  • rem is always relative to the <html> root font-size. Same value everywhere.
  • em is relative to the parent's font-size, so it compounds in nested elements. Useful for spacing inside a component, dangerous for global type scales.
  • Default to rem for most things; reach for em only when the value should scale with its container.

Convert between CSS pixels and rem/em at any base font-size. Default 16px is the browser default; designers using the "html { font-size: 62.5% }" 10px trick can slide the base to match. Includes a quick rule for when to use rem vs em.

Nasıl Kullanılır

  1. Type a pixel value.
  2. Adjust the base font-size if your design system uses a custom one.
  3. Copy the rem or em value into your stylesheet.

Sık Sorulan Sorular

Should I use rem or em?

Default to rem for global scales (font-size, spacing tokens) — they're always relative to the root, no compounding. Use em for component-internal spacing where you want it to scale with the parent's font-size (typical in icon buttons that should match line-height).

What's the 10px trick?

Setting html { font-size: 62.5% } makes 1rem = 10px (10 ÷ 16 = 0.625). Designers like it because mental math is easier — 14px = 1.4rem. Slide the base to 10 in this tool to match.