Oslovení v newsletteru - HOW TO
PŘEČÍST ČLÁNEK
Markeťáci a markeťačky mají jasno, jaký font v komunikaci firmy používat. Přece ten, který je součástí korporátní identity. To však v e‑mailové komunikaci nemusí být vždy dobrý nápad. Řekneme si proč.
Fonty v newsletterech by měly odpovídat fontům používaným v ostatních komunikačních materiálech vaší firmy, jako jsou webové stránky nebo print. To pomáhá udržovat konzistentní vizuální identitu, která podporuje rozpoznatelnost a důvěru ve značku. Ale zároveň musí zůstat funkční a přístupné pro širokou škálu příjemců.
E‑mailoví klienti mají různá omezení a nezobrazují všechny fonty tak, jak by si grafici přáli. Existuje ovšem několik možností, jak vyrobit parádní newsletter a snížit riziko, že u příjemce bude vypadat, jak rozsypaný čaj.
Nejjistější metodou je použití takzvaných “bezpečných fontů”. Jde o fonty, které jsou podporované všemi e‑mailovými klienty a prostě budou fungovat. Bezpečné fonty jsou následující:
Použijete‑li některý z nich, tak nic nezkazíte a bude to fungovat všude. Ale doba si žádá své. Na webu se dnes dějí úžasné věci, tak proč nedopřát i e‑mailům takový základ v podobě skvěle střižených fontů. Nezbývá než se poohlédnout jinde.
13 fontů není moc. Naštěstí máme tzv. webové fonty, které mohou designérům rozvázat ruce a ti se mohou s typografií trochu víc vyřádit. Web fonts jsou speciálně navržené a licencované fonty pro použití na webu a ve webových aplikacích. Nejčastěji se setkáte s těmi, které nabízí Google.
Bohužel to pořád to není tak jednoduché. Google fonts nemají 100% podporu napříč e‑mailovými klienty. Podporují je:
Jde o e‑mailové klienty, které jsou mezi TOP 10 nejpoužívanějšími na světě (kromě Outlook 2000). Hm, jenže na světě. V České republice je situace výrazně jiná. Tady dominuje Seznam.cz (podíl u našich klientů je cca 67 % v listopadu 2023) a ten si s webovými fonty bohužel netyká. Co s tím? Řešením je nastavení tzv. fallback fontu.
V případě, že e‑mailový klient nepodporuje font, který je použitý v mailu, sáhne po fallback fontu. Je to taková pojistka. Fallback font můžete uživatelsky nastavit tímto zápisem:
font-family: ‘Roboto’ , Calibri;Pokud neurčíte žádný fallback font, e‑mailový klient sáhne po výchozím. Např.:
Existují tři metody, jak Google fonts použít v šabloně e‑mailu. Liší se spolehlivostí a implementační náročností.
Nejméně spolehlivá je metoda @import. Část kódu umístíte do <head> na začátek <style>. Nespolehlivost spočívá v tom, že nahrávání fontu je oddělené od renderování HTML kódu. Může se tedy stát, že se e‑mail vyrenderuje dříve, než se stihne naimportovat požadovaný font.
@import url('http://fonts.googleapis.com/css?family=Open+Sans');Další je metoda <link>. Odkaz umístíte do <head> a upravíte adresu s odkazem na fyzické umístění fontu. Tato metoda má lepší podporu v e‑mailových klientech, ale stále má své mouchy. Metoda <link> je vykreslována současně s HTML a to může způsobit pomalejší zobrazení e‑mailu.
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">Nejbezpečnější a nejlepší je metoda @font-face. Část kódu umístěte do <style>. Malá nevýhoda je, že si musíte dát trochu práce s nalezením odkazu s fontem (přes Chrome se vám to nepodaří). Návod najdete například zde. E‑maily si ale raději pokaždé kontrolujte, protože URL adresa s odkazem na font se může časem změnit. To platí pro všechny tři metody.
<style type="text/css">
@media screen {
@font-face {
font-family:'Open Sans';
font-style:normal;
font-weight:400;
src:local('Open Sans'), local('OpenSans'), url('http://fonts.gstatic.com/...') format('woff');
}
}
</style>A jak jsme na tom my v české kotlině, kde našim e-mailům vládne Seznam.cz?
Bohužel, ani jeden ze dvou nejpoužívanějších českých e-mailových klientů - Seznam.cz a Centrum.cz - nedokáže zobrazit web fonts. Naštěstí ani jeden z nich neignoruje fallback font.
Závěrem lze jen dodat, že pokud chcete dostat do e‑mailu nějaký slušivý font, a máte většinu zákazníků v České Republice, tak vybírejte pečlivě fallback font. Bez toho totiž pěkný e‑mail nepošlete. A tím se zase dostáváme na začátek k použití základních bezpečných fontů.
Nakonec ještě jeden malý trik pro Outlook. Pokud například zvolíte Open Sans, tak Outlook nekompromisně sáhne po Times New Roman. Jak tedy donutit Outlook zobrazovat fonty podle vás?
Do stylu v hlavičce přidejte:
[style*="Arial"] {font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;}Dále pak inliněte styl, který Outlook umí zobrazit a je podobnější zvolenému stylu. Tedy takový trik na Outlook fallback font.
<td style="font-size:14px; line‑height: 21px; font-family: Arial, Helvetica, sans-serif; color:#008A83;">Text</td>Outlook totiž zobrazí Arial, protože neumí přečíst deklarovaný font ve stylech v hlavičce.
.png)
.png)
.png)
.jpg)
