Písmo se dá na stránkách definovat různými způsoby. Nejprve si povíme trochu teorie a pak si ukážeme konkrétní způsob definice velikosti písma.
Jednotky
Velikost písma můžeme definovat:
- 1. absolutně (absolutními jednotkami): mm, cm, in (palec = 2,54 cm), pt (1/72 palce),
pc (pica = 1/6 palce), xx-small, x-small, small, medium, large, x-large, xx-large - 2. relativně (relativními jednotkami): ex (výška malého písmene x), em (šířka velkého písmene M), %, smaller, larger, px (pixel)
Pixely (malé čtverečky, ze kterých je složen obraz na monitorech) jsou jednotky relativní – na různých zobrazovacích zařízeních (různé monitory, mobilní telefony, …) mají totiž často rozdílnou velikost. Přesto se v Internet Exploreru chovají, jako by byly jednotkami absolutními – nejdou zvětšit.
Stránky na kterých nelze zvětšit písmo jsou ostudou webdesignera, který je vytvořil. Aneb definovat velikost písma pomocí pixelů je ignorantství.
Každý totiž nevidí stejně a mnoho lidí ocení možnost si písmo v prohlížeči zvětšit. Měli bychom tedy k definici velikosti písma používat relativní jednotky vyjma pixelů. (Absolutní jednotky používáme pouze ve výjimených případech nebo při tvorbě tiskového stylu.)
Jak na to…
Definovat písmo pomocí relativních jednotek tak, aby se při zvětšování chovalo rozumně (například, aby měnilo svoji velikost po přimeřených krocích), je trochu kumšt.
Řešení, které se mi osvědilo je následující:
html {height: 100%; font-size: 62.5%;} /* 16 px × 62,5 % = 10 px */
body {
height: 100%;
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
} /* 10 px × 1,2 em = 12 px */
Velikost písma je totiž v prohlížečích přednastavena na 16 px. Hodnotou 62,5 % ji změníme na 10 px a hodnotou 1,2 em v tagu body nastavíme obsahu na stránce velikost 12 px (respektive velikost písma na stránce bude odpovídat velikosti 12 px).
V podstatě stejně by to mělo fungovat, kdybychom html nastavili hodnotu 75 % a tagu body nastavili 1 em. Mně však hodnota 1,2 em u body více napovídá, že velikostně písmo na stránce odpovídá 12 pixelům.
Pokud pak chceme například jeden odstavec v textu zvětšit na 13 px, pomocí CSS mu přiřadíme velikost 1,1 em, jelikož velikost se vypočítává z velikosti nadřazeného prvku, a tím je v našem případě tag body, který má určenou velikost písma odpovídající 12 pixelům → 12 px × 1,1 em = 13,2 px (výsledek se potom zaokrouhlí na celé číslo).
Pro 14 px pak 1,2 em, pro 15 px 1,25 em, pro 16 px 1,3 em atd.
Delší texty by neměly mít velikost písma menší, než odpovídá 12 pixelům – titěrné písmo nemá na webu co pohledávat.
