Kaskádové styly – velikost písma

V předchozím díle jsem ukázal, jak nastavit font. V tomto díle se budu věnovat problematice velikosti písma. Kaskádové styly totiž nabízí tak bohaté možnosti nastavení velikosti písma, že jsem se rozhodl této problematice věnovat celý díl.

Samotné nastavení velikosti písma se provádí pomocí vlastnosti font-size. Samotné používání je velice jednoduché. Pro příklad si uvedeme zápis, který nastaví všechny texty uvnitř značky i na 150% původní velikosti (značka i nastavuje text na skloněné písmo – kurzívu):

i { font-size: 150%; }

To si snadno vyzkoušíte na následujícím příkladu:

Příklad textu

Výsledek je tento: Příklad textu

Vtip je v tom, že velikost textu můžete nastavovat v mnoha různých jednotkách, nejenom v procentech oproti původnímu textu. Některé způsoby Vám dovolují nastavit velikost písma absolutně, tedy tím, že přímo určíte velikost písma třeba v centimetrech. Jiné způsoby nastavují velikost písma relativně vůči jinému písmu, tedy říkají, kolikrát má být písmo menší, či větší, než jiné písmo.

Začali jsme tedy základním relativním způsobem určení velikosti písma. Určení velikost pomocí procent je prvním takovým způsobem. Určuje, na kolik procent se zvětší velikost písma oproti tomu, kdyby jste vlastnost font-size nepoužili. Pro názornost třeba 200% zvětší písmo na dvojnásobek, 300% na trojnásobek, 50% znamená poloviční velikost písma oproti normálu atd.

Podobným způsobem pro určování velikosti je jednotka em. Tato jednotka se používá podobně, jako když použijeme procenta, ale na rozdíl od procent napíšeme přímo číslo, které říká, kolikrát má být výška písma větší,než kdyby jste vlastnost font-size nepoužili. Tedy 2em zvětší výšku písma na dvojnásobek, 3em na trojnásobek, 0.5em znamená poloviční velikost písma atd. Takže stejného výsledku jako v předchozím případě lze dosáhnout pomocí zápisu:

i { font-size: 1.5em; }

Jednotka em má název odvozený od to, že se vlastně jedná o výšku písmene velké M. Písmeno M má být totiž zhruba stejně široké, jako je výška písma. Podobnou jednotkou je ex, která je zase odvozená od písmene malé x. Tato jednotka znamená výšku písmene x. Myslím si ale, že jednotka ex má pro Vás jenom malý význam, takže ji uvádím spíše pro úplnost.

Dalším způsobem je určení velikosti písma pomocí slov. Například slovo medium znamená, že písmo bude mít normální velikost. Slovo large, že bude o něco větší, než je normální velikost. Ještě větší je x-large a největší je xx-large. Trochu to připomíná velikosti oděvů. Naopak menší písmo, než je normální velikost získáme použitím small, ještě menší pomocí x-small a nejmenší pomocí xx-small.

Ačkoli norma nazývá tato slova jako absolutní určení velikosti, řekl bych, že tomu tak úplně není. Nevíte totiž, jak bude veliká normální velikost písma. Ta může být pokaždé trochu jiná, takže ve skutečnosti říkáte, kolikrát je písmo větší vůči normálnímu písmu.

Dále je také možno používat slova larger a smaller. Tato slovo zvětšují, respektive zmenšují velikost písma o jednu v řadě. Takže máte-li písmo s velikostí medium, bude mít po použití slova larger velikost large.

Norma pro CSS je u určování velikosti pomocí slov nejednotná. Existují totiž normy CSS 1 a upravená a rozšířená norma CSS 2. V tomto případě nejsou obě normy slučitelné, není zachována kompatibilita zdola. V následující tabulce uvidíte, jak se písmo zvětší oproti normálnímu písmu v každé verzi normy pro CSS:

Použitý styl	Velikost vůči normálnímu písmu
	CSS 1	CSS 2
