Bezpečná písma pro e-mail a doporučené postupy písem HTML pro e-maily
Všichni jste slyšeli mé stížnosti na nedostatek pokroku v e-mailové podpoře v průběhu let, takže nebudu trávit (příliš mnoho) času kňučením. Přál bych si pouze, aby se jeden velký e-mailový klient (aplikace nebo prohlížeč) vymanil z balíčku a pokusil se plně podporovat nejnovější verze HTML a CSS. Nepochybuji o tom, že firmy utrácejí desítky milionů dolarů za vyladění svých e-mailů.
To je důvod, proč je fantastické mít společnosti jako Uplers, které mají přehled o každém aspektu návrhu e-mailu. V této nejnovější infografice vás tým provede typografií a tím, jak lze použít různá písma a jejich charakteristiky k přizpůsobení vašich e-mailů.
Používání vlastních písem v e-mailu
Použití externích písem může být o něco náročnější než u standardního webového designu kvůli různé podpoře mezi e-mailovými klienty. Stále je však možné začlenit externí písma do vašich e-mailů pro klienty, kteří je podporují, a zároveň poskytovat záložní písma pro ty, kteří je nepodporují.
60 % e-mailových klientů nyní podporuje vlastní písma používaná ve vašich e-mailových návrzích, včetně AOL Mail, nativní aplikace Android Mail App (nikoli Gmail), Apple Mail, iOS Mail, Outlook 200, Outlook.com a e-mailů založených na Safari.
Vyšší
A nouzový font je záložní písmo, které může e-mailový klient zobrazit v případě, že nedokáže vykreslit primární (externí) písmo. To zajistí, že váš e-mail zůstane čitelný a zachová si svůj zamýšlený vzhled co nejpřesněji v různých prostředích zobrazení.
- Vyberte si externí písmo: Vyberte externí písmo, které chcete použít. Může to být ze služby jako Google Fonts nebo z písma hostovaného na vašem webovém serveru.
- Zahrňte písmo do HTML svého e-mailu: U e-mailových klientů, kteří to podporují, vytvoříte odkaz na externí písmo v
<head>
HTML vašeho e-mailu. Mnoho e-mailových klientů však z bezpečnostních důvodů neumožňuje propojení s externími zdroji. Místo toho můžete písmo zahrnout jako odkaz v naději, že webmailoví klienti, kteří umožňují externí odkazy, jej vykreslí. - Zadejte záložní písma: Vyberte webová bezpečná záložní písma, která mají podobný vzhled jako vaše externí písmo. Mělo by se jednat o obecné rodiny písem předinstalované ve většině zařízení a operačních systémů.
- Pro definice stylů použijte inline CSS: Vzhledem k omezené podpoře CSS v mnoha e-mailových klientech je osvědčeným postupem používat k definování stylů, včetně rodin písem, inline CSS.
Příklad:
Předpokládejme, že chcete použít externí písmo otevřené Sans z Google Fonts, s Arial a sans-serif jako záložní. Zde je návod, jak to můžete zkusit:
<!DOCTYPE html>
<html>
<head>
<title>Email with External Font</title>
<!-- Attempt to include external font - not supported by all email clients -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
<div style="font-family: 'Open Sans', Arial, sans-serif; font-size: 16px;">
Hello, this is a sample text using Open Sans, with Arial and sans-serif as fallbacks.
</div>
</body>
</html>
Důležité úvahy:
- E-mailová klientská podpora: Mnoho e-mailových klientů, zejména těch pro stolní počítače, jako je Microsoft Outlook, nepodporuje externí písma. Weboví klienti, jako je Gmail, mají lepší podporu, ale stále existují omezení.
- Záložní písma: Ty jsou klíčové pro zajištění toho, aby váš e-mail zůstal funkční a esteticky příjemný u všech klientů. Sekvence v
font-family
styl jde od nejpreferovanějšího písma po nejméně, končící generickou rodinou (sans-serif
orserif
). - Testování: Vždy otestujte své HTML e-maily v různých e-mailových klientech, abyste viděli, jak se vykreslují. Pomoci s tím mohou nástroje jako Lakmus nebo Email on Acid.
U prodejních a marketingových e-mailů může vizuální přitažlivost významně ovlivnit účinnost zprávy. I když použití jedinečného externího písma může pomoci vašim e-mailům vyniknout, je nezbytné zajistit, aby si záložní písma zachovala profesionální a čitelné kvality nezbytné pro efektivní přijetí vaší zprávy.
V e-mailu se používají 4 typy písem
- Serif – Patková písma mají na koncích svých tahů znaky s rozkvěty, body a tvary. Mají formální vzhled, dobře rozložené znaky a řádkování, což výrazně zlepšuje čitelnost. Nejoblíbenějšími fonty v této kategorii jsou Times, Georgia a MS Serif.
- Bez Serif – Bezpatková písma jsou jako vzpurní lidé, kteří chtějí vytvořit svůj vlastní dojem a nemají připojené žádné ozdobné ozdoby. Mají poloformální vzhled, který upřednostňuje praktičnost před vzhledem. Nejoblíbenějšími fonty v této kategorii jsou Arial, Tahoma, Trebuchet MS, Open Sans, Roboto a Verdana.
- Monogram - Tato písma, inspirovaná písmem psacího stroje, mají na konci znaků blok nebo „desku“. Ačkoli se v e-mailech HTML používají zřídka, většina „záložních“ e-mailů s prostým textem v e-mailech MultiMIME používá tato písma. Čtení e-mailu pomocí těchto písem dává administrativní pocit spojený s vládními dokumenty. Courier je nejběžněji používané písmo v této kategorii.
- Kaligrafie – Napodobování ručně psaných písmen minulosti, to, co odlišuje tato písma, je plynulý pohyb, který každá postava sleduje. Čtení těchto písem na hmotném médiu je docela zábavné, ale jejich čtení na digitální obrazovce může být poněkud těžkopádné a namáhavé oči. Taková písma se tedy většinou používají v nadpisech nebo logech jako statické obrázky.
Mezi e-mailová bezpečná písma patří Arial, Georgia, Helvetica, Lucida, Tahoma, Times, Trebuchet a Verdana. Vlastní písma zahrnují poměrně dost rodin a pro klienty, kteří je nepodporují, je nutné kódovat záložní písma. Tímto způsobem, pokud klient nemůže podporovat přizpůsobené písmo, vrátí se k písmu, které může podporovat.
Arial
font-family: Arial, sans-serif;
Georgia
font-family: Georgia, serif;
helvetica
font-family: Helvetica, sans-serif;
lesklý
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
Tahoma
font-family: Tahoma, Geneva, sans-serif;
Doba
font-family: 'Times New Roman', Times, serif;
Trebuchet
font-family: 'Trebuchet MS', sans-serif;
Verdana
font-family: Verdana, Geneva, sans-serif;
Pro podrobnější pohled si určitě přečtěte Omnisendovi článek:
E-mailová bezpečná písma vs. vlastní písma: Co o nich potřebujete vědět
Pokud chcete s infografikou pracovat, nezapomeňte se proklikat.