Kapitálky – CSS small caps a verzálky

Kapitálky (anglicky small caps) jsou velká písmena zmenšená na výšku malých písmen. Na rozdíl od verzálek (běžných velkých písmen) mají kapitálky opticky vyvážené proporce a tloušťku tahů, takže v textu nepůsobí rušivě.

Kapitálky vs. verzálky

	Kapitálky (small caps)	Verzálky (uppercase)
Vzhled	Velká písmena o velikosti malých	Plně velká písmena
Výška	Přibližně výška malých písmen	Plná výška verzálek
Čitelnost	Nenápadné, vhodné do textu	Výrazné, mohou působit jako křik
CSS	font-variant: small-caps	text-transform: uppercase

CSS kapitálky

Nejjednodušší způsob je vlastnost font-variant:

/* Kapitálky */
.kapitalky {
  font-variant: small-caps;
}

/* Všechna písmena jako kapitálky */
.kapitalky-vse {
  font-variant: all-small-caps;
}

Rozdíl mezi small-caps a all-small-caps: první převede pouze malá písmena na kapitálky (velká zůstanou velká), druhý převede všechna písmena na kapitálky.

Pokročilé: font-variant-caps

CSS nabízí i detailnější vlastnost font-variant-caps s více hodnotami:

font-variant-caps: small-caps;      /* malá → kapitálky */
font-variant-caps: all-small-caps;   /* vše → kapitálky */
font-variant-caps: petite-caps;      /* menší kapitálky */
font-variant-caps: unicase;          /* mix verzálek a kapitálek */

Tyto hodnoty fungují správně pouze u fontů, které obsahují skutečné kapitálkové glyfy (OpenType feature smcp). Pokud font kapitálky nemá, prohlížeč je simuluje zmenšením verzálek – výsledek bývá vizuálně méně kvalitní.

Kdy kapitálky použít

• Jména autorů – v bibliografiích a citacích
• Zkratky – html, css, api v běžném textu
• Nadpisy a podnadpisy – elegantní alternativa k verzálkám
• Právní dokumenty – zvýraznění klíčových pojmů

Pokud potřebujete text převést na velká nebo malá písmena (ne kapitálky), podívejte se na převod na VELKÁ a malá písmena.