5 způsobů, jak zlepšit typografii webu

Typ je základní součástí každého webového projektu. Čitelnost a čitelnost jsou základní součástí uživatelské zkušenosti obecně. Pokud víte, jak pracovat s typem, můžete zvýšit konverzi, doba trvání každé relace a váš web bude pro lidi cennější.

Ale za prvé, co je to text?

Dopisy, slova, věty, odstavce. Text jako mluvení je způsob, jak sdělit myšlenky lidem. Obsahuje informativní a určitou zprávu, kterou si mohou přečíst. Pokud píšete pro lidi na internetu, je nutné, aby lidé rozuměli tomu, o čem mluvíte.

Jako velký fanoušek Thinking with type by Ellen Lupton musím citovat autora a říci: „V typografii je„ text “definován jako pokračující posloupnost slov, která se liší od kratších titulků nebo titulků.“

Dobrá typografie by měla snadno vést uživatele k tomu, aby zjistili, co hledají, musí se cítit příjemně a produktivně, když čtou vaše texty, takže způsob, jakým sdělujete své nápady, by měl být co nejefektivnější. Špatná typografie je bude frustrovat a rozptylovat, budou se cítit zklamaní a nebudou pokračovat ve čtení.

V tomto článku vám řeknu několik tipů, jak zlepšit typografii webu a zlepšit čitelnost a čitelnost vašeho textového obsahu. Tak pojďme začít.

Velikost písma

Před několika lety bylo běžné používat pro text těla velikost 10 nebo 12 pixelů. V dnešní době používáme displeje FHD nebo UHD, takže musíme také zvětšit velikost písma. Použití velké výchozí velikosti písma zvýší vaši čitelnost textového obsahu. Optimální je použití velikosti písma 16 až 22 pixelů pro vaše tělo (nebo

), aby byl váš obsah snadno čitelný. Poté, když navrhujete responzivní web pro menší velikosti obrazovky, můžete snížit výchozí velikost textu na velikosti od 14 do 18 pixelů.

Tyto velikosti jsou minimální při navrhování také pro osoby se zrakovým postižením (ti, kteří nosí brýle nebo jen seniory).

Optimální velikost textu těla je od 16 do 22 pixelů, aby se zvýšila čitelnost vašeho textového obsahu.

Nezapomeňte však, že vaše optimální velikost písma vždy závisí na písmu, které jste vybrali pro svůj webový projekt. Na obrázku níže vidíte rozdíl mezi výškou x (vzdálenost mezi základní linií typu a vrcholy hlavního těla malých písmen) Helvetica Neue a Futura.

Můžete vidět rozdíl mezi Helvetica Neue a Futura ve stejných velikostech.

Řádkování je také známé jako výška čáry

V tisku se to také nazývá vedoucí, k oddělení jednotlivých řádků použili kovové pásy.

Při navrhování pro web byste měli pro výšku řádků použít alespoň 1,5 násobek velikosti textu těla a je optimální a doporučeno použít jako řádkování pro řádky okolo 1,1 nebo 1,2 násobku.

Výška řádku byste měli použít alespoň 1,5 násobek velikosti textu vašeho těla.

Co to znamená? Prakticky, když pro svůj obsah používáte velikost písma 16 pixelů, měla by se výška řádku pohybovat kolem 24 pixelů (jak je vidět níže).

Ale někdy, když chcete, aby vaše texty byly elelgantnější a pracujete pouze s kratším odstavcem, můžete trochu zvýšit výšku řádku.

Můžete vidět Aktiv Grotesk s výškou řádku ve velikosti 1,5 násobku textu těla.

Délka řádku

Na webu lidé nebudou číst široké bloky textu. Je to pro ně opravdu nepříjemné a obtížné skenovat dlouhé řádky. Důležitou věcí, kterou si musím všimnout, je to, že se lidé při čtení nepřetržitě pohybují podél řádku textu, ale dělají krátké a rychlé pohyby (známé jako saccades), které se mísí s krátkými zastávkami (fixace) - popsal to francouzský oftalmolog Louis Émile Javal.

Lidé se při čtení nepohybují nepřetržitě podél řady textu, ale dělají krátké a rychlé pohyby promíchané s krátkými zastávkami.

Délka řádku by tedy měla být omezena a optimální počet znaků na řádek je od 60 do 80, aby čtenáři měli pozitivní uživatelský dojem. Při navrhování responzivních webů musíte upravit délku řádku na menší velikosti obrazovky - pro mobily byste měli použít od 30 do 40 znaků na řádek.

