Ghidul suprem al fonturilor web

În mod istoric, alegerea fontului potrivit pentru e-mailul dumneavoastră nu a fost niciodată prea dificilă, având în vedere numărul limitat de fonturi sigure pentru web din care puteți alege. Dar lucrurile s-au schimbat. Din ce în ce mai mulți designeri de e-mail împing limitele și adoptă aceleași tehnici de dezvoltare pe care designerii web le folosesc de ani de zile – implementarea fonturilor web în e-mailurile lor.

Fontele web permit designerilor web să fie mai creativi cu tipografia lor, permițându-le să aleagă fonturi non-standard în designurile lor.

Cum se întâmplă de obicei în cazul deschiderii de noi drumuri în designul și dezvoltarea e-mailurilor, membrii avangardiști ai comunității au fost printre primii care au adus aceste tehnici în cutiile noastre poștale (și în atenția noastră). Le datorăm mulțumiri uriașe ghidului fantastic al Campaign Monitor pentru fonturi web, „A Type of Email” al lui Paul Airy și Style Campaign pentru inspirație.

În Ghidul suprem pentru fonturi web, vom intra în detalii despre ce sunt fonturile web și despre modul în care designerii de e-mailuri le pot implementa în e-mailurile lor.

Ce este un font web?

Există două tipuri diferite de fonturi disponibile pentru designerii de e-mailuri pentru e-mailurile lor – fonturi web safe și fonturi web. Iată care este diferența dintre cele două:

Fonturi sigure pentru web
Gândiți-vă la Arial, Times New Roman, Verdana sau Georgia ca exemple principale de fonturi sigure pentru web. Acestea sunt fonturile implicite care se regăsesc în majoritatea diferitelor sisteme de operare și dispozitive.

Fonturi web
Fonturile web nu se regăsesc ca parte a fonturilor implicite disponibile pe diferite dispozitive și sisteme de operare și sunt special concepute și licențiate pentru a fi utilizate pe site-uri web. Câteva dintre fonturile web cu care s-ar putea să fiți familiarizați sunt Open Sans și Roboto.

De ce fonturi web?

Ca marketer și designer, cunoașteți presiunea de a rămâne on-brand în e-mail, cu culori, design și – da – tipografie. Blocarea textului important în imagini a fost o practică standard în designul de e-mail ca o modalitate de a rămâne în conformitate cu marca și de a fi creativ. Dar „ascunderea” textului în imagini limitează accesibilitatea e-mailului, deoarece cititoarele de ecran nu pot citi textul din imagine.

Fontele web deschid noi căi de creativitate în tipografie, permițând designerilor de e-mailuri să fie creativi și accesibili – și să respecte aspectul și senzația mărcii lor.

Fonturi de e-mail și fonturi web

În timp ce fonturile web nu au suport universal, iată clienții de e-mail în care acestea sunt acceptate:

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

Lista clienților de e-mail suportați poate părea scurtă, dar aveți încredere – majoritatea dintre ei se numără printre primii 10 cei mai populari clienți de e-mail. Acesta este un motiv de entuziasm!

*Pro Tip: În aprilie 2018, Gmail a lansat o interfață actualizată pentru clientul său de webmail. Această nouă interfață utilizează două fonturi web populare: Google Sans și Roboto. Ce înseamnă acest lucru? În ciuda faptului că Gmail nu suportă fonturi web, dacă folosiți oricare dintre aceste fonturi web în e-mailurile dvs., acestea vor fi redate efectiv în Gmail. Pur și simplu adăugați fonturile la atributul CSS font-family dacă doriți să le folosiți în e-mailul dumneavoastră.

Descoperă top 10

Când vine vorba de marketingul prin e-mail, totul se rezumă la publicul dumneavoastră. Utilizați Litmus Email Analytics pentru a descoperi care clienți de e-mail sunt cei mai populari printre abonații dvs. Înscrieți-vă gratuit!

Descoperă-ți audiența →

Cum să încorporați fonturi web în e-mail

Există trei abordări principale pe care le puteți adopta atunci când utilizați fonturi web în e-mailurile dumneavoastră.

@import

Utilizarea @import este una dintre cele mai simple abordări pentru a importa fonturi web în e-mail. Așezați următoarea linie de cod în <head> al e-mailului dumneavoastră, de obicei în partea de sus a <style>.

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

În acest exemplu, numele fontului importat este „Montserrat.”

Serviciul dumneavoastră de fonturi web vă va oferi URL-ul de care aveți nevoie. Dacă găzduiți singur fontul, va trebui să direcționați URL-ul către locul în care se află fișierul dvs. de font web.

