CSS triky pro úžasnou typografii na webu

Přemýšleli jste někdy o tom, jak z obyčejných fontů pomocí CSS udělat něco neobyčejného? Něco, co na první pohled zaujme a bude se návštěvníkům líbit více než staré ohrané fonty? V tom případě zapomeňte na nahrazování textu obrázky a otevřete si svůj CSS soubor!

Níže zmíněné „techniky“ nejsou až tak vhodné pro aplikaci na delší texty, jsou určeny spíše pro nadpisy a různá zdůraznění stránek.

Buďte citliví, právě v detailech je krása typografie!

Zaměřte se na barvy, barvy jsou základ všeho. Na jemnou práci s typografií vždy vyberte tu nejvhodnější barvu, která vám bude „sedět“ ke zbytku webdesignu. Více o barvách a jejich významech si můžete přečíst v článku Kouzla barev webu.

Dbejte i na ty nejmenší detaily, právě v těch tkví kouzlo nádherné CSS typografie. Je jasné, že pomocí CSS nemůžete vychytat všechny detaily, ale z velké části to jde.

Snažte se být originální a kreativní, to působí dobře. Nebojte se s CSS zkoušet a testovat nové věci — právě tak vznikají dobré nápady.

letter-spacing

Vlastnost letter-spacing určuje, jak velké budou mezery mezi písmeny. S touto vlastností se dá velice dobře „kouzlit“, protože zvětšováním jejích hodnot se od sebe písmenka oddalují. Při zadání záporné hodnoty se zase mohou písmenka překrývat.V kombinaci s dobře zvolenými barvami a fontem se tímto dají lehce vytvořit velice efektivní texty.

Přiklady

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

• Klasický font Arial s letter-spacingem 1px. Jak vidíte, i 1px je na písmu dost vidět, proto se používá například .5px.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

• Obyčejný Times New Roman, ovšem s letter-spacing: -2px; obohacený o kurzívu, která mu dodává opravdu nádherný vzhled.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit lectus, varius vel, aliquet sed, luctus vel, urna. Maecenas sit amet quam. Integer elit mauris, molestie at, cursus nec, vestibulum congue, sem. Curabitur porta gravida tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam et velit. Fusce urna ipsum, pharetra pulvinar, tincidunt interdum, placerat vitae, felis.

• Font Century Gothic. Je velice efektivní i na delší texty, například pro osobní stránky nebo blogy.

font-variant

Font-variant vlastnost určuje kapitálky neboli velká písmena s velikostí ostatních písmen (velkých i malých). Název kapitálky je odvozen z literatury, kde se tento efekt používá pro nadepisování kapitol.

Přiklady

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

• Font Georgia mi přišel jako nejlepší řešení pro tento efekt. Je doplněn letter-spacingem o .2px.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

• Opět font Century Gothic, nyní v kapitálkách s letter-spacingem — opravdu pěkný efekt.

Vlastnost font-variant má jen 2 hodnoty. Můžete nastavit jen normal nebo small-caps.

line-height

Vlastnost line-height určuje, jak bude řádek vysoký. Velké řádky se hodí hlavně pro osobní stránky a blogy, kde si autor může v delších textech dovolit trochu kreativity.

Přiklad

Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Proin mollis est in nisi.
Donec rutrum turpis id nisl.
Nullam in risus.

CSS nástroje online

• CSS Type Set^EN - Vytvořte si svůj styl textu v CSS online! Po dokončení jen zkopírujte CSS zápis.
• Typetester^EN - Podobná pomůcka jako předchozí, ale s tím rozdílem, že poskytuje k náhledu všechny možné vlastnosti najednou.