Mezery mezi písmeny a velikost písmen

Malé štítky často vypadají takhle: drobná velká písmena s trochou místa navíc mezi sebou. Taková písmena se čtou lépe, když nejsou natěsno:

Hravý Hravý Hravý

Třídu uppercase znáte z minulé lekce. Toto jsou všechny třídy pro text-transform:

Třída	CSS
`uppercase`	`text-transform: uppercase`
`lowercase`	`text-transform: lowercase`
`capitalize`	`text-transform: capitalize`
`normal-case`	`text-transform: none`

Mezery mezi písmeny (letter-spacing) nastavují třídy tracking-; tracking je anglický typografický výraz pro prostrkání:

Třída	letter-spacing
`tracking-tighter`	-0.05em
`tracking-tight`	-0.025em
`tracking-normal`	0
`tracking-wide`	0.025em
`tracking-wider`	0.05em
`tracking-widest`	0.1em

Jednotka em je podobná jako rem, vztahuje se ale k velikosti písma samotného prvku: 1em je vlastní velikost písma prvku. Mezery tak rostou s textem: v textu velkém 12 pixelů přidá tracking-wide (široký) za každé písmeno 0,3 pixelu, v textu velkém 48 pixelů 1,2 pixelu. Záporné hodnoty písmena přiblíží k sobě; velké nadpisy často vypadají lépe s tracking-tight (těsný).

Pokyny

Přidejte štítku „Hravý“ třídy text-xs a uppercase.

Přidejte štítku třídu tracking-wide.

Začněte programovat zdarma

8/10