5 způsobů na vylepšení typografie na webu

Text je základní prvek webu, proto by měl být maximálně čitelný, a měl by dodržovat všechna nepsaná pravidla. Ovšem i přesto někteří webdesignéři berou text jako druhotný prvek na stránce. Správná typografie na webu dokonce pomůže návštěvníkovi zpracovat informace rychleji.

Dejte textům větší odsazení

Mnozí webdesignéři to nevnímají, ale text je hlavní prvek na stránce. Návštěvníci hledají obsah, proto by měl být text dobře čitelný. Ovšem nejde jen o text, jde také o jeho odsazení. Malá výška řádku (line-height) například činí text hůře čitelným a nepřehledným. Kromě výšky řádku (optimální je kolem 1.4em) zkuste nastavit i větší padding a margin.

Nastavte prvkům výchozí vlastnosti

CSS reset stylesheet

Zní to sice hloupě, ale je to pravda. Každý prohlížeč má nastavené jiné výchozí hodnoty. Rozdíly v padding, margin, border, a dalších, jsou tak naprosto běžné. Jestli tedy chcete, aby se text zobrazoval ve všech prohlížečích stejně, měli byste všemu nastavit výchozí hodnoty.

CSS Reset stylesheet z Developer.Yahoo.com

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css"> 

CSS Reset stylesheet z Snipplr.com

http://snipplr.com/view/4784/css-reset-stylesheet/

Nepoužívejte moc fontů a velikostí

Moc fontů na webu vytváří zbytečný zmatek, stejně jako moc velikostí fontů či barev. Snažte se, aby se na stránce vyskytovaly maximálně 2 fonty v ne moc barevných provedeních a velikostech.

Dekorativní fonty jsou používány hlavně na titulky stránek, jelikož mají vliv na čitelnost a poutavost.

Při výběru fontů si však dejte pozor. Některé fonty, které vypadají stejně, ale mají rozdílnou velikost (Verdana – Arial).  Ujistěte se tedy, že výsledný text na stránce nebude droboučký a maličký.
Spoustu pomocníků s typografií online můžete nalézt v článku Webové nástroje, pomůcky a vychytávky.

Dbejte na detaily

Obsah webu není jen o tom, že to nějak napíšete, a on už si to někdo s utrpením přečte. Všechny nepatrné detaily jako spojovníky, pomlčky, nebo uvozovky, hrají velkou roli. Správně napsaný text je návštěvníkovi příjemnější. Tyto detaily hrají velkou roli hlavně v podvědomí. Možná to ani nevíte, ale váš mozek vnímá na textu každý detail, což hraje velkou roli, když se rozhoduje, jestli stránku navštíví znovu.

Uvozovky

Ty správné uvozovky se na klávesnici vůbec nenacházejí a musíme je vkládat pomocí entit. Pokud píšete v MS Wordu, uvozovky vám program automaticky opraví na ty správné.

Pomlčka a spojovník

Víte, jak se od sebe liší pomlčka a spojovník? A věděli jste, že stejně jako uvozovky nemáme pomlčku na klávesnici? Ve skutečnosti je tam spojovník, který se od pomlčky liší jak délkou, tak využitím.
Jak již název vypovídá, spojovník spojuje dvě slova (česko-anglický slovník). Pomlčka se používá jako pozastavení věty, nebo k oddělení větných částí.

Další informace o častých typografických chybách naleznete na Typografie.wz.cz nebo na Wikipedii.

Rozmyslete si zarovnávání textu

Výběr správného zarovnání textu může pomoci v čitelnosti. Například zarovnání textu na střed pro weby, kde jsou delší texty, je nevhodné, protože lidské oko si hůře kontroluje začátky a konce řádků. Naopak pro krátké citace či ozdobné texty je toto zarovnání vhodné

Zarovnání na střed

Zarovnání vlevo

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