Ultimátní průvodce webovými písmy

Výběr správného písma pro váš e-mail nebyl nikdy příliš obtížný vzhledem k omezenému počtu bezpečných webových písem, ze kterých si můžete vybrat. Situace se však změnila. Stále více návrhářů e-mailů posouvá hranice a zavádí stejné vývojové techniky, které weboví designéři používají již léta – implementují do svých e-mailů webová písma.

Webová písma umožňují webovým designérům větší kreativitu v typografii a umožňují jim volit ve svých návrzích nestandardní písma.

Jak už to u průlomových novinek v oblasti designu a vývoje e-mailů bývá, pokrokoví členové komunity byli mezi prvními, kteří tyto techniky přinesli do našich schránek (a pozornosti). Za inspiraci vděčíme fantastickému průvodci webovými písmy od Campaign Monitoru, knize Paula Airyho „A Type of Email“ a Style Campaign.

V ultimátním průvodci webovými písmy se budeme zabývat podrobnostmi o tom, co jsou webová písma a jak je mohou návrháři e-mailů implementovat do svých e-mailů.

Co je to webové písmo?“

Designéři e-mailů mají pro své e-maily k dispozici dva různé typy písem – webová bezpečná písma a webová písma. Zde je rozdíl mezi nimi:

• Bezpečná webová písma
  Představte si Arial, Times New Roman, Verdana nebo Georgia jako hlavní příklady bezpečných webových písem. Jsou to výchozí písma, která se nacházejí ve většině různých operačních systémů a zařízení.

• Webová písma
  Webová písma se nenacházejí jako součást výchozích písem dostupných v různých zařízeních a operačních systémech a jsou speciálně navržena a licencována pro použití na webových stránkách. Pár webových písem, která možná znáte, jsou Open Sans a Roboto.

Proč webová písma?

Jako marketéři a designéři víte, jaký je tlak na to, abyste v e-mailech zachovávali jednotnou značku, barvy, design a – ano – typografii. Uzamčení důležité kopie do obrázků je v e-mailovém designu běžnou praxí, jak zůstat na značce a být kreativní. „Ukrytí“ textu do obrázků však omezuje přístupnost e-mailu, protože čtečky obrazovky nemohou text na obrázku přečíst.

Webová písma otevírají nové možnosti kreativity v typografii a umožňují návrhářům e-mailů být kreativní a přístupní – a držet se vzhledu a stylu své značky.

Emailová a webová písma

Přestože webová písma nemají univerzální podporu, zde jsou e-mailoví klienti, kde jsou podporována:

• Apple Mail
• iOS Mail
• Google Android
• Samsung Mail (Android 8.0)
• Outlook for Mac
• Outlook App

Seznam podporovaných e-mailových klientů může vypadat krátce, ale vezměte si k srdci – většina z nich patří mezi 10 nejoblíbenějších e-mailových klientů. To je důvod k radosti!

*Pro Tip: V dubnu 2018 vydal Gmail aktualizované rozhraní svého webového e-mailového klienta. Toto nové rozhraní používá dvě populární webová písma: Google Sans a Roboto. Co to znamená? Přestože Gmail webová písma nepodporuje, pokud v e-mailech použijete některé z těchto webových písem, budou se v Gmailu skutečně vykreslovat. Pokud je chcete v e-mailu použít, stačí přidat písma do atributu font-family CSS.

Objevte svých 10 nejlepších Pokud jde o e-mailový marketing, záleží především na vašem publiku. Pomocí nástroje Litmus Email Analytics zjistíte, kteří e-mailoví klienti jsou u vašich odběratelů nejoblíbenější. Zaregistrujte se zdarma! Objevte své publikum →

Jak vložit webová písma do e-mailu

Při používání webových písem do e-mailů můžete využít tři hlavní přístupy.

@import

Použití @import je jedním z jednodušších přístupů pro import webových písem do e-mailu. Následující řádek kódu umístěte do <hlavy> e-mailu, obvykle na začátek <stylu>.

