CSS pro začátečníky - stylování písma 1. část (6. díl)

V dnešním, v pořadí již šestém díle seriálu css pro začátečníky, si uvedeme výčet všeobecných a nejpoužívanějších vlastností pro stylování písma a jejich charakteristiku. Různé vlastnosti budou uvedeny na příkladu.

V dnešním, v pořadí již šestém díle seriálu css pro začátečníky, si uvedeme výčet všeobecných a nejpoužívanějších vlastností pro stylování písma a jejich charakteristiku. Různé vlastnosti budou uvedeny na příkladu.

Druhy písma (Times New Roman, Verdana, Tahoma, Comic Sans,...)

Druhy písma bychom mohli rozlišit na bezpatková a patková. Někdo říká bezpatičková a patičková, ale to je vcelku jedno. Já používám první výrazy.

Všichni asi známe základní písmo z Wordu Times New Roman, tedy pokud k němu nemáte odpor a nepoužíváte něco jiného. Toto písmo je patkové. A možná se ptáte, jak to poznáme. Jednoduše, každé písmeno má svoje ukončení, tzn. že není zakončeno rovně. Rozdíly uvidíte na příkladě. Dalšími patkovými písmy jsou například Garamond, Georgia, Sylfaen.

Potom máme bezpatková písma. Asi nejznámějším v oblasti webdesignu je font Verdana. Rozdíl opět uvidíte na příkladě. Dalšími bezpatkovými písmy jsou Tahoma, Courier New, Arial. Písmo Courier je navíc písmo bezproporciální (neproporciální), tzn. že každé písmeno zabírá stejnou šířku.

Obecně je pro web doporučeno používat bezpatková písma, protože mají na monitoru lepší čitelnost než patková. Možná Vám to na první pohled nepřijde, ale když se delší dobu koukáte do monitoru na toto písmo, tak Vás poté mohou více bolet oči, než když je to psáno bezpatkovými. Ovšem nikdo neříká, že Vás oči nebudou bolet vůbec. Vše záleží také na Vašem monitoru a Vašem stavu očí, ale to tu rozebírat nebudeme.

A teď si napíšeme, jak se definuje druh písma v css. Nejprve je nutné upozornit, že definujete vždy písmo pro daný div, či element. A také zde musím zdůraznit, že v případě definic písma je dobré využívat dědičnosti. Například pokud budeme na celém webu používat písmo Verdana, tak nemusíme ke každému divu ho definovat, ale stačí nám to pohodlně nadefinovat například pro element body, nebo pomocí * pro všechny elementy. Dědičnost byla probrána již v předchozích dílech tohoto seriálu.

Druh (typ) písma (fontu)

Druh písma definujeme pomocí vlastnosti font-family. Jak nám již název povídá, tak takto můžeme nadefinovat více písem, čili jakousi rodinu písem (fontů). Platit poté budou v pořadí, jakém jsme definovali. A proč to? Odpověď je jednoduchá, protože ne každý má na svém PC nainstalováno vaše oblíbené písmo Van Dijk. A když toto tam nemá, tak poté se použije písmo, které je uvedeno v pořadí jako další. To ovšem neznamená, že musíte experimentovat s druhy písma. Obecné doporučení je, že čím méně druhů písma, tím lepší čitelnost a přehlednost webu. Já používám tak maximálně dva, či tři druhy písma a to ještě ty nejznámější, jako jsou Verdana, Tahoma, Arial. Další upozornění je, že když vaše písmo obsahuje mezeru, tak se jeho název musí uzavřít do jednoduchých, či dvojitých uvozovek. A teď již ten slíbený příklad, kde budete vidět rozdíl mezi patkovým, bezpatkovým, proporciálním a bezproporciálním písmem. Uvedu pouze zápis v css.

A teď vysvětlení k uvedenému zápisu. První třída pojmenovaná bezpat, obsahuje definice bezpatkového písma a v příkladu je uveden zápis více hodnot. To znamená, že když uživatel nebude mít nainstalováno na počítači písmo Verdana CE, tak se použije písmo Arial. Typ písma Verdana na konci první definice jsem uvedl, aby jste viděli, že název písma můžeme také napsat zkráceně, čili bez toho CE. Pokud tam to CE budeme mít, tak hodnotu musíme uzavřít do uvozovek. Druhou třídu jsem pojmenoval pat, a to proto že v ní je nadefinováno patkové písmo Times New Roman, známé z Wordu. Opět název obsahuje mezery, proto ho musíme uzavřít do uvozovek. Další třída je bezpro definovaná pro bezproporciální písmo. Takovým nejznámějším písmem je Courier New. Použít také můžeme hodnotu monospace. Milně je někde uváděno monotype, specifikace css tuto hodnotu nezná. Courier není příliš vzhledné písmo, často se mu říká strojové, proto je příhodné ho používat pro části kódu. Jako kontrast k bezproporciálnímu písmu je třída pro. Zde je nadefinováno nějaké proporcionální písmo, v mém příkladu např. Verdana.

