Vhodné písmo nejenže dělá vaše webové stránky vizuálně mnohem zajímavějšími. Písma mají rozhodující vliv na to, zda jsou části textu ignorovány nebo čteny. V tomto příspěvku vám ukážu, jak najít perfektní písmo pro vaše webové stránky!

Dobrá typografie je výsledkem letitého zapojení do písem a designu. Několik základních tipů vám však může pomoci odpovídajícím způsobem vycvičit oko a použít příslušné písmo pro váš webový projekt.

Úplně první webová stránka ...

Nebo: Co se stane, když si stáhnete web bez CSS. Dříve byly webové servery reprezentovány písmy, která byla integrována do příslušného operačního systému. Ty jsou načteny dodnes, pokud je písmo nepřístupné. Úplně první web je stále online a vypadá přesně jako živé vysílání v prosinci 1990:

Způsob zobrazení webových stránek ve vašem prohlížeči nezávisí na webu, ale na operačním systému, který používáte. A zda jste provedli změny výchozího nastavení.

Pro uživatele systému Windows: Patkové písma jsou ve výchozím nastavení reprezentována v times new roman. Mac OS X je na druhou stranu Times nebo Times Roman. Arial používá systém Windows jako písmo Sans Serif. Mac OS X zde používá Helvetica.

Zach Leatherman vyvinul projekt, ve kterém testoval různé operační systémy a související písma. Nástroj Rodina písem vám poskytne zajímavý přehled o záložních písmech – a o tom, jak nakonec vypadají. 

Gruzie a Verdana

V polovině 90. let byly Georgie a Verdana přidány do standardních písem, která speciálně pro web navrhla Matthew Carter. S řídkým výběrem pěti písem pro vytváření dobrých webových stránek vytvořila potřeba v dnešní době pochybný zvyk: písma, která obvykle na webu neexistovala, byla vestavěna jako obrazový soubor.

Nevýhody jsou zřejmé:

• Vhodný displej na různých zařízeních se může zvrtnout do únavné mikropracování.
• Slova nelze detekovat ani přeložit vyhledávací funkcí.
• Kromě toho každá změna textu představuje obrovské dodatečné úsilí.

Navrhování pro neznámé

Naštěstí tato technologie dospěla mnohem dále. Navzdory všemu jsou zde nezbytné i základní znalosti v technické oblasti. Protože je důležité pochopit, co se děje na vašem webu, když požadované písmo není k dispozici. Může pro to být několik důvodů. Například špatné připojení k Internetu, které způsobí, že se soubor CSS načte pozdě.

Na rozdíl od grafického designu je web založen na špatných (nevhodných) písmech, která jsou lepší než žádné písmo.

Při práci s tím, které písmo podporuje vaši stránku nejlépe vizuálně, musíte také položit základní technické otázky:

• Zobrazí se váš text i v případě, že soubor CSS není načten? 
• Je vaše stránka stále čitelná ve standardních Serif a Sans Serif? 
• Poskytujete alternativní písmo? Jak je prezentována? Můžete provést další nastavení, která vám dají větší kontrolu nad záložními písmy?

V první řadě je důležité, aby byl obsah vůbec zobrazen. Obecná čitelnost je klíčem při výběru překlepu. 

Robin Rendle uvádí zajímavé základy na téma FOUT vs. FOIT (když je písmo načteno) ve svém článku Načítání webových písem pomocí webového začítače písem.

Další informace k tématu naleznete zde:

• https://www.filamentgroup.com/lab/font-events.html
• https://css-tricks.com/almanac/properties/f/font-size-adjust/

Odkud vaše písmo vlastně pochází?

Nyní, když jste se zabývali technickým zázemím a záložními písmy, stále existuje velmi důležitý aspekt. Konkrétně, odkud je vaše písmo skutečně načteno. Jak již bylo uvedeno, každý operační systém má svá vlastní standardní písma. Kromě toho může kdokoli nainstalovat písma do svého počítače. Je tedy nemožné zjistit, které z nich jsou přítomny - nebo ne. 

Abychom mohli prezentovat naše webové stránky nejen v Arialu a Times New Roman, stále více přistupujeme k webovým službám písem. Výhoda je zřejmá: omezení, která máme při používání standardních písem, jsou obcházena. Výběr dostupných písem se zvýší.

Pravděpodobně nejznámější jsou zde Písma Google (zdarma) a Adobe Fonts (zúčtovatelná). Ale jsou i jiní poskytovatelé. Zejména v Německu vedou posílené pokyny pro ochranu údajů častěji k tomu, že se hledá alternativa k Googlu. Pro vkládání jsou nabízena nejen písma, ale také platformy, které hostují vaše písma za vás, takže vaše kreativita nemá žádné limity. Předpokladem je samozřejmě to, že vlastníte práva nebo licence.

Smashing Magazine vyzkoušel různé prodejce a získal zde své zkušenosti.

Prvky návrhu podle písem

