Fonty a styly písma online pro váš web – jaké jsou trendy, a který vybrat?

Když slyšíte „web design“, co se vám vybaví? Rozvržení webu? Různé styly, barvy a pozadí? Web design je také o fontech a o tom, jak do sebe zapadají, aby web vypadal harmonicky. Pojďme se podívat na písmena a glyfy.

Typy a rodiny fontů

Fonty se dělí na různé typy a rodiny. Existují tři obecné typy, klasifikované podle způsobu použití.

Webové fonty

Jsou to fonty, které můžete vidět ve webových aplikacích a na webových stránkách. Google fonty a Adobe fonty (dříve známé jako Typekit) poskytují širokou škálu možností.

Systémové fonty

Obvykle se s nimi setkáte v programech na počítačích a v aplikacích na vašem mobilním zařízení.

Variabilní fonty

Jde o sady fontů s různou tloušťkou (tučností) a šířkou (vzdáleností mezi písmeny). Ty se v dnešní době používají proto, že automaticky přizpůsobují své vlastnosti.

Příklad, jak se variabilní písmo dokáže přizpůsobit danému prostoru.

Styly písma online

Typy fontů popisují, jak jsou písmena navržena. To zahrnuje variace tloušťky (tenké, tučné), sklonu (kurzíva) a šířky (vzdálenost mezi písmeny).

Rodina fontů, jako je Arial, může mít několik typů písma, které mají svůj vlastní název, například Arial Black a Arial Narrow.

Rodiny fontů jsou na obrázku zvýrazněny modře a jejich jednotlivé typy mají bílé pozadí. Příklady jsou uvedeny pro bezpatková a patková písma.

Obecně lze rodiny fontů klasifikovat do typografií: patkové, bezpatkové, rukopisné a nadpisové. Zároveň existují jejich další podkategorie. Například deskové patkové písmo, moderní, jednoprostorové nebo neproporcionální.

Patkové a bezpatkové písmo

Patková písma, jako Times New Roman, jsou klasika, která pochází z novinových tisků.

Patka je malý tah připojený k písmenu, který následuje rovnoběžně s řádkem textu. Patková písma jsou tak pro oko snáze čitelná.

Bezpatková

Z této rodiny je vám pravděpodobně nejznámější Arial a Calibri. Jsou to jasná písma bez zdobení nebo patek.

Rukopisná

Vypadají jako rukopis. Jde o hravá písma, jako je Snell Roundhand nebo Edwardian.

Nadpisová

Jde o písma, jako je Cooper Black nebo Fat Face, která jsou tučná a netradiční. Můžete si u nich všimnout například smíšených velkých a malých písmen a obrácených rozměrů (výška, šířka).

Evergreeny a trendy

Co je pro vás dobrý font? Vzpomínáte, jak jste si na papír načmárali nějaké poznámky a později jste nemohli přečíst svůj rukopis? Nikdo se nechce zdržovat dešifrováním.

Proto by fonty měly být:

• škálovatelné pro všechny rozměry médií, pro tisk a digitální tisk bez ztráty kvality
  
  
• čitelné z hlediska velikosti a designu skriptu
  
  
• kompatibilní s jinými rodinami fontů

Webová stránka by měla zobrazovat maximálně tři různá písma, která se k sobě hodí a přizpůsobí se potřebné délce řádku. Nemusí pocházet ze stejné rodiny fontů, ale musí být jasně čitelná na všech obrazovkách a vypadat dobře se všemi barvami. Písmo v různých barvách musí být stejně dobře čitelné.

Všestrannou klasiku, která nikdy nebude nudná, představují fonty jako:

• Arvo
• Roboto
• Lato
• Merriweather
• Montserrat
• Open Sans
• Times New Roman
• Playfair Display

Fonty dostupné ve webových editorech

Jaká písma nabízí editor vašeho webu?

Šablony, které vám nabízejí webové editory, k vytvoření blogu, online obchodu nebo osobního webu, jsou navrženy tak, aby písma odpovídala tématu šablony. Máte na výběr z několika typů fontů.

V editoru Webnode najdete hlavní typy písem v nastavení loga nebo titulku.

Mimochodem, nejpoužívanějšími fonty na projektech Webnode jsou:

• Montserrat, Roboto nebo Open Sans z bezpatkové rodiny
• Playfair Display, Pt Serif nebo Merriweather z rodiny písem s patkami

Změna fontů pro celý web najednou je možná v nastavení designu projektu. Zde můžete změnit kombinaci fontů a rodin fontů.

Příklady různých kombinací písem v editoru Webnode.

Nabízené kombinace fontů jsou předem navrženy tak, aby se k sobě nejlépe hodily. Doplňují se tak, aby ladily s pozadím obrázku a rozložením webu. Jsou tedy pomyslnou třešničkou na dortu webového designu.

Trendy

World Wide Web (www) začal s bezpatkovým písmem. Jednoduše proto, že tehdejší obrazovky neměly ostré rozlišení, aby mohly zobrazovat rukopisné a experimentální typy písem. Nyní je kreativita všude kolem nás. Neexistuje žádné „špatné“ písmo.

Webová typografie zažívá renesanci. Google fonty jsou pro návrháře zdrojem dalšího vývoje fontů.

V roce 2020 dominovala bezpatková písma. Expresivní znaky jako Goldplay a Versus ale postupně přibývaly. V poslední době jde trend směrem k solidnosti a čistotě. Přesto jsou bezpatkové fonty v digitálním světě stále trendy. Jednoduše proto, že bezpatková písma jsou:

• Tučná
• Ostrá
• Utilitární
• Pevná
• Čistá
• A využívají negativní prostor

Výběr online fontu

