Písmo na webu

Jsem trochu pedant, co se týče písma.

Když mi bylo asi pět, tak jsme jeli s maminkou a bráchou tramvají v ulici Táborská. A jeli jsme kolem kina TATRA, které mělo velkými písmeny na fasádě napsaný název. A mě v tu chvíli došlo, že se dají jednotlivá písmenka spojovat a dělat tak slova.

Zní to banálně, ale pro mě to byl nový vesmír. A jeden z nejintenzivnějších zážitků.

Kdybych měl srovnat nejhezčí zážitky podle intenzity, tak by to bylo takhle:

No, zpět k písmenkům.

Web design je z 95 % písmo. A správným výběrem písma můžete zvýšit zisk.

Tak bych vám rád dal pár tipů. Předem předpokládám, že budete psát bez pravopisných a stylistických chyb.

Typograf František Štorm na otázku, co je nejdůležitější na písmu, odpověděl: „Musí se dát přečíst.“ 

Angličani pro to mají dva pojmy (které čeština nemá):

Vaším základním úkolem – jako designéra – je, aby čtenář text přečetl jednoduše a komfortně. A aby pochopil, co mu chcete sdělit.

Použijte pro to tyto nástroje:

Dávno jsou doby, kdy byl web písmem velikosti 10 pixelů (px). S rostoucí velikostí monitorů se adekvátně tomu zvětšovalo i písmo. V tuhle chvíli bych doporučil:

Dejte si ale pozor, stejná velikost může u různého písma vypadat velmi odlišně.

Čteme tak, že na řádce očima skáčeme, říká se tomu sakády. A když je řádka textu moc dlouhá, tak máme problém najít začátek řádky pod ní. Vzpomeňte si na situaci, kdy jste unavení a čtete tu samou řádku pořád dokola.

Ideální šířka řádku se uvádí mezi 45-80 znaky (včetně mezer).

Tady je příklad z manuálů společnosti Atlassian.

Zapamatujte si dvě pravidla:

Začněte s výškou řádku, která je 1,4 až 1,6násobek velikosti písma. Takže pokud máte základní písmo velikostí 16 px, výšku řádku dejte 24 px. Pokud máte málo textu a chcete vypadat luxusně, zvyšte řádkování.

Někdy se též setkáte s termínem proklad (anglicky leading). Je to rozdíl mezi výškou řádky a velikostí písma. Původ slova je z knihtisku, kde se sázela matrice fyzicky a pro zvýšení řádků se používaly olověné pásky (proto se to čte leding ne líding).

Nebudu vás nudit všemi zákoutími písmáctví a omezím to na tři věci (viz též výborná skeč „tři věci“ divadla Sklep, při které se všichni mí kamarádi smáli, jen Lea S. se hrozně naštvala):

Kontrast v tomto případě znamená, jak moc se liší tloušťka jednotlivých částí písmene. Světlostí (barvou) označují typografové hutnost nebo pocit těžkosti písma na stránce. Blbě se to vysvětluje, ukážu to na příkladu.

Nalevo je švýcarsky nudná Helvetica (s malým kontrastem a výraznou barvou), vpravo je italsky elegantní Bodoni (s velkým kontrastem a hezkou barvou).

Jedná se o velikost malých písmen (minusek). Angličani si terminologii nekomplikují, takže to v překladu nazývají velikost (písmene) x. Písmo, které má velkou střední výšku – fujtajxl, se lépe čte a můžete mít i menší řádkování. Proto se používá hodně v novinách. Písmo s malou střední výškou vypadá menší a klasičtější.

Na webu doporučuji používat spíš písmo s velkou – ale kašlu na to – x-height.

Písmo, stejně jako jiné prvky na stránce, byste měli umísťovat na mřížku. Vzpomenete si, jak jste na škole psali na linkovaný papír? Tak to je ono. Jen ty linky většinou nejsou vidět. Až si příště půjdete koupit knížku, tak se schválně podívejte proti světlu na jeden list. A zkontrolujte, že písmo z obou stran sedí na stejné lince. Tohle je vertikální rytmus.

Tomáš Brousil – další české eso v tvorbě písma k tomu dodává: „Pokud se podíváš na stránku knihy v antikvariátu, která byla vytištěna ruční sazbou, a dobře, mělo by to řádkování být na střídačku, aby se neproděravěl papír při tištění té druhé strany.“

Horizontální rytmus je naopak to, jak daleko nebo blízko jsou písmena od sebe. Na webu k tomu mám jen jedno doporučení, nezarovnávejte do bloku (justify). Vinou nedokonalého dělení slov se vám v bloku textu budou objevovat bílé řeky.

Typografická škála je poměr velikosti nadpisů, podnadpisů, úvodu (perexu) a běžného textu. Hlavní, na co byste měli myslet je to, že jednotlivé prvky by měly být tak různě veliké, abyste je od sebe poznali, i pokud stojí samostatně. Takže budete vědět, zda je to hlavní nadpis (v html H1), nebo podnadpis (H2, H3, H4), či běžný text.

Existují na to různé systémy výpočtu od Fibonacciho až po … ale to vás nezajímá.

Hezký příklad z manuálu CX partners.

Těžko. A zároveň je to důležité. Už nevím, od koho byl ten článek, ale jeden zajímavý web designér říkal, že začíná grafiku webu od výběru písma. A mně to dává smysl.

Výběr vám usnadní, když si odpovíte na těchto 5 otázek:

Ideální se zeptat kamaráda typografa nebo grafika. Pokud se s vámi nekamarádí, tak tady je pár tipů:

No a pokud už jdete do mdlob, tak Google fonts vám oblíbené kombinace sám nabízí. Nebo můžete na FontPair.

Krásně své písmo kombinuje Hoeffler&Co.

První Mac Martina Světlíka

A book apart nakladatelství

Seedlip gin

Pokud vás zajímá webová typografie, tak se mrkněte na Richarda Ruttera. Pokud vás zajímá tištěná typografie, tak vám půjčím knihu Letter Fountain od Joepa Pohlena – ono vás to přejde, až si budete číst 50 stránek o písmenu G. A nebo jste stejný magoři jako já.