CSS písma
Výběr správného písma pro váš web je důležitý!
Výběr písma je důležitý
Výběr správného písma má obrovský vliv na to, jak čtenáři web vnímají.
Správné písmo může vytvořit silnou identitu vaší značky.
Důležité je používat písmo, které je snadno čitelné. Písmo přidává vašemu textu hodnotu. Důležité je také zvolit správnou barvu a velikost textu písma.
Obecné rodiny písem
V CSS existuje pět obecných rodin písem:
- Patková písma mají na okrajích každého písmene malý tah. Vytvářejí smysl pro formálnost a eleganci.
- Bezpatková písma mají čisté linie (bez malých tahů). Vytvářejí moderní a minimalistický vzhled.
- Monospace fonty – zde mají všechna písmena stejnou pevnou šířku. Vytvářejí mechanický vzhled.
- Kurzivní písma napodobují lidský rukopis.
- Fantasy fonty jsou dekorativní/hravá písma.
Všechny různé názvy písem patří do jedné z obecných rodin písem.
Rozdíl mezi patkovým a bezpatkovým písmem
Poznámka: Na obrazovkách počítačů jsou bezpatková písma považována za čitelnější než patková písma.
Některé příklady písem
| Generic Font Family | Examples of Font Names |
|---|---|
| Serif | Times New Roman Georgia Garamond |
| Sans-serif | Arial Verdana Helvetica |
| Monospace | Courier New Lucida Console Monaco |
| Cursive | Brush Script MT Lucida Handwriting |
| Fantasy | Copperplate Papyrus |
Vlastnost rodiny písem CSS
V CSS používáme font-familyvlastnost k určení fontu textu.
Poznámka : Pokud je název písma více než jedno slovo, musí být v uvozovkách, například: "Times New Roman".
Tip: Vlastnost font-familyby měla obsahovat několik názvů písem jako „záložní“ systém, aby byla zajištěna maximální kompatibilita mezi prohlížeči/operačními systémy. Začněte požadovaným písmem a skončete generickou rodinou (aby prohlížeč mohl vybrat podobné písmo z generické rodiny, pokud nejsou k dispozici žádná jiná písma). Názvy písem by měly být odděleny čárkou. Přečtěte si více o záložních fontech v další kapitole .
Příklad
Určete různá písma pro tři odstavce:
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}