Connessione non riuscita. Per favore riprova.

Vai al contenuto
SEO Tools
Aiuto e documentazione
UX / UI Impatto basso Medio 30–60 min

Unità relative del carattere (rem/em vs px)

Preferisci rem/em ai px fissi per le dimensioni del carattere.

Cos'è

La dimensione del carattere si può indicare in px fissi o in modo relativo in rem/em. Il rem deriva dalla dimensione di base del documento, quindi reagisce all'impostazione utente della dimensione del carattere nel browser.

Perché è importante

I px fissi ignorano l'eventuale ingrandimento del carattere predefinito impostato dall'utente nel browser (frequente nelle persone ipovedenti). Rem/em rispettano questa impostazione — sono più accessibili e scalano più facilmente in modo coerente.

Come fare

  1. 1Imposta la dimensione di base su <html> (tipicamente 100% = 16px).
  2. 2Indica le dimensioni del carattere in rem (ad es. 1rem, 1.25rem, 0.875rem).
  3. 3Usa em dove la dimensione deve derivare dal genitore.
  4. 4Lascia i px fissi solo per i dettagli dove la scalatura non ha senso (ad es. bordi da 1px).

Esempio

Sbagliato
h1 { font-size: 32px; }
p  { font-size: 14px; }
Corretto
html { font-size: 100%; }
h1 { font-size: 2rem; }
p  { font-size: 0.95rem; }

Conclusione

Le unità relative sono più accessibili e manutenibili. Non è un disastro come lo zoom bloccato, ma su un nuovo sito conviene farlo subito correttamente con rem. Rispetta gli utenti che ingrandiscono il carattere.

Argomenti correlati