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
- 1Imposta la dimensione di base su <html> (tipicamente 100% = 16px).
- 2Indica le dimensioni del carattere in rem (ad es. 1rem, 1.25rem, 0.875rem).
- 3Usa em dove la dimensione deve derivare dal genitore.
- 4Lascia i px fissi solo per i dettagli dove la scalatura non ha senso (ad es. bordi da 1px).
Esempio
h1 { font-size: 32px; }
p { font-size: 14px; }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