Convertitore Unità CSS Online
Converti tra px, rem, em, vw, vh e altre unita CSS, nel tuo browser.
Click any value to copy
Perche usarlo
Design responsivo senza calcoli manuali
Tutte le unita CSS
px, rem, em, %, vw, vh, pt e altro. Conversione istantanea tra qualsiasi coppia.
Base configurabile
Regola la dimensione del font base per calcolare valori rem/em precisi per il tuo progetto.
Istantaneo
Risultati in tempo reale mentre digiti. Nessun pulsante, nessuna attesa.
Nessuna registrazione
Strumento per uso quotidiano disponibile all'istante, senza account ne installazioni.
Come funziona
Tre passaggi, senza complicazioni
Inserisci il valore
Digita il valore numerico e seleziona l'unita sorgente (ad es. 24px). Regola la dimensione del font base se differisce da 16px.
Ottieni tutti gli equivalenti
Il convertitore calcola all'istante l'equivalente in rem, em, %, vw, pt e altre unita CSS comunemente usate.
Usa il valore nel tuo CSS
Copia il valore necessario direttamente nel tuo foglio di stile. Nessun calcolo manuale, nessun errore.
FAQ
Hai delle domande?
Usa px per i valori che non devono scalare con le preferenze dell'utente: bordi sottili (1px), ombre, posizioni assolute. Usa rem per le dimensioni del font e i margini che devono rispettare le preferenze di accessibilita dell'utente: se un utente aumenta la dimensione del font base nel browser (la maggior parte degli screen reader e degli utenti ipovedenti lo fa), i valori rem scalano automaticamente. Usa em per i valori relativi alla dimensione del font dell'elemento genitore: utile nei componenti che devono mantenere le loro proporzioni interne indipendentemente dal contesto.
Il valore di 16px come dimensione del font base fu stabilito dai browser web alla fine degli anni '90, derivato dalle tipiche risoluzioni dei monitor dell'epoca (72-96 DPI) e dagli standard di leggibilita per la lettura su schermo. E approssimativamente equivalente a 12 punti tipografici (12pt), la dimensione standard per il corpo del testo nei documenti stampati dall'era di Gutenberg. Il W3C lo adotta come valore iniziale per la proprieta font-size.
La specifica WCAG 1.4.4 (Ridimensionamento del testo) richiede che il testo possa essere ingrandito fino al 200% senza perdita di contenuto o funzionalita. Se usi px per le dimensioni del font, il testo non scala quando l'utente cambia la dimensione base nelle impostazioni del browser (Impostazioni > Aspetto > Dimensione carattere in Chrome/Firefox). Se usi rem, il testo scala automaticamente. Per questo motivo le linee guida sull'accessibilita raccomandano rem per font-size e line-height, ma accettano px per bordi e decorazioni.
vw (viewport width) e vh (viewport height) sono percentuali della dimensione della finestra del browser. 1vw = 1% della larghezza della finestra. Per la tipografia fluida si usa la funzione CSS clamp(): font-size: clamp(1rem, 2.5vw, 2rem) definisce una dimensione minima (1rem), una dimensione preferita che scala con il viewport (2.5vw) e un massimo (2rem). Questo produce un testo che cresce gradualmente con la dimensione dello schermo senza salti bruschi, eliminando la necessita di media query per la tipografia.
CSS dispone di unita fisiche assolute: cm, mm, in, pt e pc. Il problema e che sugli schermi queste unita non corrispondono alle loro misure fisiche reali. Sugli schermi ad alta densita (Retina, 4K), 1cm in CSS puo misurare 0.8cm o 1.2cm fisicamente a seconda del dispositivo e del DPI dichiarato. Solo nei media di stampa (print media query) cm e mm corrispondono esattamente alla misura fisica. Per questo i web designer usano px, rem, em e unita relative, riservando le unita assolute agli stili di stampa.
Unita CSS: specifica, storia e il trucco del 62.5%
La specifica CSS Units and Values (CSS Values Level 3) fu pubblicata dal W3C nel 2015 e standardizzo le unita viewport (vw, vh, vmin, vmax) che i browser avevano iniziato a implementare sperimentalmente dal 2012. Le unita viewport risolvono un problema fondamentale del design responsivo: creare layout e tipografie che si adattino alla dimensione dello schermo senza media query. CSS Values Level 4 (in stato di bozza avanzato) introduce le unita di container query (cqw, cqh, cqi, cqb, cqmin, cqmax), che sono percentuali del contenitore CSS piu vicino anziche del viewport, disponibili in tutti i principali browser dalla fine del 2022.
Il trucco del 62.5% e una tecnica storica per semplificare l'uso di rem: impostando font-size: 62.5% sull'elemento html (equivalente a 10px assumendo una base di 16px), i calcoli in rem diventano banali (1.6rem = 16px, 2.4rem = 24px). Fu popolarizzato da Jonathan Snook intorno al 2011 nel contesto della crescita del design responsivo. Tuttavia questa tecnica presenta un problema di accessibilita: se un utente ha configurato una dimensione del font base diversa da 16px nel suo browser, il 62.5% la regola in modo errato, rompendo il ridimensionamento. Per questo motivo le linee guida moderne sull'accessibilita sconsigliano questa tecnica a favore di lasciare il font-size dell'html invariato e usare rem direttamente.
CSS Values Level 4 introduce anche unita tipografiche relative: cap (altezza delle maiuscole), ch (larghezza del glifo 0), ic (larghezza del glifo CJK 水), lh (line-height dell'elemento), rlh (line-height radice), ex (altezza della x minuscola). Queste unita permettono di creare spaziature perfettamente proporzionate alla tipografia senza affidarsi a valori numerici fissi. L'unita ch e particolarmente utile per impostare la larghezza massima delle colonne di testo (max-width: 65ch e una misura di leggibilita ottimale secondo la ricerca tipografica, equivalente a circa 65 caratteri per riga).