px in rem
Converti px in rem scegliendo il font radice del progetto CSS. Con 16 px, 1 rem equivale a 16 px.
Formula px in rem
Da px a rem
Il rem dipende dal font radice. Con root 16 px, 24 px diventano 1,5 rem.
Se il progetto usa un valore diverso, inseriscilo nel campo dedicato e tutti i risultati cambiano.
Da rem a px
Da rem a px si moltiplica per il font radice. 2 rem con root 16 px valgono 32 px.
Usare rem aiuta a creare interfacce più coerenti con la dimensione testo impostata a livello globale.
Esempi per CSS e interfacce
Testo grande
Passaggio: 24 / 16
Risultato: 24 px = 1,5 rem
Valore comune per titoli compatti.
Spaziatura
Passaggio: 32 / 16
Risultato: 32 px = 2 rem
Utile per margini e padding.
Da rem a px
Passaggio: 0,875 x 16
Risultato: 0,875 rem = 14 px
Serve quando leggi token CSS esistenti.
Tabella px in rem con root 16 px
| px | rem | Lettura pratica |
|---|---|---|
| 0 px | 0 rem | archivio vuoto |
| 1 px | 0,0625 rem | file minuscolo |
| 2 px | 0,125 rem | documento leggero |
| 4 px | 0,25 rem | riferimento unitario |
| 8 px | 0,5 rem | cartella piccola |
| 10 px | 0,625 rem | foto o allegato |
| 12 px | 0,75 rem | backup personale |
| 14 px | 0,875 rem | dataset medio |
| 16 px | 1 rem | archivio grande |
| 18 px | 1,125 rem | disco o cloud |
| 20 px | 1,25 rem | pacchetto esteso |
| 24 px | 1,5 rem | migrazione dati |
| 32 px | 2 rem | storage importante |
| 48 px | 3 rem | riepilogo archivio |
Conversioni px-rem frequenti
| Conversione | Risultato | Perché si cerca |
|---|---|---|
| 12 px in rem | 0,75 rem | testo piccolo |
| 14 px in rem | 0,875 rem | caption |
| 16 px in rem | 1 rem | riferimento |
| 20 px in rem | 1,25 rem | testo grande |
| 24 px in rem | 1,5 rem | titolo |
| 1 rem in px | 16 px | direzione inversa |
| 1,5 rem in px | 24 px | spaziatura |
| 2 rem in px | 32 px | layout |
Che cosa sono px e rem?
Pixel CSS
Il pixel CSS è una unità usata per definire dimensioni, spaziature e layout nei fogli di stile.
Non sempre coincide con un pixel fisico dello schermo, ma resta la misura più familiare nei mockup.
rem
rem è relativo alla dimensione font della radice del documento.
Permette di scalare testi e spaziature in modo più coerente quando cambia il valore globale.
Root font e coerenza del layout
Il valore 16 px è molto comune, ma non è obbligatorio. Alcuni progetti impostano 10 px, 15 px o altri valori per semplificare le tabelle interne.
Quando converti una libreria di componenti, scegli prima il root e mantienilo costante. Cambiarlo a metà crea token incoerenti.
Per testi e spaziature editoriali rem può rendere più naturale il ridimensionamento. Per bordi sottili o dettagli grafici, px può restare più controllabile.
Annota il root usato accanto alla tabella. Un valore 1,25 rem non dice quanti px produce se non conosci il font radice.
Unità CSS collegate
Le unità relative e assolute in CSS hanno ruoli diversi nei layout.
| Unità o scelta | Relazione | Uso tipico |
|---|---|---|
| em | relativa al font del contesto | componenti |
| rem | relativa alla radice | design system |
| px | unità CSS fissa | dettagli |
| % | relativa al contenitore | layout |
| vw | larghezza viewport | sezioni fluide |
| vh | altezza viewport | schermi interi |
| ch | larghezza dello zero | testi |
| line-height | rapporto verticale | leggibilità |
Token CSS e coerenza tipografica
Convertire px in rem è utile quando si passa da un mockup grafico a un sistema di componenti. Il designer può consegnare misure in pixel, mentre il codice usa rem per testi e spaziature.
La scelta del font radice deve essere chiara prima di compilare la tabella. Con root 16 px, 20 px diventano 1,25 rem; con root 10 px, lo stesso valore diventa 2 rem.
Per un design system conviene definire pochi gradini ricorrenti: 0,75 rem, 1 rem, 1,25 rem, 1,5 rem, 2 rem. In questo modo il layout resta più ordinato rispetto a decine di valori casuali.
Non tutte le misure devono passare a rem. Bordi sottili, ombre e dettagli grafici possono restare in px quando serve un controllo visivo più stabile.
Accessibilità e scala tipografica
Usare rem non rende automaticamente un interfaccia più accessibile, ma aiuta a rispettare una scala tipografica coerente quando il font radice cambia. Il vantaggio emerge soprattutto nei progetti con molti componenti riutilizzati.
Quando traduci misure da un design statico, non convertire tutto meccanicamente. Alcuni spazi possono essere arrotondati a token vicini per mantenere armonia visiva e semplificare il codice CSS.
Per documentare una libreria, indica sempre il root usato nella tabella px-rem. Senza quel valore, la stessa misura in rem può produrre pixel diversi in un altro progetto.
Documentare il valore root
Quando condividi una tabella px-rem con sviluppatori o designer, scrivi sempre il valore root usato. Senza questa riga, 1,5 rem può voler dire 24 px, 15 px o un altro valore, a seconda del progetto.
Domande frequenti
D: 16 px quanti rem sono?
R: Con font radice 16 px, 16 px sono 1 rem.
D: 24 px in rem con root 16?
R: 24 px diventano 1,5 rem.
D: Perché il risultato cambia se cambio root?
R: Perché rem è relativo al font radice. Il numero in rem dipende da quel valore.
D: Posso usare valori negativi?
R: In CSS alcuni valori possono essere negativi, ma per dimensioni testo e spaziature comuni si usano quasi sempre valori non negativi.
D: rem è sempre migliore di px?
R: No. rem è utile per scala tipografica e spaziature coerenti; px resta comodo per bordi o misure precise.
D: Come torno da rem a px?
R: Moltiplica i rem per il font radice. Con root 16 px, 2 rem sono 32 px.