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 (em, ex, vw, vh a další) ve skutečnosti znamenají také relativní zadání velikosti. Vycházejí z aktuální velikosti písma, okna prohlížeče a podobně. Pro řádkové prvky jsou zajímavé zejména jednotky em a ex, protože tyto prvky bývají zařazeny v běžném textu a je proto vhodné, aby se přizpůsobovaly jeho velikosti. Proto například horní index bývá posunut nahoru o 1ex, aby fungoval konzistentně v běžném textu i v nadpisu, kde je písmo mnohem větší.

Mou oblíbenou jednotkou je rem, které odpovídá výchozí velikosti písma, jakou má uživatel nastavenu v prohlížeči. Je to taková relativně absolutní jednotka. Absolutní je v tom, že je na stránce všude stejně velká, a relativní, protože vychází z uživatelova nastavení. Pokud si uživatel z nějakých důvodů jako výchozí nastavil větší nebo menší písmo, rozměry zadávaná pomocí rem to budou respektovat.

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

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. Jak jsem napsal výše, já doporučuji používat ve většině případů jednotky rem, které respektují uživatelovo nastavení. Pro řádkové prvky, které se mají přizpůsobovat aktuální podobě písma, pak bývají nejvhodnější relativní jednotky em, ex nebo procenta.

Některé stránky mění výchozí velikost písma pravidly ve stylu:

:root {
    font-size: 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. Pokud mu velikost na konkrétní stránce nevyhovuje, vždy si může její obsah zvětšit či zmenšit pomocí Ctrl-+ a Ctrl--.

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