Rozdíl mezi velikosti písma - em a px

Ahoj, často narážím na velikost písma v px. Ale někdy také v em.
Chci se zeptat proč se používá em a ne jen px ?

Jaké má em výhody z hlediska tvorby webu.

Dík

css - What is the difference between px, em and ex? - Stack Overflow

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í.

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

Díky za vysvětlení !

Původně odeslal Tomáš Herout ↪

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.

Původně odeslal Tomáš Herout ↪

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.

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

Původně odeslal Toliceek ↪

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.

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.

Původně odeslal Tomáš Herout ↪

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.

Původně odeslal mjerabek ↪

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ě).

Původně odeslal Toliceek ↪

"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í.

Původně odeslal mjerabek ↪

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.

Původně odeslal mjerabek ↪

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

No právě, nejsmysluplnější argument který je ale v praxi blbost :-D Neříkám že občas není vhodné tuto jednotku použít (například u obsahu článku kde velikost písma z pohledu designu nehraje roli). Stejně tak občas používám například jednotky vw a vh, když se to zrovna hodí.

Nejde mi ale do hlavy jak někdo může obhajovat názor nepoužívání px, takový člověk nemohl v životě kódovat nějakou složitější / designovou šablonu a to teď nemířím na tebe.

Původně odeslal Tomáš Herout ↪

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.

Tak to já vás z toho zase neobviňuji. Budeme-li se ale držet toho argumentu o přístupnosti, tak zrovna menu je jedna z věcí, u které by bylo vhodné, aby byla zvětšovatelná. Ale jak správně píšete, je to místo, kde to zpravidla způsobí více škody než užitku, takže to nakonec není přístupné. Takže vlastně spolu všichni souhlasíme. Otázka akorát je, jestli bychom se ta menu ale neměli snažit vyřešit tak, aby dokázala pojmout jakékoliv písmo. Jestli si tu jenom trochu neobhajujeme vlastní lenost :).

Původně odeslal mjerabek ↪

Otázka akorát je, jestli bychom se ta menu ale neměli snažit vyřešit tak, aby dokázala pojmout jakékoliv písmo. Jestli si tu jenom trochu neobhajujeme vlastní lenost :).

Já si myslím že pokud má někdo problém se zrakem, už dávno používá softwarovou lupu (nebo zvětšení v prohlížeči), protože majorita stránek na tuto "přístupnost" velikosti písma úplně ****. Hrotit to mi přijde podobně "šáhlé" jako prodávat magazín ve 3 verzích, dle velikosti písma, protože ne každý má u sebe přeci pořád lupu nebo brýle.

Hlavně toto není práce kodéra, ale grafika, aby případně počítal s tím, že každý element může mít velikost písma od 14px do 40 px.

Původně odeslal Toliceek ↪

Já si myslím že pokud má někdo problém se zrakem, už dávno používá softwarovou lupu (nebo zvětšení v prohlížeči), protože majorita stránek na tuto "přístupnost" velikosti písma úplně ****. Hrotit to mi přijde podobně "šáhlé" jako prodávat magazín ve 3 verzích, dle velikosti písma, protože ne každý má u sebe přeci pořád lupu nebo brýle.

Hlavně toto není práce kodéra, ale grafika, aby případně počítal s tím, že každý element může mít velikost písma od 14px do 40 px.

Některé weby reagují na manuální zvětšování v prohlížeči pěkně prasácky :-) Nejsou na to moc připravené.