Menu

Jak zlepšit typografii nejen na webu? Zkuste variabilní fonty

Písmo je jedním ze základních stavebních kamenů komunikace už od nepaměti. S příchodem digitálního světa se ale roztrhl pytel s různými typy, druhy i formáty. Z hlediska designu se s nimi ale nemusí pracovat úplně nejlépe. A v dnešní době člověk potřebuje spíše flexibilitu, kterou mu mohou nabídnout variabilní fonty.

Jak zlepšit typografii nejen na webu? Zkuste variabilní fonty

Při čtení textu probíhá v mozku celá řada nevědomých procesů, díky kterým sdělení vyhodnocujeme a zpracováváme. Naše mysl v základu pracuje s vizuály, proto si při čtení jsme schopni představovat a lépe se nám orientuje v dobře rozloženém textu.

Úhledná a designově čistá vizitka či newsletter na nás působí daleko lépe než zmatená přehršel několika druhů písma, přebíjející se s obrázky a rušícími křičícími barvami. Všechny tyto nuance v nás vyvolávají emoce, skrze které pak vnímáme značku jako takovou.

Díky typografii mohou zkrátka kreativci vytvořit správnou dynamiku a vyvolat ve čtenářích to, co potřebují. Některá písma ale nemají tolik možností, aby mohli využít jejich potenciál naplno.

Nabízí se proto variabilní fonty

Běžně to v základu funguje tak, že na jeden font existuje několik souborů, se kterými designér musí pracovat. Máte tím pádem separátní soubory například pro Roboto Regular, Roboto Bold, Roboto Bold Italic atd. Tradiční písma se navíc dodávají v pevném rozsahu tloušťky, šířky a sklonu, a často si musíte pohrát s mezerami, abyste dosáhli určitého vzhledu. To ve výsledku přidělává zbytečnou práci.

Díky variabilním fontům si stáhnete jeden soubor, u kterého si jednoduše nastavujete všechny parametry – máte přístup k celému rozsahu dostupných tlouštěk, šířek, sklonu, optické velikosti a stylů, přičemž nejste omezeni pouze na několik typů, které byste dříve načítali samostatně. Nemusíte volit ani kompromis mezi Regular či Medium.

Variabilní font a nastavení tloušťky pomocí jezdce, zdroj: Monotype.com

Variabilní font a nastavení tloušťky pomocí jezdce, zdroj: Monotype.com

Pokud máte rádi blok textu, ale potřebujete jej zkrátit, aby se vešel do konkrétního prostoru, stačí upravit dostupné osy. Žádné kopírování, žádné obětování zprávy pro prostor. Ve zkratce: můžete přizpůsobit písmo návrhu, nikoli návrh písmu. Zároveň tento typ jde díky své flexibilitě naproti mobile-first přístupu, který je vzhledem k dnešní době čím dál více preferovaný.

Spolu s tím můžete malinko ulevit svému webu z hlediska rychlosti načítání, což je dnes samozřejmě alfa a omega. U velkých firem, zejména e-shopů, se i jedna vteřina může prodražit v miliony. Díky tomu, že použijete jeden soubor, se může zrychlit zobrazování body copy, neboť nemusíte neustále načítat všechny styly při příchodu na novou stránku. Samozřejmostí je podpora na všech nejpoužívanějších prohlížečích u nás – Google Chrome, Edge, Firefox, Safari a Opera.

Variabilní font a možnost přizpůsobení,

Variabilní font a nastavení tloušťky pomocí jezdce, zdroj: Monotype.com

A jaké fonty zvolit?

Nejdostupnější jsou variabilní fonty od Googlu, které se dají do webových stránek implementovat jednoduše vložením kódu. Využít k tomu můžete i například hezky zpracovaný guide od Mozilly.

Pár příkladů, které můžete vyzkoušet:

Samozřejmě se dá najít celá škála dalších, které jsou rovněž dostupné také pro software typu Photoshop, InDesign, Illustrator, Figma atd. Jen se často jedná o placené verze.