i {font-size: xx-small;}	30%	58%
i {font-size: x-small;}	44%	69%
i {font-size: small;}	67%	83%
i {font-size: medium;}	100%	100%
i {font-size: large;}	150%	120%
i {font-size: x-large;}	225%	144%
i {font-size: xx-large;}	338%	173%

Tento rozdíl mezi normami je bohužel tak velký, že těžko říci, zda není lépe se používání slov v určování velikosti písma raději vyhnout. Podle mého názoru by se toto rozhodně tvůrcům norem stávat nemělo.

Pokročme tedy k dalším jednotkám. Pro relativní určení velikosti máme k dispozici ještě další jednotku, o které jsem se zatím nezmínil. Je to jednotka px, která znamená pixel. Ta určuje výšku písma v pixelech, tedy bodech na obrazovce, či tiskárně. Problém s jednotkou pixel je ten, že bod na obrazovce je jinak veliký, než třeba na tiskárně.

Přesedlejme teď na absolutní jednotky. Pro nás snadno pochopitelnou jednotkou je mm – milimetr a cm – centimetr. Dále se používá in – palec, který představuje 2,54 cm. Dalšími jednotkami vycházející z palce je pc – pica, která znamená jednu šestinu palce, a dále pt – point, který je 1/72 palce.

U všech jednotek platí, že mezi číslem a jednotkou nesmí být žádná mezera. Je celkem jasné, že musíte používat pouze kladná čísla, takže zápis -200px je špatný. Takže některé příklady správně napsaných stylů:

b { font-size: 72pt; } h1 { font-size: 10px; } p { font-size: 2.5em; } a { font-size: 125%; }

Teď jsme probrali všechny možnosti, jak lze nastavit velikost písma. Už pro Vás nebude problém nastavit jakoukoli velikost, kterou si přejete. Jako vždy je tu nějaké ale. Jde o to, že Vy si můžete poručit cokoli, ale prohlížeč nemusí být schopen zobrazit přesně to, co Vy chcete. Poručíte si například, že chcete písmo vysoké 12.3px, tedy 12.3 bodů třeba na obrazovce. Je asi jasné, že prohlížeč Vám nejspíše zobrazí písmo vysoké 12 bodů, protože může používat jenom celé body, a nemůže je kouskovat. Také se stává, že prohlížeč nemusí mít vždycky k dispozici přesně tu velikost písma, kterou požadujete, a tak použijete nejbližší, kterou má.

Ještě na závěr bych se chtěl krátce věnovat polemice, zda určovat velikost písma absolutně, tedy pomocí centimentrů, milimetrů, palců, pica, či pointů. Nebo zda raději používat relativní vymoženosti, tedy procenta, em, či ex. Případně pixely, či určování velikosti pomocí slov.

Lze to říci jednoduše, každý způsob má své plusy a mínusy. Pokud určíte velikost absolutně, teoreticky by Vaše písmo mělo mít všude stejnou velikost. Nepočítám zde zaokrouhlování velikosti, o kterém jsem se zmínil výše.

Relativní určení písma má zase tu výhodu, že prakticky každý prohlížeč umožňuje kompletní zvětšení, či zmenšení písma. Třeba Microsoft Internet Explorer umožňuje volit v menu základní velikost písma v řadě největší, velké, střední, malé a nejmenší. Standardně je nastaveno střední písmo. Pokud někdo je dalekozraký a potřebuje větší písmo, tak si ho nastaví v menu. Budete-li určovat velikost písma relativně třeba pomocí procent, potom se při zvětšení písma kliknutím v menu zvětší příslušně i Vámi nastavené písmo o příslušné procento. Pokud určujete velikost písma absolutně, jeho velikost zůstává stejná.

Sám se proto přikláním k relativnímu určování velikosti písma. Takové písmo může být pomocí menu příslušně zvětšeno, což zvyšuje čitelnost pro lidi, kteří mají slabší zrak. A nebo také zmenšeno, pokud má někdo zase zrak jako ostříž.

A to je pro tento díl vše.