Různé > Velikost písma

Velikost písma

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 embody 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ům12 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.


Pozn.: Proč mají html a body nastavenu 100% výšku je rozebráno v kapitole Základ CSS souboru jaksepatří.

 

Rovnou k použití

Novinky na webu

Chronologický přehled novinek na tomto webu

Důležité a užitečné

Vstup do diskusního fóra

Diskusní fórum

Mapa webu

Prohlédněte si strukturu webu pro snažší orientaci.

Stažení tohoto webu

Stáhnout celý web (V budoucnu)

Vytvoření webu od A do Z

Nemáte čas nebo nechcete studovat?
Přečtěte si návod, jak vytvořit web od A do Z, aneb snadno a rychle… (V budoucnu)

Ódy na tento web

Zapějte taky nějakou…

Podpora webu

Jak můžete podpořit tento web

Aktualizace webu

Poslední aktualizace webu proběhla
24. 3. 2010.

 

 TOPlist