em je relativní velikost, pořád někde musíš mít základ absolutně, např. 14 px, poté jen řekneš, že nějaký nadpis je ve velikosti 1.2 em (tj. vezme se písmeno m z 14 px zobrazení a zvětší se o 20 %, podle toho se poté zvětší všechny další písmena - ne všechna písmenka jsou totiž stejně velká).

Zároveň em či jiné relativní jednotky je vhodné používat na mezery (vertikální i horizontální), tj. u malých písmen budou automaticky malé mezery, u velkých naopak velké, pomáhá to čtení textu. Chceš-li o tom něco vědět, hledat a studuj typografii, sazbu textu.

Stejného efektu můžeš docílit i zadáváním přesných px, ale musíš mít po ruce kalkulačku, jakákoliv změna je poté dost složitá a musíš jí upravit na spousty místech, less a další css preprocesory tenhle problém ale eliminují.

17. 5. 2018 12:01:33

https://webtrh.cz/diskuse/rozdil-mezi-velikosti-pisma-em-a-px/#reply1346154

Michal Jeřábek

17. 5. 2018 12:36:37

Jednotky em se používají, protože je to těžší. Můžete si pak připadat jako lepší kodér.

17. 5. 2018 12:36:37

https://webtrh.cz/diskuse/rozdil-mezi-velikosti-pisma-em-a-px/#reply1346153

Tomáš Herout

17. 5. 2018 13:20:42

Udělal jsem na toto téma článek. Měl jsem ho v plánu už dlouho, protože tyto dotazy řeším často. Článek je zde:

font-size css vlastnost

17. 5. 2018 13:20:42

https://webtrh.cz/diskuse/rozdil-mezi-velikosti-pisma-em-a-px/#reply1346152

ideasro

(19 hodnocení)

17. 5. 2018 13:30:41

Díky za vysvětlení !

17. 5. 2018 13:30:41

https://webtrh.cz/diskuse/rozdil-mezi-velikosti-pisma-em-a-px/#reply1346151

David Musil

(72 hodnocení)

17. 5. 2018 17:47:22

Napsal Tomáš Herout;1463313
Udělal jsem na toto téma článek. Měl jsem ho v plánu už dlouho, protože tyto dotazy řeším často. Článek je zde:
font-size css vlastnost

Moc pekny clanek, Tomasi.

17. 5. 2018 17:47:22

https://webtrh.cz/diskuse/rozdil-mezi-velikosti-pisma-em-a-px/#reply1346150

plusn

(1 hodnocení)

17. 5. 2018 19:05:21

Napsal Tomáš Herout;1463313
Udělal jsem na toto téma článek. Měl jsem ho v plánu už dlouho, protože tyto dotazy řeším často. Článek je zde:
font-size css vlastnost

"em" dnes již neznamená velikost M (některé fonty ani nemají znak M), ale násobek velikosti výšky fontu "parent" elementu a chybí mi v tom výčtu "rem" (násobek velikosti výšky fontu "root elementu") - v moderním css snad nejpoužívanější, naopak se vyvaruj úplně používání px snad jen mimo border, shadow apod.

17. 5. 2018 19:05:21

https://webtrh.cz/diskuse/rozdil-mezi-velikosti-pisma-em-a-px/#reply1346149

Dominik Hašek

(12 hodnocení)

17. 5. 2018 19:21:37

plusn: z jakého důvodu je dobré se vyvarovat používání px u fontů?

17. 5. 2018 19:21:37

https://webtrh.cz/diskuse/rozdil-mezi-velikosti-pisma-em-a-px/#reply1346148

Tomáš Herout

17. 5. 2018 19:29:52

Napsal Toliceek;1463384
plusn: z jakého důvodu je dobré se vyvarovat používání px u fontů?

Já nevidím žádný důvod, proč nepoužívat pixely u fontů. Naopak. Pokud chcete mít kontrolu nad velikostí písmen v případě, kdy by špatná velikost mohla způsobit nějaké potíže (třeba vytéct někam mimo), tak je určení v px to nejvhodnější řešení. Různé prohlížeče a monitory mohou sice brát px s jemnými rozdíly, ale určitě nebude u fontu 1px něco jiného, než 1px třeba u height.

17. 5. 2018 19:29:52

https://webtrh.cz/diskuse/rozdil-mezi-velikosti-pisma-em-a-px/#reply1346147

Dominik Hašek

(12 hodnocení)

17. 5. 2018 19:36:33