Această metodă este bine suportată în majoritatea clienților de e-mail de mai sus și nu are suport decât în Android 2.3 (Android Gingerbread) – o versiune veche de Android care are o cotă de piață extrem de mică.

<link>

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

La fel ca în cazul metodei @import, serviciul dvs. de font web va defini valoarea href. Dacă găzduiți singur fișierul de font, modificați această adresă URL pentru a indica locul unde se află fontul web pe serverul dumneavoastră. Și veți dori să plasați această linie de cod în <head> al e-mailului dumneavoastră, aproape de partea de sus.

Metoda <link> se comportă puțin mai bine decât metoda @import, cu suport din partea tuturor clienților de e-mail de mai sus (ura!).

Atunci de ce ați alege o metodă în locul alteia? Metoda @import amână încărcarea fontului web care este importat până când HTML-ul în care este încorporat este complet încărcat. Acest lucru poate duce la faptul că fontul dvs. web poate dura ceva mai mult timp pentru a apărea în e-mail, în timp ce restul e-mailului este încărcat. Dimpotrivă, metoda <link> încarcă resursa inline pe măsură ce codul fișierului HTML este citit (de sus în jos), ceea ce ar putea întârzia încărcarea e-mailului dumneavoastră dacă fișierul dvs. de font web este deosebit de mare.

@font-face

Serviciile de fonturi web online oferă în mod obișnuit cinci formate de fișiere din care puteți alege: .eot, .woff, .woff2, .svg și .ttf. Formatul .woff are cel mai bun suport atunci când vine vorba de e-mail, așa că vă sugerăm să folosiți acest format atunci când puteți. Metoda @font-face este singura metodă care vă permite să alegeți în mod specific ce format de fișier doriți să importați, ceea ce o face să fie cea mai sigură metodă de implementare a fonturilor web.

Iată o declarație @font-face tipică pentru a importa un font web în e-mail folosind Google Fonts ca serviciu de fonturi web ales de noi:

@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');}

Din păcate, dacă folosiți Google Fonts, nu este ușor să găsiți URL-ul unui font web – există câteva etape pe care trebuie să le parcurgeți.

1. Căutați fontul web pe care doriți să îl utilizați.
După ce l-ați găsit și l-ați selectat, o mică bară neagră va apărea în partea de jos a ecranului. Când faceți clic pe ea, veți vedea un ecran ca acesta:

2. Copiați URL-ul fontului web (evidențiat mai sus) și lipiți-l în bara de adrese fie din Safari, fie din Internet Explorer.
În această metodă folosim Safari sau Internet Explorer, deoarece Google Fonts folosește detectarea browserului pentru a decide ce tip de fișier de font este servit. Pentru această metodă dorim să folosim tipul de fișier .woff. Folosind Google Chrome tipul de fișier font .woff2 care va fi servit în browserul care are un suport limitat. Mulțumiri lui Elliot Ross pentru această perspectivă suplimentară!

După ce pagina s-a încărcat, veți vedea o declarație CSS pe pagină:

3. Copiați acest CSS și lipiți-l în secțiunea <style> din e-mail.
În timp ce această metodă este considerată cea mai rezistentă la gloanțe, furnizorul serviciului de fonturi web ar putea face modificări la URL-ul de acces direct utilizat pentru a importa fontul web. Dacă alegeți să folosiți această metodă, testați-vă e-mailul în mod regulat pentru a vă asigura că fonturile web continuă să se redea în timp.

La Litmus, metoda @font-face este implementarea noastră de bază pentru a importa fonturi web în e-mailurile noastre.

Toate meritele pentru această metodă de a importa fonturi web îi revin lui Paul Airy, susținător al accesibilității e-mailurilor, așa cum este detaliat într-un articol trecut din Type: E newsletter (la care ar trebui neapărat să vă abonați, dacă nu sunteți deja).

Utilizarea fonturilor web în e-mail

După ce fontul dvs. web este importat, utilizarea lui în e-mail este la fel de simplă ca și cum ați folosi un font web safe, folosind numele font-family definit în metoda de import:

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

Alegerea unui font de rezervă

Când folosiți fonturi web, este necesar să aveți un font web safe de rezervă pentru acei clienți de e-mail care nu acceptă fonturi web.

Fonturi web safe implicite

Care client de e-mail are un font implicit în cazul în care fontul listat în stiva font-family nu este disponibil. De exemplu, Gmail folosește Arial, Apple Mail folosește Helvetica, iar Outlook folosește Calibri.

Dacă nu vă place cum sună niciunul dintre aceste fonturi implicite, avem o veste bună – vă puteți alege fontul de rezervă în stiva font-family.

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

Gândiți-vă la aceasta ca la o listă prioritară de fonturi preferate. Dacă un client nu se poate conforma cu alegerea dvs. numărul unu, va reveni la următorul din lista dvs.

