Písmo na stránce by mělo být především čitelné.

Je zbytečné, používat kdejaké složité nepodporované písmo, když si pak návštěvník text nebude moci ani přečíst. Čím jednodušší a obyčejnější písmo bude, tím lépe.

Rodina písma

K určení rodiny písma slouží vlastnost font-family. V té definujeme názvem písma jaké konkrétní písmo bude použito. (např. Arial). Dále definujeme písmo, které bude použito v případě, že první definované písmo nemá prohlížeč k dispozici. Takto můžeme určit i několik alternativních písem. Pro případ, že by prohlížeč neměl k dispozici žádné z určených písem ještě použijeme obecnou rodinu (tu bychom měli použít vždy a to na konci výpisu písem).

Celý zápis pak může vypadat např. takto:

Styl písma

Vlastnost font-style určí, zda se bude jednat o písmo normální, kurzívu, nebo skloněné písmo. Rozdíl mezi kurzívou a skloněným písmem je mimo jiné v tom, že kurzíva je jedinečným řezem písma, kdežto skloněné písmo vzniká transformací normálního řezu.

Varianta písma

Varianty písma jsou dvě: normální písmo a kapitálky. Určuje se vlastností font-variant.

Velikost písma

Velikost písma určíme vlastností font-size. Takto můžeme určit 7 různých velikostí:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

Velikost písma můžeme určit také relativně vzhledem k aktuální velikosti písma.

Dále můžeme velikost určit např. v pixelech (px) nebo jiným jednotkách (pt, em, ex, cm, mm, in).

Relativně vzhledem k aktuální velikosti písma můžeme velikost určit v procentech.

Duktus písma

Duktus písma je poměr tloušťky písmových tahů k výšce písma, tedy to, jak je písmo silné. Určuje se vlastností font-weight

Tato vlastnost může mít hodnotu ještě bolder (o něco silnější písmo než normální) a lighter (o něco slabší než normální). Nějak mám ale pocit, že to zas až tak nefunguje. Podobně je to s hodnotami 100, 200, 300, 400, 500, 600, 700, 800, 900. Tady funguje 100-500 jako normal a 600-900 jako bold.

Mezery…

…mezi řádky

Aneb výška řádku. K tomu nám slouží vlastnost line-height. Pomocí výšky řádku změníte celkový dojem jednolitého textu. Já obvykle nastavuji výšku řádku o něco větší než je výchozí hodnota. Docílím tím lepší čitelnosti.

…mezi písmeny

Na mezeru mezi písmeny tady máme letter-spacing. S touto vlastností opatrně, nebo se váš text stane nečitelným. V nadpisech se ale dá pomocí zmenšené mezery dosáhnout zajímavého výsledku.

Velikost písem trochu jinak

Velikost písmen ve smyslu aaaa versus AAAA nam umožní měnit vlastnost text-transform.

Můžete se ptát, k čemu je to dobré. Když chci mít všechna písmena velká, stačí zapnout CAPS lock. To samozřejmě, ale to opět spojujete obsahovou a vzhledovou složku textu dohromady. Nehledě na to, že pokud byste napsali nadpisy stovek článků s CAPS lockem a pak chtěli změnit design, nezbývalo by vám nic jiného, než to všechno ručně přepsat.

Podobnou funkci má font-variant.

Co jsou kapitálky? Všechna písmena budou velká, akorát budou velikostně odpovídat normálním rozměrům. Tedy velká písmena budou větší a malá písmena, i když budou velká, se zobrazí stejně velká, jako by byla malá. Uvedu konkrétní příklad:

Využivá se opět u nadpisů.

Zarovnání textu

V zarovnání textu nás CSS ničím nepřekvapí. Potřebná vlastnost se jmenuje text-align a nabývá klasických hodnot.

Dekorace textu

Dekorovat text v CSS můžeme pomocí text-decoration (jak překvapivé, že).

Tato vlastnost je zajímavá tím, že dokáže násilně odstranit podtržení u odkazů.

V tuto chvíli nikdo nerozezná odkaz od normálního textu.

Souhrnný zápis

Obvykle vlastnosti začínající na stejný základ se dají zapsat všechny najednou. V našem případě se jedná o font.

Takto může vypadat obecné nastavení písma na začátku webu. Ačkoliv si nedokážu představit stránku, kde by všechno bylo kurzívou tlustě. Na tomto příkladě také vidíte použití komentářů, ty se v CSS uzavírají do /* */. Hodnoty ve font by měly být v uvedeném pořadí.