Pripojenie zlyhalo. Skúste to prosím znova.

Preskočiť na obsah
SEO Tools
Pomocník a dokumentácia
UX / UI Nízky dopad Stredné 30–60 min

Relatívne jednotky písma (rem/em vs px)

Preferujte rem/em pred pevnými px pri veľkostiach písma.

Čo to je

Veľkosť písma možno zadať pevne v px, alebo relatívne v rem/em. Rem vychádza zo základnej veľkosti dokumentu, takže reaguje na používateľské nastavenie veľkosti písma v prehliadači.

Prečo to riešiť

Pevné px ignorujú, keď si používateľ v prehliadači zväčší východiskové písmo (časté u ľudí so slabším zrakom). Rem/em toto nastavenie rešpektujú — sú prístupnejšie a ľahšie sa škálujú konzistentne.

Ako na to

  1. 1Nastavte základnú veľkosť na <html> (typicky 100% = 16px).
  2. 2Veľkosti písma zadávajte v rem (napr. 1rem, 1.25rem, 0.875rem).
  3. 3em používajte tam, kde má veľkosť vychádzať z rodiča.
  4. 4Pevné px nechajte len pre detaily, kde škálovanie nedáva zmysel (napr. 1px linky).

Príklad

Zle
h1 { font-size: 32px; }
p  { font-size: 14px; }
Správne
html { font-size: 100%; }
h1 { font-size: 2rem; }
p  { font-size: 0.95rem; }

Záver

Relatívne jednotky sú prístupnejšie a udržateľnejšie. Nie je to havária ako blokovaný zoom, ale pri novom webe sa oplatí robiť to rovno správne cez rem. Rešpektuje to používateľov, ktorí si zväčšujú písmo.

Súvisiace témy