Da pixel a rem, em, pt e percentuale: la dimensione di base la scegli tu.
Inserisci un valore in pixel e vedi subito tutti gli equivalenti.
Calcolata sulla base che hai scelto. Clicca su una riga per usarla.
| Uso tipico | px | rem |
|---|
La differenza fondamentale è a cosa è riferita la misura. Il px è un'unità assoluta: 16px è 16 pixel sullo schermo, sempre, indipendentemente dalle preferenze dell'utente. Il rem è un'unità relativa: vale quanto la dimensione di base del documento, che per impostazione predefinita è 16px. Questo significa che se l'utente ha impostato nel browser una dimensione del testo più grande, i valori in rem crescono insieme a quella, mentre quelli in px restano fermi. È il motivo per cui le linee guida di accessibilità (WCAG) raccomandano di usare rem per i testi: rispettare la preferenza dell'utente è un requisito, non un vezzo.
Sembrano quasi uguali ma non lo sono. Il rem fa riferimento alla radice del documento (<html>), quindi è sempre uguale per tutto. L'em fa riferimento alla dimensione dell'elemento padre: se un paragrafo è a 1,2rem, un em al suo interno vale 1,2rem; se dentro metti una lista a 0,9em, quella vale 1,08rem, perché si applica in modo annidato e cumulativo. In pratica: usa rem per quasi tutto, e em solo per i padding e i margini interni che devono crescere insieme al testo che contengono.
Perché separa la scala tipografica dalla misura fisica. Con rem, cambiando una sola riga — la dimensione base — l'intero layout si adatta: per esempio passando da 16px a 18px tutto il sito cresce del 12,5% in modo proporzionato, senza toccare una sola regola. È anche il presupposto delle custom properties nel CSS moderno: si dichiara html{font-size:100%} e da lì in poi tutto il resto è in rem, il che rende il tema modificabile da un unico punto. Resta però una nota pratica: i padding, i border e le shadow in px sono spesso preferibili, perché devono restare costanti e non crescere con il testo.
Il pt è un'unità tipografica tradizionale: 1pt corrisponde a 1/72 di pollice, cioè circa 1,333px. Quindi la relazione con il pixel è 1px = 0,75pt, e 16px equivalgono a 12pt. La conversione pt ↔ px è sempre la stessa, ma attenzione: i valori in pt nel CSS non sono gli stessi dei punti tipografici di Word o InDesign, perché il CSS li definisce come 1pt = 1,25px. Usali solo per compatibilità con software che ragiona in punti; per il web moderno rem è quasi sempre la scelta giusta.
Sì: gratuito, senza registrazione, calcoli nel browser. Nessun dato lascia il dispositivo. Puoi cambiare la dimensione base, vedere simultaneamente tutte le unità, copiare la regola CSS pronta da incollare e consultare la tabella dei valori più comuni del CSS.