@import url('https://fonts.googleapis.com/css?family=Montserrat');

V tomto příkladu je název importovaného písma-family „Montserrat“.

Vaše služba webových písem vám poskytne potřebnou adresu URL. Pokud písmo hostujete sami, musíte adresu URL nasměrovat na místo, kde se nachází váš soubor s webovým písmem.

Tato metoda je dobře podporována ve většině výše uvedených e-mailových klientů a chybí jí pouze podpora v systému Android 2.3 (Android Gingerbread) – staré verzi systému Android, která má mizivý podíl na trhu.

<odkaz>

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">

Stejně jako metoda @import bude vaše webová služba pro písma definovat hodnotu href. Pokud soubor písma hostujete sami, změňte tuto adresu URL tak, aby ukazovala na místo, kde se webové písmo nachází na vašem serveru. A tento řádek kódu budete chtít umístit do <hlavy> e-mailu, poblíž jeho horní části.

Metoda <odkaz> funguje o něco lépe než metoda @import, přičemž ji podporují všichni výše uvedení e-mailoví klienti (hurá!).

Proč byste tedy měli volit jednu metodu místo druhé? Metoda @import odkládá načtení importovaného webového písma až do úplného načtení HTML, do kterého je vloženo. To může vést k tomu, že se webové písmo bude v e-mailu zobrazovat o něco déle, zatímco se bude načítat zbytek e-mailu. Naopak metoda <odkaz> načítá prostředek inline při načítání kódu souboru HTML (shora dolů), což může načítání e-mailu zdržet, pokud je soubor s webovým písmem obzvláště velký.

@font-face

Služby webových písem online běžně nabízejí pět formátů souborů na výběr: .eot, .woff, .woff2, .svg a .ttf. Formát .woff má nejlepší podporu, pokud jde o e-mail, takže doporučujeme používat tento formát, pokud můžete. Metoda @font-face je jedinou metodou, která umožňuje konkrétně vybrat, jaký formát souboru chcete importovat, což z ní činí nejprůkaznější metodu pro implementaci webových písem.

Tady je typická deklarace @font-face pro import webového písma do e-mailu při použití služby Google Fonts, kterou jsme zvolili jako službu webových písem:

