Relativní vs absolutní jednotky v CSS

Ahoj, je mi jasné, že už jste to řešily mnohokrát, protože minimálně tady na stránkách jsem dost diskuzí četl. Bohužel neodnesl jsem si z z toho jednoznačnou odpověď jaké jednotky používat na fonty, jaké na odsazení, na velikost obrázků apod. a hlavně proč. Navíc spoust těch diskuzí je relativně starých a prohlížeče, které se v té době řešily už 99% lidí dnes nepoužívá. Jako začátečník zkoumám a hraju si, takže jsem zkoušel celé CSS vytvořit v em jednotkách. Asi tušíte, co se stalo, při pokusu o zvětšení písma se mi zvětšuje celá webová stránka. Pokud jsem měl všechno v pixelech a fonty v em, bylo zvětšování písma v pořádku, ale zase zlobil zoom stránky. Jaká je tedy nejlepší varianta, aby vše fungovalo, tak jak má ? Nebo je to jenom zbožné přání ? Díky za komentáře.

Chamurappi:
„Jak zlobil zoom? Asi by pomohlo bavit se nad nějakou ukázkou…“
Mám poslat celý kód ?

Respektive, mám poslat dvě ukázky ? Jednu v px a druhou v em ?

Takže tady je CSS celé v em : http://kod.djpw.cz/valb - nefunguje zvětšování písma. S písmem se zároveň zvětšuje stránka.
Tady je písmo v em, zbytek v pixelech : http://kod.djpw.cz/walb při zoomování se mi z textu v "main" stává nečitelná "nudle" kvůli pevnému odsazení. Co je zajímavé, že mi to dělá asi jenom Firefox. V chromiu to vypadá normálně.

Chamurappi:
„Před rokem jsem cosi sepsal.“
Takže v podstatě : na písmo procenta, nebo klíčová slova a na všechno ostatní můžu použít em, jestli jsem to správně pochopil.

Jinak, jak se chová text formátovaný klíčovými slovy například na mobilních zařízeních ?

Tady nejde editovat ? Přepsal jsem ten kód, ale nemůžu ty staré odkazy smazat.