Řádky delší než 80 znaků jsou také velkým problémem pro lidi s dyslexií.

Na obrázku vidíte rozdíl mezi optimálním a příliš širokým řádkem.

Kontrast

Kontrast je důležitý z hlediska použitelnosti, ale ovlivňuje také čitelnost a čitelnost.

Text, který není dostatečně kontrastní, je těžší číst a odhalení stránek je peklo nejen pro lidi s poruchami zraku. Může snížit počet konverzí, průměrné trvání relace nebo způsobit míru okamžitého opuštění.

V dnešní době je trendem použití šedého textu na bílém pozadí. Nezáleží na tom, zda uživatelé nemohou pohodlně číst váš obsah. Když není kontrast optimální, lidé čtou pomaleji. Nemusejí dešifrovat žádné slovo, mohou přeskakovat důležité informace v textu, nemusí objevovat odkazy nebo pro ně může být obtížné snadno skenovat obsah - i když čtou na mobilním zařízení při chůzi na slunci.

Kontrast obsahu a pozadí by se měl řídit pravidlem 4,5: 1.

Z hlediska přístupnosti by se měl kontrast kontrastu obsahu a pozadí řídit pravidlem 4,5: 1, které pomáhá také uživatelům s jakýmkoli zrakovým postižením, protože slabý zrak nebo barevná slepota čte obsah správně na obrazovce. Ale vytvořit optimální kontrast je často složitější a nejde jen o barvy. Například pro lidi s barevnou slepotou je problém vidět hypertextové odkazy a měli byste je podtrhnout (také je to skvělé řešení pro lidi se slepotou).

Kontrast není jen o barvách, lidé se zrakovým postižením mohou mít problém najít hypertextové odkazy, pokud nejsou podtrženi.

Vertikální rytmus

Lidé na webu nečtou celé bloky textu. Prohledávají pouze obsah a hledají důležité informace. S vertikálním rytmem je to snazší. Pro uživatele je skenování pohodlnější než čtení na webu. Používáme vertikální rytmus, abychom udrželi všechny vertikální mezery mezi elementy (nadpisy, odstavce, titulky nebo dokonce obrázky) konzistentní. Používáme také vertikální rytmus, abychom uživatele snadno našli důležité obrázky a při používání našich webových stránek budou mít více uvolňující a pozitivní zážitky.

Jak ale funguje vertikální rytmus?

Pravděpodobně jste už slyšeli o základní linii - je to opravdu důležité v designu tisku, kde základní čára je neviditelná čára, kde sedí všechny postavy. Tento termín používáme také v oblasti webdesignu, ale je to trochu jiné. V oblasti webového designu je základní linie určena výškou řádku (výška řádku je také vlastnost CSS) textu těla.

Při definování základní linie a vytváření vlastní základní mřížky je základním bodem, kde začít, je definování velikosti textu vašeho těla (

) a jeho násobku pro výšku řádku (vlastnost line-height v CSS) a pak vše upravíte nahoru.

Jak vidíte na obrázku níže, používám pro základní text velikost písma 16 pixelů a výšku řádků 24 pixelů, což znamená, že 24 pixelů je pro mě základní (pro lepší vedení a nastavení všech písem k mé základní linii jsem používal dělit toto číslo 2, 3 nebo většinou 4, aby na mé obrazovce bylo více průvodců). Na základě této definice musí být všechny mezery (včetně ohraničení, výplní nebo okrajů) násobitelné nebo dělitelné 6px. Pro vizuální konzistenci mezi odstavci a titulky jsem se rozhodl vytvořit mezery jako násobky čísla 6 - a nakonec jsem použil 24 nebo 36 pixelů. Moje velikost písma, výška řádků jsou také násobky 6px.

Zde vidíte, jak by vertikální rytmus měl fungovat ve vašich návrzích.

Pár slov jako závěr

Typografie je nezbytnou součástí webdesignu a správným rozhodnutím bude váš text čitelný, čitelný a srozumitelný. Uživatel bude mít při čtení vašeho textového obsahu a procházení vašeho webu pozitivní uživatelský dojem a vy získáte větší zisk na základě více konverzí. Také budou považovat váš web za cennější. Použijte těchto několik tipů a zvyšte dostupnost a průměrné trvání relace.