De exemplu, folosind stiva font-family de mai sus, Gmail va ignora primul font din listă, deoarece este un font web care nu este suportat în Gmail, iar fontul redat în e-mail va fi Verdana. În cazul în care Verdana nu este suportat pe dispozitivul utilizat (ceea ce ar fi foarte rar, deoarece Verdana este un font web sigur), dispozitivul va utiliza fontul sans-serif implicit pentru sistemul său, deoarece acesta este al treilea font din listă.

Cum să alegeți fontul de rezervă potrivit

Alegerea fontului de rezervă potrivit care să păstreze designul e-mailului dvs. este esențială pentru a servi o experiență excelentă pentru toți abonații dvs., indiferent de clientul de e-mail pe care îl folosesc.

Fonturile de rezervă ar trebui să fie de același tip ca și fontul web – folosiți un font de rezervă sans-serif dacă fontul dvs. web este un font sans-serif și un font de rezervă serif dacă fontul dvs. web este, de asemenea, un font serif. Utilizarea aceluiași stil de font va ajuta la păstrarea designului e-mailului dvs. în diferiți clienți de e-mail. Puteți face un pas mai departe, analizând înălțimea x a fonturilor.

Înălțimea x este înălțimea verticală a fontului. În mod ideal, ar trebui să alegeți un font de rezervă care are o înălțime x similară pentru a preveni ca designul e-mailului dvs. să se destrame atunci când este utilizat fontul de rezervă.

Iată un exemplu de diferențe subtile în înălțimea x între fonturile Verdana, Arial și fontul web Proxima Nova. Aceste diferențe subtile pot face toată diferența în a face sau nu designul e-mailului dvs. atunci când fonturile web nu sunt redate.

CSS Font Stack are o listă completă – inclusiv acoperirea sistemului de operare – de fonturi sigure pentru web care pot fi folosite ca fonturi de rezervă.

Avansând Faux Bold / Faux Italic

Dacă aveți versiuni bold și italic însoțitoare ale fișierelor dvs. de fonturi web, atunci să le folosim! Designerii de fonturi au depus multă gândire și efort pentru a obține toate stilurile diferite ale unui font exact așa cum trebuie, așa că este cea mai bună practică să aplicați designul original al tipului, mai degrabă decât să permiteți clientului de e-mail sau browserului să aplice la întâmplare un faux bold sau faux italic fals la fontul obișnuit.

În principiu, NU faceți acest lucru:

@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;"

Ca și în cazul designului web, puteți atrage fonturile autentice prin includerea acestor stiluri în stiva @font-face, astfel:

@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');}

După cum puteți vedea, diferitele stiluri atrag diferite fonturi indiferent de font-family. În acest fel, dacă vă stilizați fontul în HTML astfel:

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

…atunci va fi introdus fontul autentic „Montserrat-BoldItalic”! De asemenea, doar adăugând font-weight: bold; va atrage fontul ‘Montserrat-Bold’ și doar adăugând font-style: italic; va atrage fontul ‘Montserrat-Italic’.

Acum, poate vă întrebați – de ce să procedați astfel în loc să declarați un font-family diferit pentru fiecare stil, care, de asemenea, atrage fonturile autentice? Iată cum arată acest lucru:

Nu faceți nici acest lucru!

@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;"

Aceasta prezintă o problemă. Folosirea numelor font-family pentru a stoca stiluri nu numai că creează un CSS excesiv de complicat și redundant, dar, de asemenea, vă lipsește textul de stil în cazul în care intervine fallback-ul. Deci, de exemplu – dacă vizualizați codul de mai sus în Gmail (care nu acceptă fonturi web personalizate), atunci veți vedea doar Verdana fără bold și fără litere în loc de Montserrat Bold Italic. Păstrând font-family și font-weights/font-styles separate, fonturile de rezervă vor păstra în continuare stilul corect.

Outlook, ce-mi faci!

Cu Times New Roman ca font de rezervă implicit, Outlook a fost în mod tradițional o provocare pentru comercianții de e-mailuri cu o inimă pentru tipografie. În timp ce Outlook 2019 – care este cea mai recentă versiune Microsoft a clientului său de e-mail desktop – onorează fonturile de rezervă specificate în cod, versiunile mai vechi de Outlook sunt încă o provocare.

Dacă utilizați metoda de import @font-face, Outlook 2007/10/13/16 va folosi implicit Times New Roman, indiferent de fontul de rezervă pe care îl aveți în loc. Vestea bună este că există un hack bine testat care rezolvă această problemă.

Următorul CSS vizează Outlook, așa cum este indicat de <!-> și <!->, și îi spune lui Outlook să utilizeze un font-stack diferit.

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

