CSS písma

Obsah

    Zobrazit obsah

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ý dopad na to, jak čtenáři prožívají a webová stránka.

Správné písmo může vytvořit silnou identitu vaší značky.

Je důležité používat písmo, které je snadno čitelné. Písmo přidává hodnotu vašeho textu. Důležité je také zvolit správnou barvu a velikost textu pro písmo.

Obecné rodiny písem

V CSS existuje pět obecných rodin písem:

  1. Písma Serif mají na okrajích každého písmene malý tah. Vytvářejí smysl pro formálnost a eleganci.

  2. Písma Sans-serif mají čisté linie (bez malých tahů). Vytvářejí moderní a minimalistický vzhled.

  3. Písma Monospace - zde mají všechna písmena stejnou pevnou šířku. Vytvářejí mechanický vzhled.

  4. Kurzívní písma napodobují lidský rukopis.

  5. Písma Fantasy 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 k určení písma textu vlastnost font-family.

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-family by měla obsahovat několik názvů písem jako "záložní" systém, pro zajištění maximální kompatibility mezi prohlížeči/operačními systémy. Začněte požadovaným písmem a skončete generickou rodinou (nechat prohlížeč vybere podobné písmo z obecné rodiny, pokud neexistují žádná jiná písma dostupný). Názvy písem by měly být odděleny čárkou. Přečtěte si více o záložní fonty 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;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>

<h1>CSS font-family</h1>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>

</body>
</html>