Jak správně vybrat písmo pro svůj web?

Sobota, 16. Březen 2013

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.

Ukázka patkového a bezpatkového písma

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.

Font Georgia

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ů.

Font Verdana

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.

Nápis Rybářský přístav

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.

Nabízíme vám širokou škálu zdravotnických potřeb.
V sortimentu www.dentimedshop.cz máme například inkontinenční pomůcky, zdravotní kompresní punčochy nebo ortézy. Pomůžeme vám s výběrem.

{ Komentáře k článku }

Brassic

Neřekl bych, že patky jsou jen ozdoby. Mají převážně vodící funkci, která usnadňuje čtení. A že by patkové písmo více unavovalo oči? Proč tedy je většina knih psána patkovým písmem (hlavně těch starších, kdy je sázeli profesionální typografové).

Dle wikipedie jsou mírně čitelnější serifová písma, ale existují i názory opačné. Tahle studie (odkaz), ze které vychází i na wikipedii, vypadá celkem zajímavě.

Myslím, že hlavní důvod používání bezpatkového písma na webu (a počítačích obecně) byl ten, že dříve měla zobrazovací zařízení nízká rozlišení a patky tam vypadaly blbě.

Tomáš Erlich

Tuhle záhadu Serif vs Sans-serif my asi nerozlouskneme. Každý na to má svůj názor a podle mě se nikdy nedojde k závěru. Svůj názor jsem sdělil pomocí článku (písmo bez patek používat u dlouhých textů a patky na ty kratší s dostatečně velkým písmem – ať jsou ty dokončovací tahy dobře čitelné) a to mi stačí.

Hlavním účelem článku bylo poradit lidem, jaké písmo na svém webu použít (a proč), aby se dobře četlo a to jistě plní. Jsem si jistý, že pokud někdo půjde takto po krocích, vždycky dojde k dobrému výsledku. Ať už bude používat písmo patkové či bezpatkové…

Tomáš Kout

Uvízlo mi v hlavě, že s patkovými/bezpatkovými písmy se to má tak, že na papír se hodí písma patková a na obrazovku bezpatková. Míním tím texty článků. Nadpisy apod. je naopak kvůli zvýraznění ideální (= nejsnazší) vysázet opačným typem písma.

MaReK Olšavský

Písmo standardní velikosti – patkové (vzniká optická linka)
nadpisy a výrazně zvětšené – bezpatkové (s patkama se velký nápis špatně čte)
drobné písmo – bezpatkové (patky se moc slévají a nedá se to číst)

Tomáš Erlich

Když se nad tím tak zamýšlím… je tohle asi nejlepší alternativa k tomu mému doporučenému postupu. Takže díky za další úhel pohledu :). Sice si pořád stojím za svým, ale tohle určitě dává taky smysl. Nejvíc mi vadí ty bezpatkové nadpisy. Třeba na Živě.cz jsou, ale podle mě jsou hezčí patkové. Je to prostě hezké.

Radek Novák

S jakým tankem hraješ ve WoT?

Tomáš Erlich

Hraji za Velkou Británii. Nejlepší je Cruiser Mk. IV, protože je to hodně rychlej tank a zároveň má i sílu. Je s ním zábava. Teď jsem si koupil tank Crusader, ale ten mně zklamal. Moc mi to s ním nejde.

Čekal jsem, že čím dál budu, tím budou tanky lepší, ale nezdá se mi, že by to tak bylo. Jestli si se mnou chceš zahrát, mám tam přezdívku Carl114. Ostatně jako všude jinde :).

S313

Och, tak tenhle blog mám rád, ale tímhle autor dost přestřelil. Podle mě neabsolvoval ani jednu přednášku o typografii, jinak by nepsal takové bludy.

Patkové písmo se používá kvůli tomu, že patky (serify) navazují na sebe písmena a díky tomu při čtení pomáhají oku lépe kontrolovat řádek. Hodí se pro delší bloky textu, které nejsou dělené ničím dalším.

Bezpatkové písmo se používá na nápisy, nadpisy, kratší věci, kde až tolik nezáleží na to, jak je člověk čte. Všeobecně jsou nezpatková písma více designérsky přívětivá. Používá se také na technické texty, třeba matematické texty mají svoje vlastní, celosvětově uznávané písmo.

- to je věc, která se vyučuje na druhé hodině typografie.

„Stačí si nastavit hezký řádkový proklad. “ Ideální proklad je 120-130 % výšky řádku. To se vyučuje na čtvrté hodině typografie.

Není zde rozdělení na antikvy/grotesky, dynamické, polostatické, statické antikvy, burlesky a podobné věci. Chybí zde vysvětlení, jak vlastně písmo na stránce funguje, že server využívá písmo v počítači klienta, takže musíte psát náhradní písma do css. Chybí zde procentuální porovnání nejpoužívanějších písem. Chybí zde, co dělat,když chci vlastní písmo, co by se klientovi zobrazovalo (to by ale asi vydalo na celý nový článek).

Smyslem mého příspěvku není urazit autora nebo vyvolat nějakou flame diskusi. Jen bych byl rád, aby si autor o typografii něco nastudoval a své obecné a „zaručeně odzkoušené“ domněnky přestal publikovat jako něco, co je závazné. Pro začátek bych mu doporučoval nějaké základy.

Tomáš Erlich

Tenhle článek prezentuje můj názor a přesvědčení. Blog nikdy nebyl ani nebude nějaká učebnice. Tohle všechno je věc názoru. Někdo píše, že patkové písmo je dobré pro nadpisy, protože je hezké (a to se psalo v jednom z největších magazínů na internetu). Ty zas píšeš, že pro nadpisy se má používat písmo bezpatkové.

Já prostě vím, že takhle je to čitelné, pěkné a tak to budu prezentovat. A to, že někdo napíše knížku s opačným názorem na tom nic nezmění. To nakonec můžu přece udělat taky.

Jan

Já písmo na webu ani typografii neřeším, ale jsou tu znát dva směry kolem těch patek. V tom případě není nic jednoduššího než udělat oba návrhy, vyfotit je a nechat rozhodnout fanoušky třeba na Facebooku, co se jim lépe čte. Ty texty se přece tvoří pro ně.

Komentáře jsou pro tento článek již uzavřeny.

Předchozí příspěvek:

Následující příspěvek:

Tato stránka již není udržována. Děkuji za pochopení.