Na co je obecně dobré z hlediska typografie myslet

Jak možná tušíte, lidé na webu nečtou, ale skenují. V průměru si přečtou ani ne 25 % textového sdělení. Důležité je proto zachovat vizuální kotvy a neustále čtenáře vést. A jak se říká, v jednoduchosti je síla, proto by se písmo mělo dát hlavně přečíst. Bohužel se však často setkáte s typografickými nešvary, kde nejsou dodržena základní pravidla.

  • Velikost a kontrast: Co se týče čitelnosti, bývá nejčastější chybou příliš malá velikost. Proto volte dostatečně velké základní písmo. Obecně se bere, že cokoliv menšího 16 pixelů není šťastné. Dejte také pozor, že stejná velikost v pixelech nemusí být stejná velikost vizuálně. Někdy se ale pravidla vyplatí porušit; když například mezi standardní velikost písma dáte zničehonic malé, můžete tím přitáhnout pozornost. Z hlediska kontrastu bývá nejčastěji písmo nevýrazné či špatně čitelné. Mít bílé písmo na bílém pozadí nebude úplně ono. Naopak příliš vysoce kontrastní design zase může působit dráždivě. Je dobré si udělat přehled o tom, jaké barvy k sobě dobře sedí.
  • Výška a délka řádky: Alfa a omega pro čtení hlavně u delšího sdělení – příliš “nahňácané” řádky se čtou špatně. Obecné pravidlo je, že výška řádku by měla být 1,4–1,8násobek výšky samotného písma. A čím menší písmo, tím větší výška řádku. Takže pokud trváte na malém písmu, řádkování klidně dejte na dvojnásobek. V angličtině se to nazývá leading, protože se dříve pro výšku řádky používali plátky olova (anglicky lead). Co se týče délky řádky, jde o to, že jednotlivá slova na řádce čtete skokově. Pokud je tedy řádka příliš dlouhá, máte problém navázat na další. Obecně se na řádku doporučuje 50–75 znaků.

Písmo ovlivňuje důvěryhodnost i pochopitelnost

Vnímání písma vychází i z archetypálního pojetí osobností, kdy patkové písmo (nejčastěji zmiňovaný Times) vyvolává respekt, autoritu a působí důvěryhodně. Podporuje to také studie na článku, který byl vysázen v pěti různých fontech. Zjistilo se, že největší důvěru vzbuzoval Baskerville z 18. století (patková varianta), kde byla důvěra o 1,5 % vyšší než u ostatních písem. V opačném pojetí Comic Sans sedí spíše k odlehčeným sdělením, kde dominující archetyp je šašek či rebel.

Zajímá vás, které písmo například vyvolává největší touhu? Pak si určitě přečtěte výzkum design directora Modrého ducha, který pojednává více do hloubky o vnímání písma a prozkoumává emoční asociace z hlediska dalších archetypů.

Z marketingového pohledu rovněž potřebujete, aby vaše sdělení bylo dobře chápáno na první dobrou. Aby zkrátka klienti nemuseli moc přemýšlet. Před lety probíhala studie, kdy se uchazečům předložil článek s dobrou typografií (správná velikost písma, správná délka řádku, dobré odsazení, správné umístění fotografie) a se špatnou typografií (texty příliš u sebe, opticky nepřehledné navazování vět, na sílu vložená fotografie do textu), přičemž jim k vyřešení byl dán svíčkový efekt. Ti se správnou typografií si vedli o 20 % lépe.

Jaký to může mít důsledek pro vás? Například takový, že zlepšením typografie můžete znatelně ovlivnit i nákup na webu. Proto je dobré i na první pohled zdánlivé banalitě věnovat dostatek pozornosti.

Jak se vám článek líbil?

2

Praktický

4

Inspirující

0

Zábavný

1

Nic moc

Pojďme spolu vytvořit něco skvělého!

Dlouhodobá spolupráce může začít jedním kliknutím

Domluvit schůzku