Sigurni fontovi za e-poštu i najbolji primjeri iz prakse za HTML fontove za e-poštu
Svi ste čuli moje pritužbe na nedostatak napretka u podršci putem e-pošte tijekom godina, tako da neću trošiti (previše) vremena na kuknjavu zbog toga. Samo bih volio da jedan veliki klijent e-pošte (aplikacija ili preglednik) izađe iz paketa i pokuša u potpunosti podržati najnovije verzije HTML i CSS. Ne sumnjam da tvrtke troše desetke milijuna dolara na fino podešavanje svoje e-pošte.
Zato je fantastično imati tvrtke poput Uplersa koje prate svaki aspekt dizajna e-pošte. U ovoj posljednjoj infografiki, tim vas vodi kroz tipografiju i kako se različiti fontovi i njihove karakteristike mogu koristiti za prilagodbu vaše e-pošte.
Korištenje prilagođenih fontova u e-pošti
Korištenje vanjskih fontova može biti malo veći izazov nego u standardnom web dizajnu zbog različite podrške među klijentima e-pošte. Međutim, i dalje je moguće uključiti vanjske fontove u svoju e-poštu za one klijente koji ih podržavaju, a pružiti rezervne fontove za one koji ih ne podržavaju.
60% klijenata e-pošte sada podržava prilagođene fontove koji se koriste u vašem dizajnu e-pošte, uključujući AOL Mail, izvornu Android Mail aplikaciju (ne Gmail), Apple Mail, iOS Mail, Outlook 200, Outlook.com i e-poštu temeljenu na Safariju.
Upleri
A rezervna font je rezervni font koji klijent e-pošte može prikazati u slučaju da ne može prikazati primarni (vanjski) font. To osigurava da vaša e-pošta ostane čitljiva i da zadrži svoj željeni izgled što je moguće sličnije u različitim okruženjima za gledanje.
- Odaberite svoj vanjski font: Odaberite vanjski font koji želite koristiti. To može biti iz usluge kao što je Google Fonts ili font koji se nalazi na vašem web poslužitelju.
- Uključite font u HTML e-pošte: Za klijente e-pošte koji to podržavaju, povezat ćete se na vanjski font u
<head>
HTML-a vaše e-pošte. Međutim, mnogi klijenti e-pošte ne dopuštaju povezivanje s vanjskim resursima iz sigurnosnih razloga. Umjesto toga, možete uključiti font kao poveznicu u nadi da će ga klijenti web pošte koji dopuštaju vanjske veze prikazati. - Navedite zamjenske fontove: Odaberite zamjenske fontove sigurne za web koji su izgledom slični vašem vanjskom fontu. To bi trebale biti generičke obitelji fontova unaprijed instalirane na većini uređaja i operativnih sustava.
- Koristite ugrađeni CSS za definicije stilova: Zbog ograničene podrške za CSS u mnogim klijentima e-pošte, najbolje je koristiti ugrađeni CSS za definiranje stilova, uključujući obitelji fontova.
Primjer:
Pretpostavimo da želite koristiti vanjski font Otvoreno Sans iz Google Fontova, s Arialom i sans-serifom kao zamjenama. Evo kako to možete pokušati:
<!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>
Važna razmatranja:
- Podrška klijenta e-pošte: Mnogi klijenti e-pošte, osobito oni za stolna računala poput Microsoft Outlooka, ne podržavaju vanjske fontove. Web klijenti poput Gmaila imaju bolju podršku, ali ograničenja i dalje postoje.
- Zamjenski fontovi: To je ključno za osiguravanje da vaša e-pošta ostane funkcionalna i estetski ugodna za sve klijente. Slijed u
font-family
stil ide od najpoželjnijeg fonta do najmanje, završavajući generičkom obitelji (sans-serif
orserif
). - Ispitivanje: Uvijek testirajte svoje HTML poruke e-pošte na različitim klijentima e-pošte da vidite kako se prikazuju. Alati kao što su Litmus ili Email on Acid mogu pomoći u tome.
Za prodajne i marketinške e-poruke, vizualna privlačnost može značajno utjecati na učinkovitost poruke. Iako upotreba jedinstvenog vanjskog fonta može pomoći da se vaša e-pošta istakne, ključno je osigurati da rezervni fontovi održavaju profesionalne i čitljive kvalitete potrebne da vaša poruka bude učinkovito primljena.
Postoje 4 vrste fontova koji se koriste u e-pošti
- crtica – Serifni fontovi imaju znakove s izbočinama, točkama i oblicima na krajevima poteza. Imaju formalan izgled, dobro raspoređene znakove i prored, što uvelike poboljšava čitljivost. Najpopularniji fontovi u ovoj kategoriji su Times, Georgia i MS Serif.
- Bez Serifa – Sans serif fontovi su kao buntovnici koji žele stvoriti vlastiti dojam i nemaju nikakve otmjene ukrase. Imaju poluformalni izgled, koji promiče praktičnost umjesto izgleda. Najpopularniji fontovi u ovoj kategoriji su Arial, Tahoma, Trebuchet MS, Open Sans, Roboto i Verdana.
- Monogram - Inspirirani fontom pisaćeg stroja, ovi fontovi imaju blok ili 'ploču' na kraju znakova. Iako se rijetko koriste u HTML e-pošti, većina 'zamjenskih' e-poruka s običnim tekstom u MultiMIME e-pošti koristi ove fontove. Čitanje e-pošte pomoću ovih fontova daje administrativni osjećaj povezan s vladinim dokumentima. Courier je najčešće korišteni font u ovoj kategoriji.
- Kaligrafija – Imitirajući rukopisna slova iz prošlosti, ono što izdvaja ove fontove je pokret koji svaki znak prati. Te je fontove prilično zabavno čitati u opipljivom mediju, ali njihovo čitanje na digitalnom ekranu može biti prilično nezgrapno i naprezati oči. Dakle, takvi se fontovi uglavnom koriste u naslovima ili logotipima kao statične slike.
Fontovi sigurni za e-poštu uključuju Arial, Georgia, Helvetica, Lucida, Tahoma, Times, Trebuchet i Verdana. Prilagođeni fontovi uključuju dosta obitelji, a za klijente koji ih ne podržavaju potrebno je kodirati rezervne fontove. Na ovaj način, ako klijent ne može podržati prilagođeni font, vratit će se na font koji može podržati.
Arial
font-family: Arial, sans-serif;
Gruzija
font-family: Georgia, serif;
Helvetica
font-family: Helvetica, sans-serif;
Lucidi
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
Tahoma
font-family: Tahoma, Geneva, sans-serif;
Times
font-family: 'Times New Roman', Times, serif;
Trebuchet
font-family: 'Trebuchet MS', sans-serif;
Verdana
font-family: Verdana, Geneva, sans-serif;
Za dublji uvid svakako pročitajte Omnisendova članak:
Sigurni fontovi e-poštom nasuprot prilagođenim fontovima: što trebate znati o njima
Svakako kliknite ako želite komunicirati s infografikom.