CSS nabízí širokou škálu vlastností pro stylování textu a písma, což nám umožní dokonale vyladit typografii vaší webové stránky.
Tato vlastnost určuje typ písma, které bude použito pro text. Můžeme specifikovat seznam písem oddělených čárkami. Prohlížeč se pokusí použít první písmo v seznamu. Pokud není k dispozici, zkusí další, a tak dále, dokud nenajde písmo, nebo použije výchozí generické písmo.
p {
font-family: "Helvetica Neue", Arial, sans-serif;
}Generické rodiny písem: Doporučuje se vždy na konci seznamu uvést generickou rodinu písem (např. serif, sans-serif, monospace), aby se zajistilo, že se text zobrazí i v případě, že žádné z uvedených písem není k dispozici.
Pro rozšíření nabídky písem můžeme použít služby jako Google Fonts. Google Fonts poskytuje velké množství volně dostupných webových písem, která můžeme snadno integrovat do svých projektů. Jednoduše si vybereme písma na webu Google Fonts, zkopírujeme vygenerovaný tag do
našeho HTML souboru a pak můžeme vybraná písma používat s font-family.<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<h1 style="font-family: 'Roboto', sans-serif;">Text s Google písmem</h1>
</body>Nastavuje velikost písma. Můžeme použít různé jednotky:
p {
font-size: 18px;
}
h1 {
font-size: 2.5em; /* 2.5x velikost písma rodiče */
}Určuje tloušťku písma (tučnost). Může mít hodnoty jako normal, bold, lighter, bolder, nebo číselné hodnoty od 100 do 900 (např. 400 pro normální, 700 pro tučné).
strong {
font-weight: 700; /* nebo 'bold' */
}Nastavuje styl písma, nejčastěji pro kurzívu. Hodnoty jsou normal, italic a oblique.
em {
font-style: italic;
}Přidává nebo odstraňuje dekorace textu, jako je podtržení, přeškrtnutí nebo nadtržení. Hodnoty zahrnují none, underline, overline, line-through. Lze také kombinovat s barvou a stylem čáry (např. underline dashed red).
a {
text-decoration: none; /* Odstraní výchozí podtržení odkazů */
}
.zvyrza {
text-decoration: underline;
}Nastavuje výšku řádku, tedy mezeru mezi řádky textu. Hodnoty mohou být v pixelech, em, nebo jako bezjednotkové číslo, které se vynásobí velikostí písma elementu (doporučený způsob).
p {
line-height: 1.6; /* 1.6 násobek velikosti písma */
}Zarovná text uvnitř elementu. Možné hodnoty jsou left (vlevo), right (vpravo), center (na střed) a justify (do bloku).
h1 {
text-align: center;
}