Dnešní článek bude navazovat na předchozí a poradí vám, jak vybrat vhodné písmo pro své stránky. Představím různé druhy fontů, neopomenu obrázky a přidám i nějaké tipy na doladění písma k dokonalosti.

Proč je správná volba fontu na webu tak důležitá

No protože bez správného písma si toho moc nepřečtete. V předchozím článku jsem byl požádán, abych o správném výběru písma něco napsal a tak jsem učinil. Berte to jako takovou příručku o tom, jak zvolit správné písmo pro váš web. Článek bude dlouhý a s mnoha obrázky. To proto, aby vše bylo co možná nejnázornější. Protože slova jsou v tomto dost limitující.

Předem upozorňuji, že typografii jsem studoval už před mnoha lety a taky nejsem nějaký děda Vševěda. Pokud máte k výběru fontu jiný názor, klidně ho napište do komentářů. Všichni to ocení. Je to přeci jenom jedna z výhod blogu, že se tam schází více názorů a nejde jen o jednotlivce.

1) Konstrukce písma – patkové a bezpatkové písmo

Prvním bodem musí být zvolení správného typu písma. Na výběr máme patkové a bezpatkové písmo. Patkové se jmenuje proto, že takový druh písma má patky. Patky jsou takové ozdoby, protáhnutí u písma. Například při pohledu na I se to lehce prezentuje. Patkové I má totiž na obou koncích takové rozšíření. Bezpatkové I je prostě rovná čára dolů.

Krásným představitelem patkového písma je Georgia. Je elegantní a pěkně se čte. A to hlavně ve větších velikostech. Pro menší stupně velikosti ho nedoporučuji. Od toho tu máme bezpatková písma. Ty patková jsou vhodná na použití kratších textů s důrazem na čitelnost. To se hodí zvláště na blozích a v magazínech. Patkové písmo používá například Web Designer Wall.

Jako příklad bezpatkového písma uvedu oblíbený font Verdana. Bezpatkové písmo je čitelné i v menších velikostech a hodí se použít u delších textů. Takže je praktické pro různé návody, příručky, ale najdete ho i v knihách. Pokud na webu plánujete psát dlouhé návody, použijte bezpatkové písmo. Dalším důvodem k použití vám může být fakt, že neunavuje tolik oči.

2) Ukázky obou druhů s CSS stylem pro použití

Když už víte, jaký druh písma je vhodný pro váš účel, přejdeme k samotnému výběru. Pro inspiraci zde uvedu můj ideál jednoho patkového a jednoho bezpatkového písma. A to včetně CSS. Takže písmo můžete hned použít.

Pro ukázku patkového písma jsem vybral font Georgia, který je podle mého nejlepším zástupcem. Z obrázku níže si ho můžete prohlédnout a pomocí CSS stylu pod ním rovnou na webu aplikovat. Ideální pro blogy a magazíny.

Pro aplikování tohoto fontu zadejte do CSS:

font-family: Georgia, serif;
font-size: 18px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.4em;

Ukázky bezpatkového fontu se ujme Verdana. Je na ní třeba drobet větší písmo než na jiné, ale je z tohoto typu nejvhodnější na web. Čte se fajnově a podporu má na každém zařízení. Uplatnění si pak najde u delších textů.

Pro aplikování tohoto fontu zadejte do CSS:

font-family: Verdana, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.5em;

Pokud se vám ani jeden styl nelíbí, můžete si na Typechart najít vhodnější. Tohle berte jen jako takovou ochutnávku toho nejlepšího. Alespoň to tak z mého pohledu s citem k čitelnosti beru. Já bych třeba jinou možnost z těchto dvou nezvolil. Tyhle dvě možnosti se mi totiž zdají nejrozumnější.

3) Dolaďování písma k dokonalosti (vzdálenosti)

Po výběru a aplikování konkrétního fontu pro web nemusí být nutně konec práce. Písmo můžeme dále dolaďovat tak, jak se nám zachce. To nám mimo jiné dovoluje klidně použít jediný font na celý web. Když se podíváte na mé logo, je to totožný font jako tento v článku. Jen má zkrácené mezery mezi písmeny, je tenčí a má o drobet větší mezery mezi slovy.

K nastavování těchto vzdáleností nám slouží 3 CSS vlastnosti. Line-height (o kterém jsem psal už v předchozím článku), word-spacing a letter-spacing. Line-height určuje vzdálenost mezi řádky, word-spacing vzdálenost mezery mezi slovy a letter-spacing vzdálenost mezi písmeny. Tyto hodnoty můžete ovšem ve většině případů nechat nezměněné. Bohatě postačí, když nastavíte hezký řádkový proklad, aby byl text dobře čitelný.

4) Dolaďování písma číslo dvě: řezy (vyznačování)

Po úspěšném vybrání fontu se můžete vrhnout na ozdobování a zkrášlování posledních maličkostí. V tomto odstavci vám představím kapitálky a verzálky. Jde o způsob, jak například zkrášlit titulky rubrik a widgetů.

Kapitálka je řez písma, kdy se na první pohled zdá, že jde o text velkým písmem. Jde ovšem jen o takovou napodobeninu, možná elegantnější pojetí velkého písma. Kapitálku zaručeně poznáme podle toho, že písmo dosahuje jen na střední výšku toho klasického. Je tedy menší než normální velké písmo. Použití si určitě najde jako ozdoba různých nadpisů a ve slovnících. Kapitálkou mám mimochodem nadepsané titulky v postranním menu.

Verzálka už není tak složitá. Jde o obyčejný text psaný velkým písmem abecedy. NAPŘÍKLAD TAKTO. Použít to můžete u menu, pokud používáte nějaký malý bezpatkový font. Text bude výraznější a lidé mu budou věnovat větší pozornost, protože velké písmo se čte pomaleji. Živou ukázku můžete spatřit na vrchu mého blogu (ta lišta s odkazy jako Kontakt a podobně). Dále pak třeba na tomto obrázku z načítací obrazovky hry World of Tanks.

A je hotovo – aneb konec článku o typografii…

Po všech těchto krocích už máte dozajista jasno, jak a podle čeho zvolit písmo pro váš web. Doufám, že vám článek pomohl a budeme stále potkávat více a více čitelných webů. Alespoň doufám, protože tohle je jediné, co pro to mohu udělat. Nezapomeňte se k článku vyjádřit a klidně pošlete odkazy na zajímavé zdroje. Klidně i zahraniční. Rád si své znalosti rozšířím.