Font-size

CSS vlastnost font-size určuje velikost písma.

Pokud není velikost písma deklarována vůbec, kreslí se u normálních tagů ve většině případech velikostí 16px (vypozorováno). To je tedy výchozí velikost (odpovídá velikosti medium, v Exploreru small). Velikost písma se dá zadat i souhrnnou vlastností font.

Velikost písma se dá zadat celou řadou jednotek. V následující tabulce je pár příkladů. Druh použité jednotky ovlivňuje, zda si bude uživatel Internet Exploreru moci písmo zvětšit příkazem Zobrazit > Velikost.

U procentuálních hodnot font-size se velikost písma odvozuje od velikosti zděděné z nadřazených tagů. Jinak řečeno font-size je vlastnost dědičná. Pokud tedy např. nastavím body na velikost 12px, budou se procentuální velikosti všeho počítat od těch 12px (a kvůli těm pixelům nebudou zvětšovací).

Zvětšování v Exploreru se dělá třeba nabídkou Zobrazit > Velikost písma a je tam pět stupňů. Nebo funguje ctrl + kolečko myši.

Klíčová slova pro velikost písma byla (podle mého úsudku) zavedena jako napodobení html stupňů velikosti písma tagu <font>. Jsou v Exploreru zvětšovací, ale jejich výsledná velikost závisí na prohlížeči (takže se moc nepoužívají). Přesněji vzato to závisí na tom, jestli prohlížeč pracuje ve quirk nebo standardním módu:

Zdroj: vlastní měření -- příklad. Z tabulky vyplývá, že při použití klíčových slov kreslí Explorer všechno o jeden stupeň větší. Základní velikost totiž v Exploreru (quirk mode) odpovídá hodnotě small, v jiných prohlížečích medium. Od toho se odvíjí ten problém zvětšení písma v Exploreru. Jediné, co kreslí všechny prohlížeče stejně, je velikost nijak neovlivněného textu (16 px).

Podpora

Velmi dobře podporovaná vlastnost.

Zvětšování písma

Hodně málo uživatelů ví o tom, že si v prohlížeči mohou písmo zvětšit. Důvody:

• nikdo jim to neukázal a nevysvětlil
• některé stránky mají písmo udělány tak, že se v Internet Exploreru zvětšit nedá

Když uživatel poprvé zkusí zvětšit písmo a nic se nestane, tak už to podruhé nezkusí. Autoři stránek, kteří zadávají písmo v Exploreru nezvětšovací (zadané v px nebo v pt) tak vychovávají uživatele k nepoužívání zvětšování. Je ale důležité počítat se zvětšováním písma při návrhu designu. Hodně stránkám se při zvětšování nebo zmenšování písma rozpadají grafické prvky (zejm. menu).

Obecně se doporučuje používat na jedné stránce pouze jednu jednotku (například všude em nebo pixely). Osobně doporučuji trochu jinou věc. Mám dobré zkušenosti se zadáním velikosti menu a úzkých prvků v pixelech. Na dlouhé texty doporučuji zadávání pomocí em nebo procenty, protože takové písmo se pro čtení dá zvětšovat.

Příklady

Vlastnosti ovlivňující celý dokument jsou zapsány ve stylopisu:

<style>
p {font-size: 13px} /* všechny odstavce <p> budou mít písmo velké 13 pixelů */
td {font-size: small} /* všechno písmo v buňkách tabulky <td> bude "malé" */
.patka {font-size: 90%} /* element, který má nastaveno class="patka", bude zmenšen */
</style>

Jiný příklad ukazuje použití přímého stylu:

<span style="font-size: large">veliký text</span>

Atribut style se může takto použít u libovolného prvku, ale je to moc pracné.

Další příklad ukazuje, jak se zastarale velikost písma zadávala tagem <font>, například:

<font size="6">Veliké písmo</font>

Velikost je číslo od 1 do 7, jsou to html stupně písma. Použití tagu <font> nedoporučuji a nepatří to do CSS. Zmiňuji to jenom pro úplnost.

Zlatá procentní cesta

Autoři často chtějí, aby jejich stránky vypadaly ve všech důležitých prohlížečích stejně, tj. aby velikost písma byla všude stejná. Proto často nastavují velikost písma v pixelech. To skutečně zaručí stejnost, ale písmo pak nepůjde zvětšovat (což pro hodně uživatelů znamená, že nepůjde přečíst, zejména pokud je velikost písma jedenáct pixelů.) Pokud se ale písmo nastaví v jednotkách em (aby šlo zvětšovat), pak v Exploreru 5 bude o jeden stupeň menší, než v Mozille.

Řešením je všechno zadávat v procentech. Např.

body {font-size: 80%}

písmo pak bude v celém dokumentu trochu menší (asi 13px za normálních okolností), což je příjemné, protože dále není pro normální text potřeba cokoli nastavovat. Když pak chci mít někde třeba nadpis zase větší (a zvětšovací), napíšu třeba

h3 {font-size: 125%}

tím se velikost za normálních okolností dostane zase na asi 16px. Chce to umět trochu počítat procenta, ale je to jediný způsob, jak dobře vyjít jak s divným Internet Explorerem 5 (který nemá módy) a zároveň s moderní Mozillou.

Další příklad

Porovnání velikosti písem v prohlížečích

Vizte též

Módy prohlížečů, Font, Line-height = výška řádku, Jednotky v CSS

Odkazy

HTML tag <big>, HTML tag <small>