CSS triky pro úžasnou typografii na webu

Nádherné typografie a nevšedního provedení textu si na webu všimne opravdu každý. Nejde jen o vybrání fontu, velikosti nebo barvy… jde i o styl! O provedení! Jistě, můžete pro nadpisy použít obrázky, ale proč, když podobného efektu dosáhnete i pomocí CSS — a to navíc bez ztráty na SEO.

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 SetEN - Vytvořte si svůj styl textu v CSS online! Po dokončení jen zkopírujte CSS zápis.
  • TypetesterEN - Podobná pomůcka jako předchozí, ale s tím rozdílem, že poskytuje k náhledu všechny možné vlastnosti najednou.
Přečtěte si také:
Diskuze

Jestliže se Vám článek (ne)líbil, zde máte možnost se vyjádřit.

Jméno:  


Validační kód: 
Zadejte validační kód: 

Vyhledávání

Vyhledávání v článcích. Minimálně 3 znaky.

NOVINKY

25 online nástrojů pro webdesignery

Kam na volně použitelné fotky a textury?

40 ukázek tmavých designů

20 příkladů skvělých artworků pro v...

25 tutoriálů o layoutech

Kouzlo černobílé fotografie

Free ikony solárního systému

Úžasné Street Art díla

30 inspirujícíh log herního průmyslu

Jak na perfektní 3D text ve Photoshopu

Anketa

Čím jsi, náš milý čtenáři?

Studentem, který se zajímá o grafiku a design Živnostníkem, který se grafikou a designem živí Náhodným virtuálním brouzdalem, který je zde náhodou

Odebírání novinek

Sledujte naše novinky na TWITTERU! - @justgraphic!

Zůstaňte v obraze o novinkách ze světa grafiky s JustGraphic.cz!

RSS Články RSS Články

RSS Články RSS Novinky ze světa designu



Reklama