Tomáš Herout: jsem stejného názoru, proto mě překvapilo že tu někdo doporučuje vyvarovat se použití velikost fontů v px a rád bych věděl jeho argumenty.

17. 5. 2018 19:36:33

https://webtrh.cz/diskuse/rozdil-mezi-velikosti-pisma-em-a-px/#reply1346146

Michal Jeřábek

17. 5. 2018 19:57:35

Napsal Tomáš Herout;1463385
Já nevidím žádný důvod, proč nepoužívat pixely u fontů. Naopak. Pokud chcete mít kontrolu nad velikostí písmen v případě, kdy by špatná velikost mohla způsobit nějaké potíže (třeba vytéct někam mimo), tak je určení v px to nejvhodnější řešení. Různé prohlížeče a monitory mohou sice brát px s jemnými rozdíly, ale určitě nebude u fontu 1px něco jiného, než 1px třeba u height.

Důvod je ten, že uživatel může změnit výchozí velikost písma v prohlížeči. Když jsou ale hodnoty v px, tak se písmo nezmění. (To je důležité kvůli přístupnosti.)

V praxi je to často spíše zbytečná komplikace, protože prohlížeče dnes dokáží zvětšit stránku inteligentnějším způsobem — zmenšením viewportu — než za starých časů, takže je lepší používat CTRL+PLUS (popř. scroll), protože to nezpůsobí rozpad webu, protože pro menší viewport je stránka nastylovaná (popřípadě dojde prostě ke zvětšení všeho) a je to mnohem jednodušší. (Je to vždy otázkou konkrétních uživatelů webu. V mnoha případech to může být smysluplné. Pokud se navíc místo em použijí rem, tak to není ani tak náročné.)

Údajné výhody jednotek em v praxi ale většinou nejsou žádné výhody. Zpravidla od grafika nedostanete takový návrh, kde byste mohl prostě na mobilu zmenšit písmo a vše ostatní se přizpůsobí, takže akorát musíte vše pracně přepočítávat. Změny bývají často naopak mnohem komplikovanější, protože změna jedné věci způsobí změnu deseti dalších, které měnit nechcete.

17. 5. 2018 19:57:35

https://webtrh.cz/diskuse/rozdil-mezi-velikosti-pisma-em-a-px/#reply1346145

Dominik Hašek

(12 hodnocení)

17. 5. 2018 20:16:16

Napsal mjerabek;1463392
Důvod je ten, že uživatel může změnit výchozí velikost písma v prohlížeči. Když jsou ale hodnoty v px, tak se písmo nezmění. (To je důležité kvůli přístupnosti.)

"To je důležité kvůli přístupnosti"

Tuhle argumentaci jsem četl už nesčetněkrát, ale je to totální ptákovina (v dnešní době).

17. 5. 2018 20:16:16

https://webtrh.cz/diskuse/rozdil-mezi-velikosti-pisma-em-a-px/#reply1346144

Michal Jeřábek

17. 5. 2018 20:44:49

Napsal Toliceek;1463398
"To je důležité kvůli přístupnosti"
Tuhle argumentaci jsem četl už nesčetněkrát, ale je to totální ptákovina (v dnešní době).

Souhlas, ale je to pořád ten nejsmysluplnější argument pro jejich běžné používání. :)

Ale má to samozřejmě řadu rozumných využítí.

17. 5. 2018 20:44:49

https://webtrh.cz/diskuse/rozdil-mezi-velikosti-pisma-em-a-px/#reply1346143

Tomáš Herout

17. 5. 2018 22:22:30

Napsal mjerabek;1463392
Důvod je ten, že uživatel může změnit výchozí velikost písma v prohlížeči. Když jsou ale hodnoty v px, tak se písmo nezmění. (To je důležité kvůli přístupnosti.)

Ale já nikde netvrdím, že kodér nemá nikdy používat písmo i v relativní velikosti s možností měnit velikosti písma i pro uživatele. Jen tvrdím, že často je vhodné napsat velikost písma natvrdo do pixelů, protože relativní velikost může způsobovat problémy. Klasickým případem může být písmo v menu, kde změnou velikosti fontu se dá nadělat víc škody než užitku. Stále trvám na tom, že psaní velikosti fontu v pixelech rozhodne není nic zastaralého. Právě naopak. Často je to zcela správná cesta.

17. 5. 2018 22:22:30

https://webtrh.cz/diskuse/rozdil-mezi-velikosti-pisma-em-a-px/#reply1346142