UX / UI Nízký dopad Střední 30–60 min

Relativní jednotky písma (rem/em vs px)

Preferujte rem/em před pevnými px u velikostí písma.

Co to je

Velikost písma lze zadat pevně v px, nebo relativně v rem/em. Rem vychází ze základní velikosti dokumentu, takže reaguje na uživatelské nastavení velikosti písma v prohlížeči.

Proč to řešit

Pevné px ignorují, když si uživatel v prohlížeči zvětší výchozí písmo (časté u lidí se slabším zrakem). Rem/em toto nastavení respektují, jsou přístupnější a snáz se škálují konzistentně.

Jak na to

1Nastavte základní velikost na <html> (typicky 100% = 16px).
2Velikosti písma zadávejte v rem (např. 1rem, 1.25rem, 0.875rem).
3em používejte tam, kde má velikost vycházet z rodiče.
4Pevné px nechte jen pro detaily, kde škálování nedává smysl (např. 1px linky).

Příklad

Špatně

h1 { font-size: 32px; }
p  { font-size: 14px; }

Správně

html { font-size: 100%; }
h1 { font-size: 2rem; }
p  { font-size: 0.95rem; }

Závěr

Relativní jednotky jsou přístupnější a udržovatelnější. Není to havárie jako blokovaný zoom, ale u nového webu se vyplatí dělat to rovnou správně přes rem. Respektuje to uživatele, kteří si zvětšují písmo.

Související témata