Jak fungují fonty v e-mailu aneb Proč nelze v e-mailech použít libovolná písma jako na webových stránkách

E‑maily by měly být vizuálně v souladu s vaší značkou. Ale není to tak jednoduché, jak by se na první pohled mohlo zdát. Nelze jen tak zkopírovat písmo z vašeho brandového manuálu.

Při tvorbě e‑mailů máte v zásadě dvě možnosti pro výběr fontů pro text – webové fonty a tzv. „web safe” fonty. V dalších odstavcích si vysvětlíme, jaký je mezi oběma skupinami rozdíl a proč je v e‑ech lepší používat „web safe“ fonty.

Nejpoužívanější web safe fonty určitě znáte a často je používáte – jsou to například písma jako Arial, Helvetica nebo Open Sans. Tato písma jsou standardně nainstalovaná ve všech operačních systémech, takže máte jistotu, že se při jejich použití v e‑mailu zobrazí správně.

Můžete použít i webové fonty, které jsou uložené na externích serverech. To vám na jednu stranu nabízí větší výběr (můžete použít speciální písmo vaší značky), ale na druhou stranu zobrazení v e‑mailových šablonách nemusí být vždy spolehlivé.

Web safe fonty

Tyto fonty umožňují webovému prohlížeči využít písmo, které je již nainstalované na vašem počítači, resp. v počítačích vašich čtenářů. Proto jsou tato písma považována za „bezpečná“, neboť je velmi pravděpodobné, že je vaši čtenáři už budou mít.

Jejich nevýhodou je, že jejich počet je omezený, což může komplikovat váš výběr. Zároveň nejsou tak výrazná, protože jsou velmi běžná.

Nejpoužívanějšími a z našeho pohledu nejlepšími písmy pro e‑maily jsou díky jejich čitelnosti a široké podpoře napříč platformami tyto fonty:

• Arial
• Helvetica
• Verdana
• Georgia
• Times New Roman
• Tahoma

V situacích, kdy vám žádný z výše uvedených fontů nevyhovuje, doporučujeme si nejdříve font ověřit například v tomto seznamu. Spoustu zajímavých a praktických informací najdete i v článku na litmus.com, který se věnuje typografii v e‑mailech.

Webové fonty

Webová písma se načítají ze serveru, buď z vašeho vlastního, nebo z externího jako jsou Google nebo Adobe. Díky tomu je škála fontů, které je možné použít, mnohem větší a budou fungovat na jakémkoli počítači… Pro e‑maily je tu jedno „ALE“ – písmo bude použito, pokud se serverem (odkud je písmo načítáno) spolupracuje e‑mailový klient.

Použití vlastního písma může znít jako dobrý nápad, zejména pokud vaše značka už nějaké specifické písmo používá pro jiné materiály. Ale je dobré vědět, že Gmail či Outlook mohou způsobit potíže s podporou těchto písem.

Jak tedy fungují fonty v e‑mailu?

Když si weboví designéři vybírají písma pro webové stránky, mohou si vybrat prakticky jakékoliv, včetně vlastního písma. Na webu lze totiž pomocí CSS nebo HTML kódu odkázat na místo, kde je písmo hostováno online, ať už je to Google Font, Adobe Font nebo něco jiného.

E‑maily takto ale nefungují…

V kódu e‑mailu se písmo určuje písmo pomocí CSS vlastnosti zvané font-family. Když vaši příjemci otevřou e‑mail, prohlížeč přečte vlastnost font-family a načte zvolené písmo. U web safe fontů je to jednoduché. Nicméně e‑mailoví klienti jsou „vybíraví“ ohledně podpory webových písem, takže si nemůžete vybrat jakékoliv písmo.

Protože webové písma nejsou vždy podporována, v případě kódování e‑mailů je vždy potřeba myslet na záložní písmo. V rámci font-family tedy může být definováno jedno, ale i více písem (fontů). Pokud uvedete více písem, e‑mailový klient se rozhodne, které záložní písmo použije.

Příklad:

Pokud v HTML/CSS použijete zápis „font-family: Tahoma, Verdana, sans-serif;“, pak vykreslování písma v e‑mailovém klientovi příjemce funguje jako fallback řetězec:

→ klient zkusí font Tahoma
→ pokud není font dostupný, zkusí klient font Verdana
→ pokud by nebyl dostupný ani jeden z uvedených fontů, použije klient nějaký sans-serif font

Sans-serif je tzv. generická rodina fontů, tzn. neukazuje na konkrétní font, ale říká: „vezmi jakýkoliv výchozí bezpatkový font, který systém má“. V takovém případě se obvykle v závislosti na zařízení příjemce použije:

• Windows → typicky Arial nebo Segoe UI
• macOS / iOS → Helvetica
• Android → Roboto
• jiné systémy → jejich defaultní sans-serif

Problém s vlastními webovými fonty v e‑mailech

Použití vlastních písem v e‑mailu může představovat riziko pro váš e‑mailový marketing. Jelikož většina čtenářů pravděpodobně ani nepozná rozdíl mezi vaším vlastním písmem a web safe fontem, je bezpečnější použít web safe font. To však neznamená, že jste odkázáni pouze na běžná písma jako je Helvetica. Znamená to pouze, že budete potřebovat více času na vývoj a testování, abyste se vyhnuli běžným problémům:

1) Problémy s renderováním (vykreslováním)

Pokud je pro vaši značku důležité používat vlastní písmo v e‑mailech, je to možné. Budete ale muset investovat čas a úsilí do vývoje a testování a přesto budete potřebovat zvolit záložní font.

