Convertitore px·rem·em

Inserisci un valore in px e ottieni la conversione in rem ed em con qualsiasi base font di riferimento, con output CSS pronto da incollare. Conversione bidirezionale inclusa.
Convertitore live
px Pixel — valore assoluto
rem Root EM — relativo al root
em EM — relativo al genitore
Impostazioni base
Root font-size (1rem) px
Contesto EM (font del genitore) px
rem = px ÷ 16
em = px ÷ 16 (contesto)
px = rem × 16
pt = px × 0.75   (96dpi)
Shortcut tipografia
px rem em pt % (base 16px) 

                                    

                                

                            

                        

                    


                    

                        
Il convertitore px rem è uno degli strumenti più cercati da sviluppatori front-end che lavorano su temi WordPress, sistemi di design e architetture CSS scalabili. Lavorare in unità relative come rem ed em è fondamentale per costruire layout accessibili, reattivi e manutenibili: i rem scalano rispetto alla dimensione del font radice del browser, mentre gli em sono relativi all'elemento genitore.
Con questo tool puoi:
  • Convertire qualsiasi valore px in rem ed em in tempo reale
  • Impostare una base font personalizzata (default 16px, modificabile per adattarsi al tuo tema)
  • Convertire nella direzione inversa (rem → px)
  • Copiare l'output CSS con un click, pronto da incollare nel foglio di stile
Particolarmente utile quando si traduce un mockup Figma in codice CSS: le misure nei file di design sono spesso in pixel, ma la produzione richiede unità relative per rispettare le preferenze di accessibilità degli utenti. Indispensabile per chi lavora con scale tipografiche, griglie di spaziatura e variabili CSS custom nei propri temi.
Come usare il convertitore
  • Modifica uno qualsiasi tra px, rem o em: gli altri due si aggiornano in tempo reale.
  • Imposta il root font-size (tipicamente 16px su html) per il calcolo dei rem.
  • Imposta il contesto EM come font-size del genitore CSS quando converti in em.
  • Usa la tabella per valori comuni (4–128px) e l'Output CSS per snippet con rem, em, pt e variabile custom.
  • I pulsanti Copia CSS (header) e Copia (pannello destro) copiano snippet pronti per l'editor.
Ideale per design system, temi WordPress, handoff Figma → CSS e refactor accessibili.