TIP #9
Čitelnost textů
V tomto tipu se podíváme na vaše texty a to nejen z hlediska typografie, ale i z hlediska barevnosti a představím vám jeden nástroj jako pomůcku. Bude to velmi výživný tip. :)
Jistě víte, že pokud máte na webu nějaké texty, je záměrem, aby je lidé četli. :) Bohužel stále na webech vidím, že jejich majitelé svým klientům a návštěvníkům čtení textů ztěžují. Xkrát se mi stalo, že jsem přišla na web nebo prodejní stránku s nabídkou produktu a vydržela jsem tam jen chvilku a většinu textů si nepřečetla. Mělo to několik důvodů a právě o nich bude tento tip.
Blechy
První důvod je špatně zvolená velikost textu. Nejde to bohužel paušalizovat, protože každý font se v určité velikosti vykresluje jinak. Však se podívejte:
- Toto je text fontem Arimo ve velikosti 17 px. Je to tak na hraně s velikostí pro dobrou čitelnost, menší by už nemohl být, větší o 1 px by mu neuškodil.
- A toto je text fontem Archivo Narrow ve stejné velikosti, tedy 17 px.
- Při použití tohoto fontu by mu lépe seděla velikost 19 px.
Jak vidíte, nejde paušálně říct: dobře čitelná velikost na web je 18 px. Buďte vnímaví a citliví. Dopřejte svým klientům velikost, která se jim bude číst dobře. Pro představu ještě ukázka blech z jednoho webu. Reálná velikost...
Špatně zvolená velikost fontu způsobí, že i klient, který sebe víc chce si vaše texty přečíst a fakt se snaží, to prostě nedá. Po chvilce se tak unaví, že už nebude schopen přečíst nic dalšího.
Typ fontu
Dalším problémem je nesprávně zvolený druh fontu. Troufnu si trochu provokativně říct, že je jen velmi málo typů fontů, které nelze na web použít. Ale rozhodně budu tvrdit, že některé fonty nelze použít tak, jak jsou. Zkrátka jsou fonty, které potřebují trochu poupravit, abyste je na web mohli nasadit. A také jsou fonty, které nemůžete použít na klasický text na webu nebo na dlouhé nadpisy. Proto je v první řadě potřeba si stanovit, jaký font bude pro nadpis a jaký pro text.
Podle čeho vybírat
Pokud ve výběru fontů tápete a nejdete cestou, že si najmete odborníka a trochu se bojíte a máte z toho respekt a zároveň byste chtěli na svůj web nějaký osobitý font, začněte nadpisy. Zamyslete se nad tím, jaké hodnoty svým webem chcete předávat a jaké reprezentujete a podle toho hledejte nadpisový font. Velmi zjednodušená pomůcka pro vás může být:
- Chci působit důvěryhodně, vzbuzovat respekt, nejsem ezoterik a moje téma má v sobě tradiční hodnoty ==> zvolte patkový font.
- Jdu rovnou k cíli, nesnáším omáčky, v mém projektu neztrácíme čas a není protor na zbytečnosti ==> zvolte font Condensed - písmena jsou nahuštěná více k sobě.
- Základem mého projektu a webu je přátelský přístup, trochu ležérnosti a odlehčenost. Chci působit s lehkostí a nadějí. Pak zvolte bezpatkový font a na nadpisy se nemusíte bát ani dobře čitelného psacího. Psací fonty mají jak mužskou, tak ženskou energii, proto si vybere každý a ani muži se jim nemusí vyhýbat, pokud to tak cítí a je to v souladu s jejich tématem.
Podobně budete volit font i pro běžný text, jen tam se určutě vyhněte psacímu fontu, temn opravdu jen na nadpisy a podnadpisy.
Pár příkladů:
Toto je nadpis
Toto je stejný nadpis
Jen jsem mu dala větší velikost a mezi písmeny nastavila mezeru velikost 2. Je vzdušnější a lépe se čte. U některých fontů je to ještě výraznější. Zvětšení mezer je ta úprava, o které jsem mluvila, že si tím font "vylepšíte" a můžete ho použít, i když v surovém stavu by vhodný nebyl. Ještě jeden příklad na toto téma:
Toto je nadpis
Toto je stejný nadpis s většíma mezerama
Toto je nadpis
Toto je stejný nadpis s většíma mezerama
Toto je nadpis
Psací font klidně i na mužský web.
Toto je nadpis...... A NEBO KAPITÁLKAMA
Patkový font
Toto je nadpis
Bezatkový font typu Condensed
Nebojte se si nadpisy na webu personalizovat, dodáte tím webu osobnější a důvěrnější ráz a vaši návštěvníci to budou vnímat. Vybírejte dobře čitelné fonty.
Font na pozadí
Tohle je nešvar, který vidím skoro na každém druhém webu. Máet stránku, kus stránky, blok apod, je tam nahraný obrázek na pozadí a přes to je text. Nejjistější adept na to, že text nebude nikdo číst je text vsazený přímo na obrázek. Třeba takto:
Lepší, ale ne stále dostačující je, že se obrázek na pozadí překryje částečně průhledným filtrem. A v tom částečně je právš ten zakopaný pes. Velmi často se tu honí 2 zajíci: Chci, aby byl vidět obrázek a zároveň tam chci mít text. tady je jediné řešení: Pokud chcete, aby byl obrázek vidět, má tam nějaký důležitý účel, pak ho nedávejte na pozadí. Raději použijte vedle sebe obrázek a text, takto:
Tady bude nějaký text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis viverra diam non justo. Phasellus rhoncus. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Sed convallis magna eu sem. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Tady bude nějaký text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis viverra diam non justo. Phasellus rhoncus. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Sed convallis magna eu sem. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Nikoliv takto:
Tady bude nějaký text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis viverra diam non justo. Phasellus rhoncus. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. přístup do kurzu máte nastálo. Kdykoliv s ním můžete azčít a také se do něj kdykoliv vracet. Bude tu pro vás dokdy budete chtít a potřebovat. :) A navíc, pokud by se Canva nějak aktualizovala a něco se v tom samotném editoru změnilo (což už se jednou stalo), pak přetáčím návody a aktualizuji i já celý kurz.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Sed convallis magna eu sem. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Nebo snad takto:
Lépe takto:
Tady bude nějaký text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis viverra diam non justo. Phasellus rhoncus. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Sed convallis magna eu sem.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur bibendum justo non orci. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Proin mattis lacinia justo. Nam quis nulla.
Záměrem je, aby klient text přečetl. Obrázek na pozadí jen dokresluje atmosféru. Většinou je ideální procento průhlednosti filtru mezi 95 a 85 %. Tady na tom bloku je obrázek překrytý bílým pozadím s průhledností 85 %.
Kontrast
S používáním textu na barevném pozadí souvisí i kontrast. Tedy je důležité, aby barva textu a barva pozadí byly vůči sobě v dostatečné opozici. Příklad:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis viverra diam non justo. Phasellus rhoncus. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Sed convallis magna eu sem. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur bibendum justo non orci. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Proin mattis lacinia justo. Nam quis nulla.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis viverra diam non justo. Phasellus rhoncus. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Sed convallis magna eu sem. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur bibendum justo non orci. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Proin mattis lacinia justo. Nam quis nulla.
Pokud si nejste zcela jisti, můžete použít tento nástroj. Jednoduše v části BACKGROUND dáte kód barvy pozadí, v našem případě by to byla ta žlutá a v části FOREGROUND kód barvy písma. Výsledek by pak vypadal takto:
A co kombinace koleček? I to se vám může stát. Na obrázku vidíte, že není vhodné tuto barevnou kombinaci použít, pokud velikost fontu klesne pod 18 px. Takže třeba pro nadpisy by to šlo, ale pro běžný text už moc ne...
Strukturování textu
To je další věc, která má vliv na to, zda si klient váš text přečte nebo ne. Především na důležitých stránkách, jako je nabídka prodejních produktů nebo ale i v článcích, které jsou nástrojem pro budování vaší důvěry s klientem, je zásadní dobře strukturovat. A je ve skutečnosti velmi jednouduché. Bude vám stačit si zapamatovat 2 jednoduchá pravidla:
- Krátké odstavce
- Podnadpisy
Jednoduše text rozdělujte do odstavců po pár řádcích. Není úplně snadné stanovit, jaká délka je ideální, ale doporučuji mezi 5 až 7 řádky. Vnímejte, jak to na vás působí. Text potřebuje působit jako nenáročný ke čtení, nikoliv jako hradba, na jejíž zdolání potřebuju síly a tedy čtení raději odložím.
Používejte podnadpisy, text to odlehčí a nebude to působit těžkopádně a ve čtenáři vzbuzovat podvědomě dojem To nechci číst.
Samozřejmě používejte další prvky pro prokládání textu jako obrázky, odrážky apod.
Pár příkladů pro pochopení:
Tohle číst fakt nechcete:
Tohle už vypadá lépe. :)
A to je pro tento tip vše. Zítra se na vás budu těšit už u posledního tipu. :)