Convertitore da PX a REM

Dividi il valore in pixel per la root font size: rem = px ÷ root. Con la root predefinita del browser a 16px, 16px ÷ 16 = 1rem, 24px ÷ 16 = 1.5rem e 40px ÷ 16 = 2.5rem. Digita qualsiasi valore px nel convertitore qui sopra e il campo rem si aggiorna istantaneamente — nessun calcolo mentale necessario. Per il trucco del 62.5% (root a 10px), dividi semplicemente per 10: 24px = 2.4rem.

Moltiplica il valore rem per la root font size: px = rem × root. Con la root predefinita a 16px, 1rem × 16 = 16px, 1.5rem × 16 = 24px e 0.875rem × 16 = 14px. Modifica il campo rem nel convertitore e il campo px si aggiorna immediatamente. Il convertitore è completamente bidirezionale — inserisci il valore che conosci e gli altri si aggiornano automaticamente.

1rem equivale alla font size dell'elemento root (html). In tutti i principali browser — Chrome, Safari, Firefox, Edge — il default è 16px, quindi 1rem = 16px a meno che la root non sia stata modificata. Se imposti la root a 10px (il trucco del 62.5%), 1rem diventa 10px. Anche gli utenti possono modificare la dimensione del testo predefinita nelle impostazioni del browser, cambiando così il valore di 1rem per loro — ecco perché rem è preferibile a px per le dimensioni di font accessibili.

0.875rem equivale a 14px con la root standard a 16px (0.875 × 16 = 14). Questo è uno dei valori rem più usati nei framework CSS — la classe text-sm di Tailwind CSS è 0.875rem (14px). Con una root a 10px (il trucco del 62.5%), 0.875rem corrisponderebbe a 8.75px.

px è un'unità assoluta e fissa — 16px è sempre 16 pixel indipendentemente dalle impostazioni dell'utente o dalle dimensioni dello schermo. rem è relativo: è un multiplo della font size dell'elemento root (html), quindi 1rem = 16px di default ma si scala se l'utente aumenta la dimensione del testo base nel browser tramite le impostazioni di accessibilità. Questo rende i layout basati su rem più accessibili — il testo cresce proporzionalmente quando l'utente richiede testo più grande, mentre il testo basato su px rimane fisso e può diventare troppo piccolo da leggere.

px è fisso. rem è relativo alla font size della root (html) — un'ancora coerente per l'intera pagina. em è relativo alla font size del proprio elemento genitore, quindi si accumula annidando elementi: un genitore a 20px con un figlio a 1.5em dà 30px per il figlio. Imposta lo stesso figlio a 1.5rem e sarà 24px (1.5 × la root a 16px), indipendentemente dal genitore. Con una root a 16px e senza annidamento, 16px, 1rem e 1em sono tutti uguali — la differenza emerge solo quando cambiano le font size dei genitori.

rem è preferibile per le dimensioni del font dal punto di vista dell'accessibilità. Quando qualcuno aumenta la dimensione del testo predefinita nel browser (un'esigenza comune per gli utenti con disabilità visive), ogni dimensione di font basata su rem si scala con essa, mentre i valori px rimangono fissi. La linea guida WCAG 2.1, criterio 1.4.4 (Ridimensionamento del testo), richiede che il testo sia ridimensionabile fino al 200% senza perdita di funzionalità — usare rem rende questo requisito facile da soddisfare. Usa px solo per elementi che non devono scalare, come bordi da 1px o icone a dimensione fissa.

Il trucco del 62.5% imposta la font size della root (html) al 62.5% — che con il default del browser a 16px equivale a 10px. Questo rende l'aritmetica dei rem estremamente semplice: 1.6rem = 16px, 2.4rem = 24px, 3.2rem = 32px. Ogni valore rem corrisponde chiaramente a un multiplo di 10. Passa al preset da 10px qui e il convertitore e la tabella di riferimento si ricalcolano istantaneamente per mostrare la mappatura pulita. Il compromesso è che la tua root sovrascrive il default del browser dell'utente, riducendo leggermente l'accessibilità.

Con la root standard a 16px: 10px = 0.625rem, 12px = 0.75rem, 13px = 0.8125rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 28px = 1.75rem, 32px = 2rem, 40px = 2.5rem, 48px = 3rem. La tabella di riferimento nello strumento elenca tutti i valori comuni e ti permette di copiare ciascuno con un singolo clic — più veloce che calcolare manualmente ogni volta.

Tailwind CSS usa unità rem per la maggior parte dei valori di dimensione per default, con una root a 16px. La scala di spaziatura di Tailwind: 1 unità = 0.25rem = 4px. Quindi space-4 = 1rem = 16px, space-6 = 1.5rem = 24px, space-8 = 2rem = 32px. Per la tipografia: text-sm = 0.875rem (14px), text-base = 1rem (16px), text-lg = 1.125rem (18px), text-xl = 1.25rem (20px), text-2xl = 1.5rem (24px). Questo convertitore ti permette di verificare rapidamente qualsiasi valore px personalizzato rispetto al sistema rem-based di Tailwind.

Sì, completamente. Il convertitore funziona interamente in JavaScript nel tuo browser — non c'è comunicazione con server, nessuna chiamata API e nessun dato caricato. Funziona offline una volta che la pagina è stata caricata. I valori che digiti non lasciano mai il tuo dispositivo. Puoi aggiungerlo ai preferiti e usarlo in aereo, in un tunnel, o ovunque tu stia scrivendo codice senza accesso a internet. Nulla viene memorizzato su alcun server.

Digita qualsiasi valore nel campo Root Font Size — oppure usa i pulsanti preset per 16px (default del browser) o 10px (trucco del 62.5%). Ogni conversione rem, em e pt nella tabella e nell'input attivo si ricalcola istantaneamente per corrispondere alla nuova root. Se il tuo CSS imposta html { font-size: 18px; }, inserisci 18 come root e tutte le conversioni saranno accurate per la scala del tuo progetto specifico.