8px → REM

8px to REM - 0.5rem at 16px Base

At the default browser root size of 16px, 8px equals 0.5rem. Formula: rem = px ÷ 16.

Last reviewed: June 28, 2026

CSS snippet

.example {
  font-size: 0.5rem; /* 8px at 16px root */
  padding: 0.5rem;
}

PX to REM formula

rem = px ÷ root font size

8px ÷ 16px = 0.5rem

Worked example: To convert 8px at a 16px root, divide 8 by 16. 8 ÷ 16 = 0.5. Write font-size: 0.5rem; instead of font-size: 8px; so text scales when users enlarge their browser default font size.

Common use cases at 8px (0.5rem)

Category	Tailwind / design use	CSS property example
Font size	text-xs (0.75rem / 12px)	`font-size: 0.5rem;`
Spacing	p-2, gap-2, m-2	`padding: 0.5rem;`
Gap / margin	p-2, gap-2, m-2	`gap: 0.5rem;`

  
Nearby pixel conversions
    8px
 
  10px
 
  12px
 
  14px
 
  15px
 
  16px
 
  18px
 
  20px
 
  24px
 
  28px
 
  30px
 
  32px
 
  36px
 
  40px
 
  48px
 
  50px
 
  64px
 
 
  
Also see  10px to rem

.
 
 
 8px to REM FAQ
How do you convert 8px to rem?
Divide 8 by the root font size. At the default 16px base: 8 ÷ 16 = 0.5rem. Formula: rem = px ÷ root font size. Paste font-size: 0.5rem; into your CSS so typography scales when users change their browser default font size.
What is 8px in rem at 16px base?
At a 16px root font size, 8px equals exactly 0.5rem. This is the browser default unless your project or the user changes html { font-size }. If your root differs, scale with rem = 8 ÷ yourRootPx before shipping production styles.
Should I use 0.5rem or 8px in CSS?
Use 0.5rem for typography and spacing that should scale with the user's root font-size preference - important for accessibility. Reserve 8px for fixed values like 1px borders or bitmap image dimensions. Prefer rem for layout rhythm so zoom and OS font settings do not clip text.
How do I convert 0.5rem back to pixels?
Multiply 0.5rem by 16: 0.5 × 16 = 8px. Reverse formula: px = rem × root font size. Use that when a design tool exports rem tokens and you need pixel sizes for image assets, canvas drawing, or developer handoff docs.
Where is 8px commonly used in web design?
8px (0.5rem) maps to text-xs (0.75rem / 12px) in typical design systems. For Tailwind spacing, see p-2, gap-2, m-2. Check the use-case table on this page for CSS property examples covering font-size, padding, and gap so you can pick a consistent token across components and breakpoints.
    Full converter
 
PX to REM Converter - any value, custom base
  
   Cheat sheet
 
PX to REM cheat sheet - 12px through 64px