Utilizați clasa „fallback-font” în e-mailul dvs. oriunde vă definiți font-family:

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

Și fonturile dvs. în Outlook 2007/10/13 vor reveni cu grație la Arial, în loc de Times New Roman.

O altă soluție pentru acest bug este să înfășurați codul de import @font-face într-o interogare media, ascunzându-l de Outlook:

@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 va ignora acum pur și simplu „Montserrat” în stiva font-family și va citi următorul font.

Există, de asemenea, metoda de a direcționa proprietatea specifică Microsoft Office, mso-font-alt, cu fontul de sistem ales de dvs. la blocul de declarație @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';}

Aceasta îi va spune lui Outlook pentru MS Office să treacă implicit la fontul de rezervă care v-a fost atribuit.

Unde să găsiți fonturi web

Google Fonts

Există o mulțime de servicii de fonturi web disponibile, dar Google Fonts este preferatul nostru. Serviciul este complet gratuit și puteți descărca fonturile web pe computerul dvs. dacă faceți machete de design în Adobe Photoshop, Sketch sau un alt software de design.

Typekit by Adobe

Serviciul popular de abonare la fonturi al Adobe a fost de puțin folos designerilor de e-mail în trecut, deoarece Typekit se baza pe JavaScript pentru a încorpora fonturile. Începând cu august 2017, Typekit a permis utilizarea fonturilor web folosind doar CSS – fără a fi nevoie de JavaScript – și acest lucru deschide fonturile web găsite în Typekit pentru utilizarea în e-mail. Puteți găsi instrucțiuni detaliate despre cum să adăugați fonturi web Typekit în e-mailurile dvs. utilizând @import în documentația de ajutor Typekit.

Mai multe servicii de fonturi web

Dacă sunteți în căutarea și mai multor site-uri web care oferă fonturi web licențiate pentru utilizare în e-mail (în mare parte pe bază de plată), verificați unele dintre serviciile de mai jos:

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

Process Type Foundry

Licențierea fonturilor web în e-mail

Fontele web au fost inițial concepute pentru a fi utilizate numai pe site-uri web, astfel încât licențierea lor este, de obicei, pentru utilizarea doar pe site-uri web și aplicații mobile. Motivul pentru care multe servicii de fonturi web nu permit utilizarea în e-mail este pentru că acest lucru este văzut ca o distribuire a fontului, ceea ce contravine Acordului de licență pentru utilizatorul final (EULA) al multor servicii.

Furnizorii de fonturi web din lista de mai sus includ licențe de utilizare a fontului web în e-mail. Cu toate acestea, multe licențe sunt taxate în funcție de numărul de deschideri lunare, ceea ce ar trebui luat în considerare atunci când se utilizează un serviciu plătit de fonturi web.

Pot folosi fonturi web?

Nu este absolut nimic rău în a folosi fonturi web ca o îmbunătățire progresivă în e-mailurile dvs. chiar acum. Implementați corect fonturile de rezervă și împingeți-vă e-mailurile în viitor!

Merită să aruncați o privire la baza dvs. de abonați pentru a vedea câți dintre ei vă vizualizează e-mailurile într-un client de e-mail care acceptă fonturi web. Dacă majoritatea nu o fac, pur și simplu nu ar merita timpul și efortul dvs., mai ales dacă aveți în vedere utilizarea unui font web plătit.

Fontele web făcute corect

Pentru a vă oferi puțină inspirație în ceea ce este posibil, iată câteva dintre e-mailurile noastre preferate cu fonturi web.

Nu uitați să testați

Cum utilizarea fonturilor web în e-mail este încă considerată ușor experimentală, vă recomandăm să testați des, mai ales dacă ați implementat fonturi web în șabloane care s-ar putea să nu fie actualizate în mod regulat. Modificările și actualizările capacităților de redare ale clienților de e-mail nu sunt de obicei anunțate în prealabil și se pot întâmpla sporadic, așa că este mai bine să testați în mod regulat.

Este demn de remarcat faptul că, dacă aveți fontul web instalat pe propriul computer, veți putea vedea fontul web atunci când testați live într-un client de e-mail de pe computerul dumneavoastră – un lucru de care trebuie să țineți cont în cazul în care se pare brusc că Gmail suportă acum fonturi web.

TESTAȚI TIPOGRAFIA ÎN CAMPANIILE DUMNEAVOASTRĂ

Inspirat să vă duceți jocul de tipărire la nivelul următor? Asigură-te că îți testezi campaniile înainte de a le trimite. Încercați Litmus gratuit și asigurați-vă că tipografia dvs. arată uimitor în peste 90 de clienți de e-mail, inclusiv desktop, webmail și dispozitive mobile.

Învățați mai multe →