Obecně platí doporučení, že názvy písem by se měly používat celé, tj. i s tím CE, aby byla funkčnost stoprocentně zajištěna. Trošku to přízvisko vysvětlím: tím, že zapíšeme písmena s CE, označíme, že se jedná o typ s českou diakritikou. Problém může nastat například u fontu Arial, kde v počítači můžeme mít více nainstalovaným fontů Arial. Takto určíme, že se vybere ten font, který českou diakritiku obsahuje. Ale praxe je taková, že to bez toho CE u běžně používaných písem chodí také stoprocentně a zápis je zapsán syntakticky správně. Mezi nejvíce používaná písma na webu patří: Arial, Helvetica (Mac), Verdana, Tahoma, Times New Roman, Georgia, Courier a Comic Sans. Tak, to by asi bylo vše ke druhům písma a vrhneme se na definici jeho velikosti.

Velikost písma

Na velikost písma se používá vlastnost font-size. Problém však nastává v jednotkách. Sice můžeme klasicky použít px, například font-size: 12px;, ale můžeme využít také řadu jiných jednotek. Ovšem je to dosti obsáhlá kapitola, tak se jí budu věnovat v příštím díle.

Zarovnání písma, či textu

Možná někteří známe atribut align, když se psal k danému elementu. Podobná vlastnost je i v css, ale aby se odlišila, že je pouze pro text jmenuje se text-align. Ovšem určení, že je pouze pro text ovšem neplatí vždy, protože máme náš Internet Explorer, který zarovnává i jednotlivé bloky. Na příkladě to bude ukázáno na výše uvedených třídách. Hodnoty vlastnosti text-align jsou:

Zvýraznění písma (tučnost, kurzíva)

Písmo se dá na webu zvýraznit stejně tak jako například ve Wordu, tzn. že ho můžeme mít normální, tučné či psané kurzívou. U psaní kurzívou bych se pozastavil, jelikož to opět, stejně jako u patkového písma, není pro dobrou čitelnost webu vhodné. Ovšem to je mé doporučení, které není nikde přikázáno. Někdy to může být naopak vhodné a řada webů to také používá. A jak se zvýraznění provádí? Když chceme mít písmo obyčejné normální, tak nikde nic nemusíme speciálně definovat. Pokud chceme mít písmo tučné, tak se používá vlastnost font-weight a pro kurzívu je to vlastnost font-style. Vše bude ukázáno v příklad. Pro návrat na normální písmo (pokud jsme náhodou zdědily tučné či kurzívu se používá u obou vlastností hodnota normal.

Vlastnost font-weight má devět stupňů (100-900) tučnosti. Podle zkušeností se zkoušením těchto hodnot jsem ještě neviděl, že by se dali vykreslit všechny. Osobně si myslím, že to závisí na typu a velikosti písma. Proto moje doporučení je: používejte pouze vlastnosti bold, tj. klasické tučné písmo. Občas hodnota 900 vykreslí nějaký font ještě tučnější než hodnota bold. Vlastnosti font-style má hodnoty italic nebo oblique. Oblique by mělo být skloněné písma, ale většinou je vykreslováno jako italic, takže vlastně nemá žádná význam.

A na závěr od tohoto dílu při vyjmenovávání jednotlivých vlastností uvedu přehled vlastností s možnými hodnotami, které byly v daném díle ukázány.

Výčet probraných vlastností

Tak a nyní ještě souhrnný css kód, který je uveden na příkladu. .bezpat,.pat,.bezpro,.pro,.bold,.italic {
margin: 10px 0px 20px 0px;
width: 350px;
padding: 5px 5px 5px 5px;
border: 1px solid black;
font-size: 12px;}
.bezpat {
font-family: "Verdana CE", Arial, Verdana;
text-align: left;}
.pat {
font-family: "Times New Roman";
text-align: center;}
.bezpro {
font-family: "Courier New", monospace;
text-align: right;}
.pro {
font-family: Verdana;
text-align: justify;}
.bold {
font-weight: bold;}
.italic {
font-style: italic;}
V první definici je uvedena souhrnná deklarace společných vlastností pro všechny divy. Dále pak deklarace jednotlivých divů.

A výsledek bude vypadat takto: PŘÍKLAD1-CSS

V příštím díle se budeme zabývat výše zmiňovanými velikostmi písma, protože to je docela taková alchymie a mezi lidmi je řada různých pravidel, jak by se měly používat. Dále si vysvětlíme použití souhrnné vlastnosti font a další možné vlastnosti pro stylování písma. Je toho dosti, protože webové stránky jsou hlavně o informacích a ty jsou povětšinou sdělována prostřednictvím písma (textu) a tak je i pro písmo řada vlastností.