Dost faktů. Jste na tahu. Jak se rozhodnete, které písmo je nejlepší pro vyprávění vašeho příběhu?

Význam fontů

Rodiny fontů a jejich typické vlastnosti.

Písma vyjadřují náladu. Mají charakter. Rukopisná písma se pojí s elegancí a vášní. Díky prodlouženým tahům, zaobleným liniím a mašličkovitému zdobení jsou dekorativnější. Kdyby Popelka uměla tančit font, bylo by to písmo Edwardian. Když francouzská michelinská restaurace představuje nový typický pokrm, měla by se prezentovat právě pomocí rukopisných fontů.

Nadpisová písma jsou takovým chameleonem, mění se ze zábavných na jedinečná a hravá. Poskakující písmo na krabičce s bonbony Jelly Belly Bean vás v cukrárně naláká, kam potřebuje.

Moderní typy fontů jsou stylové a tučné. Font Futura využívá přední módní značka Dolce & Gabanna ale i PayPal.

Díky svému historickému dědictví novinových tisků v sobě mají patková písma tradici a vzbuzují důvěru a respekt. Slavný módní časopis Vogue používá Bodoni, patkové písmo. Apple spustil kampaň „Think different“ ve stejné rodině písem.

Naopak bezpatkové písmo Trade Gothic používá společnost Nike, Helveticu pak například The North Face. Bezpatkové písmo vyjadřuje stabilitu, sílu, přehlednost a čistotu, vlastnosti kterými se sportovní společnosti často prezentují.

Začínáte vnímat jemné nuance v typech fontů? Která rodina fontů vás nejlépe vystihuje? Dobrým způsobem, jak začít, je ujasnit si, jaké je vaše poslání a co vaše podnikání představuje. Pokud máte osobní stránky nebo blog, přikloňte se k písmu, které nejlépe reprezentuje vaše charakterové vlastnosti.

Správná volba pro vaši značku

Dvě až tři různá písma běžně provedou vašeho návštěvníka sekcemi vašich stránek. Bude to, jako kdyby procházeli kapitoly v knize. Nový oddíl by měl začínat nadpisem s tučnějším nebo zdobnějším písmem a skončit textem běžné velikosti.

Různé fonty vám také umožňují zvýraznit určitý obsah nebo změnit tón hlasu, například pokud někoho citujete nebo potřebujte upozornit na novou nabídku. Fonty také dobře odlišují produktové řady na vašem e-shopu pro zákazníky.

Vyberte si to pravé písmo pro vás a vaši značku tak, že odpovíte na následující otázky:

• Kdo je mé publikum a co je pro něj důležité?
• Existuje písmo, které souvisí se zkušenostmi mých zákazníků?
• Bude písmo fungovat v kontextu, ve kterém bude využíváno?
• Které písmo vystihuje osobnost mé značky?
• Budou se vybrané barvy dobře doplňovat s daným písmem?

Pokud pomocí svého webu například doplňujete váš kanál YouTube a na stránce vedoucí k vašim videím máte mnoho miniatur, nebo pokud jste umělec a sdílíte hodně obrázků, vaše publikum si obsah spíše prohlíží, než čte. Vybrané písmo by proto nemělo odvádět pozornost od vizuálního obsahu.

Pokud jste právník nebo konzultant, možná si přejete písmem vzbudit důvěru a vyjádřit odpovědnost. Emocionální rukopisné fonty by v takovém případě vypadaly nepatřičně.

Písmo musí být také kompatibilní napříč prohlížeči. Než učiníte konečné rozhodnutí, otestujete svůj výběr písma a jeho dostupnosti ve využívaných prohlížečích na několika zařízeních.

Největší faux pas

Kombinace mnoha rodin fontů s různými znaky a typy písma může zničit pozadí a kontext.

Vědět, čeho se při výběru písma vyvarovat, je někdy snazší, než si zapamatovat co všechno dělat. Zde jsou nejdůležitější poznatky:

Respektujte zvolenou rodinu fontů!

Nepoužívejte více než 3 různé rodiny písem. Držte se jedné, ale rozlišujte jednotlivé typy fontů v jejím rámci. Rodina fontů, jako je Helvetica, Verdana nebo Open Sans, má již dostatek variací v řezech písma k rozlišení pasáží ve vašem textu.

Ne všechny variace ladí dohromady

Můžete míchat. Buďte ale opatrní při experimentování s protichůdnými vlastnostmi, jaké má například Times New Roman a font Edwardian. Nepůjdou dobře dohromady.

Vylepšování

Omezte zdobená písma nebo složitá písma pro zvýraznění nadpisů. Pro textové pasáže v odstavci je nepoužívejte vůbec.

Prostor

Nepodceňujte velikost písma. Dobře přístupná velikost písma, kterou přečtou všichni, je 16 bodů. Myslete na to, že pokud písma zmenšíte, lidé se zhoršeným zrakem si nebudou moci přečíst váš příběh.

Dlouhé linie

Vyhněte se dlouhým větám nebo fontům, které mají mezi písmeny mnoho mezer. Běžně je v šablonách editorů webových stránek rozvržení kódováno takovým způsobem, že k zalomení řádků dochází dříve, než je to nutné.

Pohyblivé uspořádání

V neposlední řadě se ujistěte, že je veškerý text správně zarovnán. To znamená držet se jednoho zarovnání na jedné stránce, například textu zarovnaného na střed nebo vpravo. Pokud máte textová pole s řádky textu začínajícími zpočátku uprostřed a následně vpravo, bude mít čtenář s četbou takového textu problém. Zarovnejte text jednotně. Použijte bílá místa, aby si čtenář odpočinul.

Chcete, aby váš web vypadal skvěle? Přečtěte si, jak na moderní webový design