@font-face {font-family: 'Montserrat';font-style: normal;font-weight: 400;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');}

Pokud používáte službu Google Fonts, není bohužel snadné zjistit adresu URL webového písma – musíte proskočit několika obručemi.

1. Vyhledejte webové písmo, které chcete použít.
Po jeho nalezení a výběru se ve spodní části obrazovky zobrazí malý černý pruh. Když na něj kliknete, zobrazí se obrazovka jako tato:

2. Zkopírujte adresu URL webového písma (zvýrazněnou výše) a vložte ji do adresního řádku prohlížeče Safari nebo Internet Explorer.
Při této metodě používáme Safari nebo Internet Explorer, protože služba Google Fonts používá detekci prohlížeče k rozhodnutí, který typ souboru písma bude obsluhován. Pro tuto metodu chceme použít typ souboru .woff. Při použití prohlížeče Google Chrome se použije typ souboru písma .woff2, který bude obsluhován v prohlížeči, který má omezenou podporu. Za tento dodatečný poznatek děkujeme Elliotu Rossovi!

Po načtení stránky se na stránce zobrazí deklarace CSS:

3. Zkopírujte tuto deklaraci CSS a vložte ji do části <style> svého e-mailu.
Ačkoli je tato metoda považována za nejprůstřelnější, dodavatel služby webových písem by mohl provést změny v adrese URL přímého přístupu použité k importu webového písma. Pokud se rozhodnete použít tuto metodu, pravidelně e-mail testujte, abyste se ujistili, že se webová písma budou v průběhu času i nadále vykreslovat.

V Litmusu je metoda @font-face naší osvědčenou implementací importu webových písem do našich e-mailů.

Všechny zásluhy za tuto metodu importu webových písem patří obhájci přístupnosti e-mailů Paulu Airymu, jak bylo podrobně popsáno v minulém čísle časopisu Type: E (k jehož odběru byste se rozhodně měli přihlásit, pokud tak ještě nečiníte).

Použití webových písem v e-mailu

Po importu webového písma je jeho použití v e-mailu stejně snadné jako použití webového bezpečného písma s použitím názvu font-family definovaného v metodě importu:

font-family: 'Montserrat', sans-serif;

Výběr záložního písma

Při používání webových písem je nutné mít k dispozici záložní webové bezpečné písmo pro ty e-mailové klienty, kteří webová písma nepodporují.

Výchozí bezpečná webová písma

Každý e-mailový klient má výchozí písmo, pokud písmo uvedené v zásobníku písem není k dispozici. Například Gmail používá Arial, Apple Mail používá Helvetica a Outlook používá Calibri.

Pokud se vám žádné z těchto výchozích písem nelíbí, máme pro vás dobrou zprávu – v zásobníku fontů-family si můžete vybrat náhradní písmo.

font-family: 'Montserrat', Verdana, sans-serif;

Představte si to jako prioritní seznam preferovaných písem. Pokud klient nemůže vyhovět vaší volbě číslo jedna, vrátí se k dalšímu písmu z vašeho seznamu.

Příklad při použití výše uvedeného zásobníku font-family bude Gmail ignorovat první písmo v seznamu, protože se jedná o webové písmo, které není v Gmailu podporováno, a v e-mailu bude vykresleno písmo Verdana. Pokud by Verdana nebyla v použitém zařízení podporována (což by bylo velmi vzácné, protože Verdana je bezpečné webové písmo), zařízení by použilo výchozí písmo sans-serif pro svůj systém, protože to je třetí písmo v seznamu.

Jak vybrat správné záložní písmo

Výběr správného záložního písma, které zachovává design e-mailu, je klíčem k tomu, abyste všem svým odběratelům poskytli skvělý zážitek bez ohledu na to, jakého e-mailového klienta používají.

Záložní písma by měla být stejného typu jako webové písmo – pokud je vaše webové písmo bezpatkové, použijte bezpatkové písmo sans-serif a pokud je vaše webové písmo také serifové, použijte záložní písmo serif. Použití stejného stylu písma pomůže zachovat design e-mailu v různých e-mailových klientech. Můžete postoupit o krok dále a analyzovat výšku písma x.

Výška x je svislá výška písma. V ideálním případě byste měli zvolit záložní písmo, které má podobnou výšku x, aby se design e-mailu při použití záložního písma nerozpadl.

Tady je příklad jemných rozdílů ve výšce x mezi písmy Verdana, Arial a webovým písmem Proxima Nova. Tyto jemné rozdíly mohou mít zásadní vliv na to, zda se návrh e-mailu vykreslí, nebo ne, pokud se webová písma nezobrazují.

CSS Font Stack obsahuje kompletní seznam – včetně pokrytí operačních systémů – bezpečných webových písem, která lze použít jako záložní písma.

Vyhnout se falešnému tučnému písmu / falešné kurzívě

Pokud máte doprovodné verze tučného a kurzívního písma webových souborů, použijme je! Návrháři písma vynaložili spoustu úsilí a myšlenek na to, aby všechny různé styly písma byly správné, proto je nejlepší použít původní návrh písma, než aby e-mailový klient nebo prohlížeč náhodně použil faux bold nebo faux italic na běžné písmo.

Zásadně NEDĚLEJTE TOTO:

@font-face {font-family: 'Montserrat';src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');}style="font-family: 'Montserrat', Verdana, sans-serif; font-weight: bold; font-style: italic;"

Podobně jako u webového designu můžete originální písma přitáhnout tak, že tyto styly zahrnete do zásobníku @font-face, například takto:

@font-face {font-family: 'Montserrat';font-style: normal;font-weight: normal;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');}@font-face {font-family: 'Montserrat';font-style: italic;font-weight: normal;src: local('Montserrat-Italic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUQjIg1_i6t8kCHKm459WxRyS7m0dR9pA.woff2) format('woff2');}@font-face {font-family: 'Montserrat';font-style: normal;font-weight: bold;src: local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_dJE3gnD_vx3rCs.woff2) format('woff2');}@font-face {font-family: 'Montserrat';font-style: italic;font-weight: bold;src: local('Montserrat-BoldItalic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUPjIg1_i6t8kCHKm459WxZcgvz_PZwjimrqw.woff2) format('woff2');}

Jak vidíte, různé styly přitahují různá písma bez ohledu na font-family. Pokud tedy v HTML nastylizujete písmo takto:

style="font-family: 'Montserrat', Verdana, sans-serif; font-weight: bold; font-style: italic;"

…, pak se natáhne pravé písmo ‚Montserrat-BoldItalic‘! Stejně tak pouhé přidání font-weight: bold; přitáhne ‚Montserrat-Bold‘ a pouhé přidání font-style: italic; přitáhne ‚Montserrat-Italic‘.

Možná si říkáte – proč to dělat tímto způsobem místo toho, abyste pro každý styl deklarovali jiný font-family, který také přitáhne originální písma? Takto to vypadá:

Toto také NEDĚLEJTE!“

@font-face {font-family: 'Montserrat Bold Italic';src: local('Montserrat Bold Italic'), local('Montserrat-BoldItalic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUPjIg1_i6t8kCHKm459WxZcgvz_PZwjimrqw.woff2) format('woff2');}style="font-family: 'Montserrat Bold Italic', Verdana, sans-serif;"

To představuje problém. Používání názvů font-family pro ukládání stylů nejenže vytváří příliš komplikované a nadbytečné CSS, ale také zbavuje váš text stylování, pokud se spustí zpětné kopírování. Takže například – pokud si výše uvedený kód prohlížíte v aplikaci Gmail (která nepodporuje vlastní webová písma), pak místo Montserrat Bold Italic uvidíte pouze neztučněnou a netitulkovanou Verdanu. Tím, že budete mít oddělené písmo-family a váhy písma/styl písma, si vaše záložní písma stále zachovají správný styl.

Outlooku, co mi to děláš!“

S Times New Roman jako výchozím záložním písmem je Outlook tradičně výzvou pro e-mailové marketéry se srdcem pro typografii. Zatímco Outlook 2019 – to je nejnovější verze desktopového e-mailového klienta společnosti Microsoft – ctí záložní písma zadaná v kódu, starší verze Outlooku jsou stále výzvou.

Pokud používáte metodu importu @font-face, Outlook 2007/10/13/16 bude ve výchozím nastavení používat Times New Roman bez ohledu na to, jaké záložní písmo máte zavedeno. Dobrou zprávou je, že existuje osvědčený hack, který tento problém řeší.

Následující CSS se zaměřuje na Outlook, jak je označeno <!-> a <!->, a říká Outlooku, aby použil jiný zásobník písem.

<!--><style type="text/css">.fallback-font {font-family: Arial, sans-serif;}</style><!-->

Ve svém e-mailu použijte třídu „fallback-font“ všude tam, kde definujete font-family:

<td class="fallback-font" style="font-family: 'Montserrat', Arial, sans-serif;">Your text here</td>

A vaše písma v Outlooku 2007/10/13 se elegantně vrátí na Arial, nikoli na Times New Roman.

Dalším řešením této chyby je zabalit kód importu @font-face do mediálního dotazu a skrýt jej před Outlookem:

@media screen { @font-face {font-family: 'Montserrat';font-style: normal;font-weight: 400;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');}}

Outlook nyní bude jednoduše ignorovat „Montserrat“ ve vašem zásobníku font-family a přečte další font.

Existuje také metoda zacílení specifické vlastnosti Microsoft Office, mso-font-alt, s vámi zvoleným systémovým fontem do vašeho bloku deklarace @font-face.

@font-face {font-family: 'Montserrat';font-style: normal;font-weight: normal;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');mso-font-alt: 'Arial';}

Tím řeknete aplikaci Outlook pro MS Office, aby ve výchozím nastavení použila vámi přiřazené záložní písmo.

Kde najít webová písma

Písma Google

K dispozici je spousta služeb webových písem, ale Google Fonts jsou naše oblíbené. Služba je zcela zdarma a webová písma si můžete stáhnout do počítače, pokud vytváříte makety návrhů v aplikacích Adobe Photoshop, Sketch nebo jiném návrhářském softwaru.

Typekit od společnosti Adobe

Oblíbená služba předplatného písem od společnosti Adobe byla v minulosti pro návrháře e-mailů málo užitečná, protože Typekit se při vkládání písem spoléhal na JavaScript. Od srpna 2017 umožnil Typekit používat webová písma pouze pomocí CSS – bez nutnosti použití JavaScriptu – a to otevírá webová písma nalezená v Typekitu pro použití v e-mailu. Podrobný návod, jak přidat webová písma Typekit do e-mailů pomocí @import, najdete v dokumentaci nápovědy Typekit.

Další služby webových písem

Pokud hledáte ještě více webových stránek, které nabízejí webová písma licencovaná pro použití v e-mailu (většinou na placené bázi), podívejte se na některé z níže uvedených služeb:

• MyFonts
• Commercial Type
• Font Spring
• Font Shop
• You Work for Them
• Village

.

• Process Type Foundry

Licencování webových písem v e-mailu

Webová písma byla původně určena výhradně k použití na webových stránkách, takže jejich licencování je obvykle určeno pouze pro použití na webových stránkách a v mobilních aplikacích. Důvodem, proč mnoho služeb webových písem neumožňuje použití v e-mailu, je to, že je to považováno za distribuci písma, což je v rozporu s licenční smlouvou EULA (End User License Agreement) mnoha služeb.

Dodavatelé webových písem ve výše uvedeném seznamu zahrnují licence na použití webových písem v e-mailu. Mnohé licence jsou však zpoplatněny podle počtu měsíčních otevření, což je třeba při používání placené služby webového písma zvážit.

Můžu používat webová písma?

Používání webových písem jako progresivního vylepšení v e-mailech nyní rozhodně není na škodu. Implementujte správně záložní písma a posuňte své e-maily do budoucnosti!

Stojí za to podívat se na základnu vašich odběratelů a zjistit, kolik z nich si prohlíží vaše e-maily v e-mailovém klientovi, který podporuje webová písma. Pokud většina ne, jednoduše by to nestálo za váš čas a úsilí, zejména pokud uvažujete o použití placeného webového písma.

Webová písma provedená správně

Abychom vám poskytli malou inspiraci, co je možné, zde je několik našich oblíbených e-mailů s webovými písmy.

Nezapomeňte testovat

Jelikož je použití webových písem v e-mailu stále považováno za mírně experimentální, doporučujeme často testovat, zejména pokud jste nasadili webová písma do šablon, které nemusí být pravidelně aktualizovány. Změny a aktualizace vykreslovacích schopností e-mailových klientů obvykle nejsou předem oznámeny a může k nim docházet sporadicky, proto je nejlepší testovat pravidelně.

Stojí za zmínku, že pokud máte webové písmo nainstalované na vlastním počítači, budete moci webové písmo vidět i při živém testování v e-mailovém klientovi na svém počítači – to je třeba mít na paměti pro případ, že by to najednou vypadalo, že Gmail nyní podporuje webová písma.

TESTUJTE TYPOGRAFII VE SVÝCH KAMPANÍCH

Chcete posunout svou hru s písmem na vyšší úroveň? Jen nezapomeňte své kampaně před odesláním otestovat. Vyzkoušejte zdarma aplikaci Litmus a ujistěte se, že vaše typografie vypadá úžasně ve více než 90 e-mailových klientech, včetně počítačů, webmailů a mobilních zařízení.

Zjistěte více →