Velikost písma

Velikost písma určuje vlastnost font-size. Může se pochlubit vskutku mimořádnou nabídkou způsobů, jak zadat její hodnotu:

klíčové slovo

Zvaná též absolutní hodnoty. Jedná se o pevně určené velikosti, které jsou však odvozeny od nastavené základní velikosti písma v klientovi. To znamená, že na různých počítačích budou z hlediska nastavení různé, nicméně vůči sobě navzájem zachovávají určité proporce.

V pořadí od nejmenších po největší máte k dispozici následující klíčová slova: xx-small, x-small, small, medium, large, x-large, xx-large. Stupeň medium odpovídá základní velikosti běžného písma.

relativní

Velikost lze zadat hodnotami smaller a larger, jež znamenají písmo o stupeň menší či větší vůči rodičovskému prvku. Jestliže například definujete pravidlo

em { font-size: larger; }

a prvek <em> se ocitne v odstavci, jehož velikost písma odpovídá medium, bude prvek <em> zobrazen písmem velikosti large.

délkový údaj

Můžete uvést i přesnou velikost. Například má-li mít prvek <h3> písmo o velikosti 14 bodů, zadejte

h3 { font-size: 14pt; }

Konkrétní velikosti bývají doporučovány pro tiskové styly, kdy vycházíte z určité předpokládané velikosti papíru. Naopak není vhodné je používat ve stylech určených pro obrazovku. Díky chybě v MS Internet Exploreru totiž uživatel není schopen takto specifikované písmo zvětšit či zmenšit a nemůže si proto upravit jeho velikost tak, aby pro něj bylo dobře čitelné.

Některé jednotky (konkrétně em a ex) ve skutečnosti znamenají také relativní zadání velikosti. Podobají se následujícímu bodu.

procenta

Jedná se o další formu relativní jednotky. Určuje, jak se má velikost změnit vůči velikosti písma rodičovského prvku. Chcete-li například mít velikost nadpisu <h1> dvojnásobnou vůči běžnému textu, použijte

h1 { font-size: 200%; }

Prvek <h1> většinou nebývá obklopen žádnou konstrukcí měnící velikost písma, takže jeho velikost se počítá vůči základní velikosti odpovídající prvku <body>.

Podobný efekt má délková jednotka em. Vzdálenost 1em odpovídá velikosti písma. Pokud se používá pro nastavení font-size, vychází z velikosti písma rodičovského prvku. Čili 1em je totéž co 100%. Ekvivalentem výše uvedeného pravidla pro <h1> je

h1 { font-size: 2em; }

Velikost písma je dědičná. Nastavíte-li ji určitému prvku, zdědí ji po něm všichni jeho potomci (pokud ji některý nezmění). Podívejte se na jednoduchý příklad.

Co použít

Upřímně řečeno v této oblasti platí, že co autor, to názor. Někdo doporučuje používat absolutní velikosti v podobě klíčových slov, většina se ale přiklání spíše k velikostem relativním, a to zadávaným buď prostřednictvím procent, nebo jako rozměry v jednotkách em.

Obě tyto cesty zaručí, že stránka reaguje na změny nastavení základní velikosti písma v klientovi. Používání procent či em vám ale dává jemnější a přesnější možnosti pro vyjádření poměrů mezi jednotlivými velikostmi.

V současnosti je zřetelný trend zmenšovat písmo na stránkách. Řada serverů používá jako výchozí velikost small, případně zmenšují základní velikost na 90%. Doporučuji to nedělat. Vycházím z předpokladu, že uživatel si nastavil písmo, jaké mu vyhovuje, a tudíž není rozumné mu je měnit.

Pozor na vnořování

Pokud používáte relativní hodnoty, nezapomeňte, že při vnořování takových prvků se vychází už ze zvětšené hodnoty. Pokud například určíte, že <em> se má zobrazit písmem o velikosti 110% a pak do sebe vnoříte několik <em>, budou větší a větší a větší.

Mimochodem – zvětšovat písmo u řádkových prvků není rozumný nápad. Způsobuje nerovnoměrný odstup řádků v odstavci, což vypadá velmi hloupě.

zpět: Písmo a úpravy textu