Pokud se nezaměříte na typografii, může se stát, že se váš e‑mail bude na různých zařízeních zobrazovat trochu jinak. Například pokud je výchozí písmo o něco vyšší, může dojít k posunutí celého textu o řádek níž, zkrácení textu v náhledu nebo narušení vašeho pečlivě optimalizovaného responzivního kódu. Vlastní font může také kolidovat s prvky, jako jsou standardní odrážky HTML, což může vést k nesprávně zarovnanému designu.

Jsou to drobné detaily, které ale mohou nahánět e‑mailovým marketérům husí kůži.

2) Problémy s kompatibilitou

Vzhledem k tomu, že podpora webových fontů je rozdílná napříč e‑mailovými klienty, je dobré analyzovat, kde vaši příjemci obvykle e‑maily otevírají. Pokud většina z nich používá klienty podporující webová písma, můžete je vyzkoušet. Pokud ale zjistíte, že čtenáři vašich e‑mailů používají hlavně klienty, které webová písma nepodporují, můžete se vyhnout zbytečně vynaloženému času a úsilí.

* některé webové fonty se mohou zobrazovat, pokud jsou načteny v počítači
** Google fonty přepisuje – výchozí pro Android je Roboto, pro iOS Helvetica
*** fonty bývají přepsány na Roboto (sans-serif)
 

3) Vliv na uživatelský zážitek

Použití vlastního písma je spíše designový detail, kterého si většina vašich odběratelů ani nevšimne. Vždy mějte na paměti, že funkčnost musí být na prvním místě. Hlavním cílem vašeho e‑mailu je předat zprávu. Je logické, že chcete posílat krásné e‑maily, ale pokud jsou krásné, ale nečitelné, jako by nebyly.

Pokud díky vybranému fontu a jeho vykreslení budou vaše e‑maily nečitelné, bude negativně ovlivněn uživatelský zážitek vašich čtenářů, což výrazně snižuje pravděpodobnost, že si váš e‑mail v budoucnu znovu otevřou nebo v něm kliknou. A to je přesný opak toho, o co v e‑mailovém marketingu usilujete! A tak typografie v konečném důsledku hraje klíčovou roli při vytváření e‑mailů, které vedou ke konverzi.

Jak správně používat webové fonty v e‑mailech

Pokud se i přesto rozhodnete použít vlastní webový font, mějte na paměti následující doporučení, aby vaše e‑maily vypadaly dobře a byly čitelné:

1) Vyberte náhradní písmo (tzv. fallback font)

Tento font bude použit v případě, kdy se vaše hlavní písmo nezobrazí. Toto náhradní písmo by mělo co nejvíce odpovídat stylu vaší značky, aby e‑mail působil jednotně.

Inspiraci můžete najít na stránce CSS Fonts, kde najdete méně běžná, ale bezpečná písma pro e‑maily. U jednotlivých písem/fontů zde také najdete informaci, jak velké procento uživatelů na počítačích s Windows a Mac má dané písmo k dispozici, což vám může pomoci najít rovnováhu mezi vzhledem a jistotou, že se písmo správně zobrazí většině příjemců. Snažte se vždy hledat ve stejné „rodině“ písem jako vaše webové písmo, například serif nebo sans-serif, aby se v maximální možné míře podařilo zachovat váš design.

Při výběru písem se také ujistěte, že dobře kontrastují s nastavením barvy pozadí HTML vašeho e‑mailu, aby byla zachována čitelnost.

2) Vyhněte se e‑mailům složeným pouze z obrázků

Marketéři či designéři jsou pod neustálým tlakem a musí řešit, jak udržet e‑maily v souladu s vizuální identitou značky – barvy, styl i písmo.

Jedním ze způsobů, jak obejít problém s náhradními fonty, je použít v e‑mailu místo běžného textu obrázky. To ale není ideální řešení. Sice díky tomu bude písmo vypadat přesně podle vašich představ, ale e‑maily postavené hlavně na obrázcích přinášejí mnohé nevýhody – například řada příjemců má obrázky ve své e‑mailové schránce ve výchozím nastavení vypnuté.

U nadpisu, úvodního banneru nebo loga ještě dává smysl použít obrázek s textem, ale u hlavního textu tím riskujete, že vaše sdělení zanikne, že se hlavní sdělení k příjemcům vůbec nedostane.

Webová písma vám umožní používat „značkové“ fonty přímo v textu, aniž byste museli text převádět do obrázků. Případná alternativa ve formě záložního fontu je vždy lepší, než vkládat dlouhé texty do obrázků a suplovat texty, který byste použili v těle e‑mailu jeho vložením do „alt“ tagu obrázku.

3) Důkladně testujte před každou rozesílkou

Čtenáři vašich e‑mailů je mohou vnímat velmi odlišně v závislosti na jejich e‑mailovém klientovi, prohlížeči a zařízení. Právě proto je při použití webových fontů opravdu důležité e‑maily pečlivě testovat.

Někdy se totiž může stát, že použití záložního fontu způsobí, že se slovo přesune na další řádek, nebo že je textový blok o něco vyšší, než jste chtěli nebo očekávali. Ano, je to drobnost, ale díky důkladnému testování můžete tyto detaily doladit tak, aby e‑maily vypadaly dobře všude.

Na závěr je dobré si uvědomit, že správně zvolené písmo je sice důležité, ale ještě důležitější je samotný obsah, který příjemce upoutá a donutí ho číst dál a dál… Proto nikdy nezapomeňte na sílu segmentace a personalizace.