Chcete-li zvolit vhodné písmo, měli byste znát některé funkce typografií. V zásadě lze říct, že odstavce by se měly skládat ze snadno čitelných písem. Pokud je to příliš namáhavé, the:the návštěvníci:přestaňte číst na své stránce. Informace, které prezentujete, nejsou spotřebovány. 

Dalším aspektem je věnovat pozornost tomu, jak se písmo mění, když je sníženo. Protože písmo, které je snadno čitelné na ploše, může být obtížné přečíst v menším formátu na mobilním telefonu. 

Existují indikátory, na které můžete věnovat pozornost a které vám pomohou vybrat vhodné písmo.

x-výška

V následujícím příkladu uvidíte tři různé příklady. Výška x popisuje svislou výšku písmene x. Pokud je tento text příliš malý, bude přístup k textu obtížnější, zejména u menších velikostí písma. Pokud je výška x příliš velká, je obtížnější rozlišovat mezi velkými a malými písmeny.

Otvory

Otvory jsou otvory, které najdeme v dopisech. Obecně řečeno, čím velkorysejší jsou, tím příjemnější je číst dlouhé části textu s tímto písmem.

Mezery mezi písmeny a vyrovnání párů

Zatímco mezery mezi písmeny popisují obecné mezery mezi písmeny, chápeme, že vyrovnání párů znamená mezery mezi určitými písmeny. Tato vzdálenost může být větší než mezi ostatními kvůli přirozenému tvaru písmen:

Rovnoměrné vzdálenosti dělají písmo harmoničtějším. Díky tomu je čtení snazší. Obojí lze také upravit pomocí CSS, pokud máte pocit, že je stále potřeba zlepšit písmo, které jste zvolili:

.kerning {font-kerning: normal;}

.spacing {letter-spacing: 0.1em;}

Terminály, vzestupné a sestupné

Terminály se vyskytují v písmenech a, ä, c, f, j, r a y:

Vzestupné a sestupné jsou podobné, ale rozšíření například f, q a j znamenají:

Platí pro ně následující: čím nenápadnější jsou, tím méně jsou vhodné pro vyslovitelné texty. Zejména u serifových písem jsou terminály, ascendery a sestupné písma obzvláště dobře vyvinuté, a proto jsou tato písma již dlouho považována za bezpečný kompromis pro delší části textu.

Kontrast

Kontrastní písma (vlevo) jsou vhodnější pro malé velikosti písma, jak se používají v odstavcích, a jsou vhodnější pro nadpisy.

Tučné a kurzíva

Při výběru písem byste se také měli ujistit, že jsou k dispozici v různých silných raziích a stylech. Vzhledem k tomu, že neexistující styly písem mohou být kovány prohlížečem a pak mohou vypadat takhle:

(Vpravo od stylu "falešného" písma z prohlížeče)

Na základě těchto kritérií můžete nyní vyhledat písmo těla pro svůj web. Vzhledem k tomu, že výběr je obvykle složitější a je zde více co zvážit, doporučuji začít výběrem písma nadpisu na základě písma těla (a ne naopak).

Komplexnější přehled a další definice naleznete zde: https://www.shillingtoneducation.com/blog/what-is-typography/.

Serif, Sans Serif a Monospace

Existuje široká škála kategorií pro písma. Tři nejčastější jsou pravděpodobně

• Serif, například Times New Roman
• Sans Serif, například Arial
• Monoprostor, například zdrojový kód

S kombinacemi písem existují dva jednoduché způsoby, jak je sledovat. To není nutnost, ale pouze pokyny, které vám mohou pomoci. Zvláště pokud nemáte mnoho zkušeností s kombinováním písem:

1. Použijte stejné písmo pro tělo a nadpisy – ale změňte tloušťku, mezery mezi písmeny a velikost, například Lato:

2. Zkombinujte patkové písmo a bez patkové písmo, například Baskerville a Open Sans:

Kromě toho existuje online nástroj, pomocí kterého můžete rychle objevit a vyzkoušet různé kombinace písem: https://fontjoy.com/ #.

Závěr o typografii na webu

Dalším důležitým tématem, které jsem zcela omílal, je použití barev. V závislosti na tom, zda je písmo na světlém nebo tmavém pozadí, bude přirozeně vypadat jinak. Můžete také vytvořit varianty písma pomocí stejného písma a to nejen v různých tloušťkách, ale také v různých barvách. Při výběru barvy neignorujte průvodce stylem a branding vaší značky.

Kromě analýzy dalších webových stránek je také vhodný pro inspiraci při řešení současných trendů. I když si rychle všimnete, že určitá párování písem se zde vždy opakují a je málo nových. V závislosti na projektu a požadavcích však může být nutné použít to, co je známo, spíše než být obzvláště inovativní - v tomto článku najdete více podrobností.

Další zdroje na toto téma

• Více o teorii barev: https://rb001.dev.360vier.net/blog/webdesign-development/web-design-principles/
• Vše o profesionální webové typografii: https://prowebtype.com/
• Variabilní písma pro responzivní design: https://alistapart.com/blog/post/variable-fonts-for-responsive-design/