PX in REM: La Guida dello Sviluppatore alla Tipografia Scalabile
Scopri perché le unità rem migliorano l'accessibilità, come calcolarle e le migliori pratiche per la tipografia responsive in CSS.
La scelta tra px e rem in CSS non è solo una preferenza stilistica — ha conseguenze dirette sull'accessibilità, il controllo utente e il design responsive. Milioni di utenti impostano una dimensione del carattere personalizzata nelle preferenze del browser, e un foglio di stile scritto interamente in px ignora completamente quella impostazione.
Questa guida spiega la meccanica di ogni unità, la formula per convertire px in rem e le regole pratiche per quando usare ciascuna in un vero codebase CSS.
Comprendere le unità CSS (px, rem, em, vh)
CSS offre multiple unità di lunghezza per diversi casi d'uso. px (pixel) è un'unità assoluta. rem (root em) è un'unità relativa basata sul font-size dell'elemento radice (<html>). em è un'unità relativa basata sul font-size dell'elemento corrente o del suo antenato più vicino con un font-size esplicito. vh e vw sono relative al viewport: 1vh = 1% dell'altezza del viewport. Ogni unità ha casi d'uso appropriati e inappropriati.
Tool gratuito Convertitore PX in REM Converti istantaneamente i valori in pixel in rem con qualsiasi dimensione basePerché px è problematico per l'accessibilità
I browser permettono agli utenti di impostare una dimensione del carattere predefinita nelle preferenze (tipicamente 16px di default, ma gli utenti possono impostarla a 20px, 24px o più). Quando imposti font-size: 16px in CSS, questo sovrascrive la preferenza dell'utente. Questo viola il criterio di successo WCAG 2.1 1.4.4 (Ridimensionamento del testo), che richiede che il testo possa essere ridimensionato fino al 200% senza perdita di contenuto o funzionalità. La tipografia basata su rem rispetta la dimensione del carattere radice dell'utente.
Come funziona rem (root font-size)
L'unità rem è sempre relativa al font-size dell'elemento <html>. Per impostazione predefinita, i browser lo impostano a 16px. Quindi 1rem = 16px, 1.5rem = 24px, 0.875rem = 14px. Se un utente aumenta la dimensione del carattere del browser a 20px, allora 1rem = 20px — tutti i valori basati su rem si scalano proporzionalmente. Non impostare mai il font-size su <html> in pixel (es. html { font-size: 16px }) perché questo vanifica lo scopo. Usa una percentuale: html { font-size: 112.5% } imposta la base a 18px su un browser predefinito a 16px.
Tool gratuito Verificatore di Contrasto Colori Verifica i rapporti di contrasto WCAG 2.1 insieme all'accessibilità della dimensione del carattereFormula PX in REM
La formula è semplice: rem = px / font-size-base. Con la base predefinita di 16px: 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 24px = 1.5rem, 32px = 2rem. Nei preprocessori CSS (Sass, Less), puoi definire una funzione. Nel CSS moderno, le proprietà personalizzate e calc() possono automatizzare questo senza un preprocessore.
/* Funzione Sass */
@function rem($px) {
@return #{$px / 16}rem;
}
/* Utilizzo */
font-size: rem(18); /* → 1.125rem */
/* Alternativa CSS puro */
:root {
--base: 16;
}
.text {
font-size: calc(18 / var(--base) * 1rem);
}Quando usare rem vs em vs px
Usa rem per la tipografia globale (testo corpo, titoli, etichette) e per la spaziatura che dovrebbe scalare con la preferenza di dimensione del carattere dell'utente. Usa em per la spaziatura a livello di componente che dovrebbe essere proporzionale al proprio font-size (padding all'interno di un bottone). Usa px per bordi, ombre ed elementi di layout che non dovrebbero scalare con il testo (i bordi da 1px devono rimanere 1px indipendentemente dalla dimensione del carattere). Usa le unità viewport (vh, vw) per elementi di layout che dovrebbero riempire o relazionarsi al viewport.
Proprietà CSS personalizzate per la base rem
Un pattern comune è impostare una proprietà CSS personalizzata per la dimensione del carattere base per consentire una facile regolazione globale. Imposta il font-size come percentuale su <html> per rispettare le preferenze dell'utente, poi usa rem ovunque. La funzione clamp() crea tipografia fluida che si scala tra valori minimo e massimo in base alla larghezza del viewport, senza breakpoint di media query.
/* Base accessibile */
html {
font-size: 100%;
}
body {
font-size: 1rem;
}
h1 {
font-size: 2rem;
}
/* Tipografia fluida con clamp */
.hero-title {
font-size: clamp(1.5rem, 4vw, 3rem);
}