FIRST CH TOOLS LOCAL PROCESSING — NOTHING IS UPLOADED 日本語

FIRST CH TOOLS / 21 PX ⇄ REM / EM

PX ⇄ REM / EM Converter & Font Size Scale

Set the root font size, then type into any of the px, rem or em boxes and the other two follow. The 12px–64px scale can be copied straight out as CSS custom properties or SCSS, and you can paste a whole stylesheet to convert px→rem in one go.

Set the base, then type into any box

px
px
rem
rem
em
em
Common values
24
px
1.5
rem (from the root)
1.5
em (from the parent)
18
pt (for print CSS)
Ready to paste

    
    
  
    

  
    Everything is calculated inside this page — nothing you type leaves the browser. Directly callable via URL parameters: /en/px-rem/?px=24 or /en/px-rem/?rem=1.5&root=10
    
  
    

  

  

  
    
    
    How to Use
    
    
      
      
    1. Set the root font sizeUsually you can leave it at 16px, the browser default. If your stylesheet uses html { font-size: 62.5% }, press the 62.5% button to make the base 10px.
      2. 
      
    2. Type into px, rem or emFill in any one box and the other two, the pt value and the CSS snippet update instantly. The “common values” buttons fill it in for you.
      3. 
      
    3. Copy the scale or the whole stylesheetThe “Size scale” tab writes the 12px–64px table out as CSS custom properties or SCSS, and the “Bulk CSS” tab converts px→rem across a stylesheet you paste in.
      4. 
    
    
  
    

  
    
    
    About This Tool
    
    
    rem is relative to the root (html) font size and em is relative to the parent font size. Browsers default to 16px, so unless you change it 1rem = 16px and the rem value is simply the px value divided by the base: 24px ÷ 16 = 1.5rem.
    
    
    Sizes written in px ignore the reader's own font size setting. Someone who has set their default text size to 20px still gets 14px text from font-size: 14px. Written in rem, the same text scales with their setting, which is why font sizes, line heights and spacing are usually specified in rem. Page zoom does scale px as well, but the font size preference is a separate mechanism.
    
    
    
      
    The 62.5% trick has a downside
    
      
    html { font-size: 62.5% } makes the root 10px so that 1.4rem = 14px and the mental arithmetic disappears. It is a popular pattern, but every rem you write becomes 5/8 of the browser default, so a reader who has increased their font size gets less of an increase than they asked for. Leaving the root at 100% and converting the values here is the safer version.
    
    
    
    
    
      
    Nested em values multiply
    
      
    An element set to 0.9em inside another element set to 0.9em ends up at 0.81 of the outer size. That is why text shrinks step by step through nested lists or stacked components. Use rem for font sizes and em for spacing that should follow the element's own text (padding, margin, letter-spacing) and the problem goes away.
    
    
    
    
    
      
    Values that do not divide exactly get rounded
    
      
    With a 16px root every whole pixel divides exactly — 16 is 2⁴, so 13px = 0.8125rem is precise. Move the root to 14px or 15px and you get repeating values such as 16 ÷ 14 = 1.142857… that have to be cut off somewhere. This tool keeps up to six decimals, trims trailing zeros, and tells you underneath whether the value divided exactly. Browsers keep more precision internally, so three or four decimals is already beyond what anyone can see.
    
    
    
    
    
      
    Keep 1px hairlines in px
    
      
    Converted to rem, a hairline becomes 0.9px or 1.1px depending on the root size, so its thickness varies between devices and it can disappear entirely. Leave 1px borders in px. The “Leave 1px alone” option on the “Bulk CSS” tab skips any value that resolves to less than 2px.
    
    
    
    
    
      
    Breakpoints belong in px
    
      
    Breakpoints are usually about the device width, not about the root font size. Written in rem, a @media condition moves when the reader changes their font size setting. By default the conditions of @media and @container are left out of the conversion — the declarations inside the block are still converted.
    
    
    
    
    
      
    pt is a print unit
    
      
    In CSS 1pt is 1/72 inch and 1px is 1/96 inch, so 1px = 0.75pt. There is no reason to use pt for screen CSS, but print stylesheets and cross-checks against Word, PDF or design tools ask for points, so the value is shown alongside.
    
    
    
  
    

  
    
    
    From AI Agents
    
    
    This conversion is also available as the px_rem_convert tool of the MCP (Model Context Protocol) server @first-ch/tools-mcp, so an AI agent can call it directly without a browser — including passing the path of a stylesheet to convert and write out. See Using these tools from AI agents for setup.
    
    
    Setup
    
    
    claude mcp add firstch-tools -- npx -y @first-ch/tools-mcp
    
    
    Examples
    
    
    # how many rem is 24px (16px root)
px_rem_convert(value=24)

# 1.4rem in px with a 10px root
px_rem_convert(value=1.4, unit="rem", root=10)

# a whole stylesheet, px → rem (hairlines and @media conditions kept)
px_rem_convert(css="a{padding:24px;border:1px solid red}")

# read a file, convert it and write the result elsewhere
px_rem_convert(path="/tmp/style.css", outputPath="/tmp/style.rem.css", minPx=2)
    
  
    

  
    
    
    Other Tools