Mai mult decât cuvinte: cum să folosiți tipografia de e-mail care spune multe

Serif și sans-serif sunt cele mai frecvent utilizate fonturi, în special pentru body copy. Acest lucru se datorează faptului că sunt cele mai lizibile și, prin urmare, accesibile. Se redau bine atunci când sunt reduse și la greutăți mai mici.

Fonturile de script și de afișare sunt adesea prea complexe pentru copierea corpului. Adică, pot fi greu de citit și chiar mai greu de scanat. Deci sunt de obicei rezervate pentru titluri.

Fonturile monospațiate sunt, de asemenea, mai puțin frecvent utilizate ca copie de corp. În schimb, ele sunt favorizate în resursele tehnice pentru limbajele de programare pentru a distinge codul de limbajul natural.

Fonturi web

Pentru a utiliza un font într-un e-mail, acesta trebuie să fie un font web.

Acesta este un tip de literă digital care poate fi apelat în codul dvs. Există multe fonturi web gratuite disponibile, precum și cele care pot fi achiziționate. În primul rând, totuși, să ne uităm la cele două tipuri de fonturi digitale pe care le puteți apela în e-mailul dvs.: fonturi sigure pentru web și fonturi web.

Fonturi sigure pentru web

Acestea sunt fonturi care sunt instalate pe majoritatea sistemelor de operare, ceea ce înseamnă că apelarea acestor fonturi în codul dvs. de e-mail va avea ca rezultat o redare coerentă între clienții de e-mail, dispozitivele și sistemele de operare.

Iată fonturile sigure pentru web cel mai bine acceptate pe dispozitivele Windows și Mac:

Fonturi web

Acestea sunt fonturi care nu sunt disponibile pe toate sistemele de operare.

Prin urmare, trebuie să adăugați un cod suplimentar la e-mailurile dvs. pentru a le utiliza. De asemenea, trebuie să vă asigurați că aveți fonturi alternative sigure pentru web în stiva dvs. de fonturi, deoarece nu toți clienții de e-mail vor reda fonturi web.

Există multe locuri diferite în care puteți găsi fonturi web, cum ar fi Fonturi Google, care este o resursă gratuită și Fonturi Adobe, care necesită un abonament.

Pentru un ghid cuprinzător despre fonturile web, consultați Ghidul nostru final pentru fonturi web.

În mod ideal, nu ar trebui să utilizați mai mult de două stiluri de font simultan . Acest lucru se datorează parțial pentru că poate deveni zgomotos și confuz dacă aplicați prea multe, dar poate crește și timpul de încărcare a e-mailului dacă apelați în mai multe fonturi web.

Stilul fontului

Există stiluri de font suplimentare pe care le putem proiecta și codifica pentru a atrage atenția asupra cuvintelor și propozițiilor din e-mailul nostru. Dar cum și când le folosim este important, deoarece pot afecta lizibilitatea și accesibilitatea e-mailurilor noastre.

Ghidul suprem pentru accesibilitatea prin e-mail Descoperiți cunoștințele și sfaturile pas cu pas de care aveți nevoie pentru a scrie, proiecta și codifica e-mailurile care pot fi bucurate de oricine, indiferent de abilitățile lor. OBȚINEȚI GHIDUL

Îndrăzneţ

Încercați să limitați textul îngroșat la câteva cuvinte pe care ați dori să le evidențiați printre restul copiei din e-mailul dvs. Acest lucru vă va asigura că nu aveți mai multe cuvinte cheie care luptă pentru atenție.

În timp ce textul îngroșat poate ajuta abonații cu vederi să identifice informațiile cheie, cititorii de ecran vor înțelege diferența doar prin codificare semantică.

Eticheta <b> bold nu este semantică și nu va sublinia cuvântul (cuvintele) alese(e) pentru utilizatorul cititorului de ecran. Așadar, pentru a face ecou experiența pe care o au utilizatorii tăi văzători, folosește întotdeauna eticheta <strong>.

<p>Be <strong> bold </strong> ,<br />be <strong>brave</strong></p>

Cursiv

Similar cu cuvintele îndrăznețe, italicele adaugă accent, deși într-o măsură mai mică.

Ca și în cazul caracterelor aldine, există mai multe moduri de a codifica textul cu caractere italice. Cu toate acestea, eticheta <em> este compatibilă cu WCAG (nu eticheta <i>) și poate oferi cititorilor de ecran o indicație despre cum ar trebui înțeles ceva.

<p>I love funny English words like <em> gubbins </em> and <em>gnarly</em>.</p>

Striat

Aplicarea acestui stil poate atrage atenția asupra unei reduceri de preț sau a unei actualizări de informații.

Cu toate acestea, nu se redă în mod constant între clienții de e-mail.

Eticheta HTML <strike> nu este acceptată de Hey și este acceptată doar parțial de aplicațiile Gmail. Și abordarea acestui stil cu CSS line-through are, de asemenea, suport limitat, unii clienți de e-mail care fac linia atât de subțire, încât este destul de greu de văzut.

De asemenea, merită remarcat faptul că există o problemă de accesibilitate cu acest stil, deoarece cititorii de ecran nu vor sublinia un cuvânt cu barat, ceea ce ar putea avea un impact negativ asupra experienței celor care se bazează pe tehnologia de asistență. Adăugarea contextului înainte de fiecare sumă, cum ar fi „era” și „acum” va face din aceasta o experiență valoroasă pentru toată lumea.

Cea mai bună modalitate de a codifica o barare este utilizarea etichetei HTML <strike>, astfel:

<p>Was<br /><span> <strike> $200 </strike> </span></p>

Majuscule

Utilizarea majusculei poate atrage atenția asupra cuvintelor cheie și poate afișa ierarhia. Cu toate acestea, poate fi văzut și ca strigăt, așa că cel mai bine este să îl folosiți cu moderație.

Un alt motiv pentru a merge ușor cu majusculele este că are un impact asupra lizibilității. Suntem familiarizați cu identificarea cuvintelor după forma lor. Forma dreptunghiulară uniformă a textului cu majuscule ne încetinește și reduce capacitatea de scanare.

De asemenea, aș recomanda stilarea textului cu majuscule folosind stilul CSS, deoarece scrierea cu majuscule ar putea avea un impact negativ asupra cititorilor de ecran. În unele cazuri, un cititor de ecran poate crește volumul atunci când întâlnește majuscule sau poate citi cuvinte literă cu literă, deoarece le identifică ca acronime.

Stilul CSS nu este identificat de cititoarele de ecran, așa că va trata textul cu majuscule folosind stilul CSS la fel ca textul obișnuit.

<p>We need to shout about this <br /><span>big win</span></p>

Spațiul dintre litere

Adăugarea de spațiere între litere poate aduce un pic de caracter și identitate suplimentar fonturilor dvs. și, de asemenea, poate face unele stiluri de font mai lizibile.

De exemplu, dacă trebuie să aplicați un stil cu majuscule textului dvs., atunci adăugarea unei mici spații dintre litere poate îmbunătăți lizibilitatea. Cu toate acestea, este un echilibru fin, deoarece spațierea prea mare a literelor va afecta lizibilitatea.

Pentru mai multe informații despre ceea ce trebuie și nu trebuie făcut în cazul spațierii dintre litere, consultați această postare utilă.

Asistența este bună pentru clienții de e-mail, doar Outlook oferă asistență parțială. Pentru a adăuga niște spațiere între litere, doriți să stilați folosind CSS:

<p style=”font-family:'Helvetica Neue',Helvetica,sans-serif; font-size:18px; line-height:28px; color:#0C4B6A; text-transform:uppercase; letter-spacing: 2px ;”>A little letter spacing helps readability</p>

Alinierea textului

Există câteva dintre no-nu-uri care au aliniat text.

În primul rând, stilul justificat : Acest lucru va face textul ancorat în stânga și în dreapta containerului său. Pentru a realiza acest lucru, adaugă o spațiere inegală între cuvinte, având un impact puternic asupra lizibilității.

Textul corpului aliniat la dreapta ar trebui folosit numai pentru limbile care citesc de la dreapta la stânga. Este foarte nefiresc ca limbile de la stânga la dreapta să fie citite atunci când sunt aliniate la dreapta și, de asemenea, va avea un impact negativ asupra lizibilității.

Textul aliniat la centru ar trebui rezervat pentru titluri sau paragrafe scurte de cel mult 3 rânduri.

Alinierea optimă este aliniată la stânga pentru limbile de la stânga la dreapta. Acest lucru creează un punct de ancorare la care să se întoarcă de fiecare dată când este citită o linie și este un aspect cheie pentru experiențele de lectură accesibile.

Pentru a codifica alinierea textului, puteți utiliza atributul HTML align. Cu toate acestea, acest lucru va alinia și orice alte elemente pe care le aveți în celulă. Utilizarea CSS pe etichete semantice, cum ar fi antete sau paragrafe, este cea mai eficientă modalitate de a vă alinia copia:

<p style=”font-family:Helvetica Neue,Helvetica,sans-serif; font-size:18px; line-height:28px; color:#0C4B6A; text-align:left ;”>I am left aligned</p>

Culoare

Lucrul de reținut cu culoarea este contrastul.

Când selectați culorile textului, trebuie să vă asigurați că acestea vor ieși în evidență față de culorile de fundal sau imaginile de fundal. Acest lucru vă va ajuta să faceți conținutul ușor de citit pentru abonații cu o serie de deficiențe de vedere. Cel mai bun mod de a afla dacă aveți un raport de contrast bun este să vă testați culorile în verificatorul de contrast WebAim.

Pentru o scufundare mai profundă în crearea, proiectarea și codificarea conținutului accesibil pentru e-mail, consultați sesiunile Salesforce Trailhead pe care le-am înregistrat cu Mark Robbins, inginer software la Salesforce.

mărimea

Nu există cu adevărat o limită superioară pentru cât de mare vă stilați textul. Cu toate acestea, doriți să păstrați cuvintele pe o singură linie pentru ca acestea să fie lizibile și să nu vă rupe e-mailul.

Există o limită la modul în care ar trebui să fie text mic, totuși. Orice sub 14 px devine greu de citit pentru mulți oameni, iar funcția de ajustare automată a textului iOS Apple Mail va intra și vă va mări textul.

La Litmus, rareori ne abatem sub 18px. Dacă o facem, ne limităm la informații terțiare, cum ar fi avertismente, note de subsol și conținut de subsol. Acest lucru permite conținutului primar să domine.

Inaltimea liniei

O bună lizibilitate se bazează, de asemenea, pe spațiul adecvat între fiecare linie de text. Prea puțin și poate fi greu să urmărești o singură linie de text fără ca ochii să se apropie de o altă linie. Prea mult și fiecare rând poate avea impresia că este independentă de următoarea, ceea ce face ca citirea și scanarea să fie o provocare.

Pentru a realiza acest lucru, înălțimea liniilor ar trebui să fie între 1,5 și 2 ori dimensiunea textului. De exemplu, o dimensiune a fontului de 20 px ar trebui să aibă o înălțime de linie de 30-40 px.

Sfaturi pentru utilizarea tipografiei în designul de e-mail

Se pot realiza multe prin stilizarea conținutului scris. Voi explica patru moduri în care puteți utiliza eficient tipografia în e-mailurile dvs. pentru a avea un impact și pentru a ghida cititorii.

Ajutați abonații să vă identifice marca

În primul rând, puteți aplica fonturi de marcă pentru a ajuta abonații să vă identifice marca atunci când vă deschid e-mailul. Unele fonturi sunt foarte distinctive, chiar și în afara contextului. Gândiți-vă la Walt Disney și Coca-Cola.

Diferențierea tipurilor de comunicare

Puteți stila diferite tipuri de comunicare, cum ar fi e-mailurile tranzacționale și buletinele informative, utilizând diferite stiluri de font. Acest lucru vă ajută publicul să identifice rapid tipul de comunicare pe care a primit-o.

Creșteți personalitatea mărcii

Personalitatea mărcii poate fi, de asemenea, crescută cu o tipografie creativă, cum ar fi utilizarea fonturilor de afișare în zona eroilor care strigă mesaje cheie.

Este corect mesajul tău? Ține greșelile la distanță și asigură-te că e-mailurile tale au un impact. Previzualizează în peste 100 de aplicații și dispozitive, validează linkurile și imaginile, testează accesibilitatea și multe altele. Nu te înșela

Creați ierarhie

Unul dintre cele mai utile lucruri pe care le puteți face cu tipografia este să creați o ierarhie, ajutând să ghidați cititorul prin e-mailul dvs. Așa că voi petrece puțin mai mult timp aici.

Astăzi, volumul de e-mailuri primite de majoritatea abonaților este substanțial. Pentru a trece prin și a digera toate mesajele primite pur și simplu nu este posibil. Prin urmare, e-mailurile deschise sunt adesea scanate pe măsură ce cititorul caută puncte de ancorare în e-mailul dvs. pentru a înțelege valoarea.

Aplecându-vă în stilurile de font, dimensiuni, greutăți și culori, puteți arăta care părți ale e-mailului sunt cele mai importante. Deși nu cred în „fold”, cred că este important să le oferim abonaților posibilitatea de a înțelege scopul e-mailului și de a lua măsuri fără a fi nevoie să se angajeze să citească o mulțime de copii.

Permiteți-mi să vă descompun cu acest exemplu:

Folosește o tipografie mare și îndrăzneață în zona eroilor pentru a atrage atenția asupra unui titlu care rezumă valoarea sau scopul e-mailului.

Dacă clicurile și conversiile sunt obiectivul campaniei dvs., continuarea cu un îndemn la acțiune poate ajuta cititorul să ia acțiune fără a fi nevoie să consume întregul e-mail.

Apoi, adăugați titluri mai puțin dominante care descompun textul textului, astfel încât acest conținut să poată fi scanat cu ușurință dacă cititorul nu se poate angaja să citească fiecare cuvânt.

Mărcile devin creative cu tipografia de e-mail

Acum, pentru câteva exemple de mărci cu mare utilizare a tipografiei în design-urile lor de e-mail. Ce îi face să iasă în evidență și să atragă cititorii?

UMEDE

DAMP, un buletin informativ care evidențiază vinificatorii și comercianții cu amănuntul care se concentrează pe producerea și vânzarea de vinuri naturale, se bazează mult pe tipografie, lucrând cu fonturi serif și sans-serif pentru a stabili ierarhia conținutului.

Fonturi utilizate: Helvetica cu neue Arial de rezervă, și fonturi de sistem serif Times New Roman.

Zona eroului afișează singura imagine din acest buletin informativ de formă lungă, cu o tipografie îndrăzneață dând tonul e-mailului deschis. Această tendință de design de e-mail de tipografie îndrăzneață face o declarație. Nu este de mirare că atât de multe mărci au adoptat acest stil.

Ceea ce este cu adevărat interesant la acest e-mail este că realizează acest stil modern și curat folosind fonturi de sistem, mai degrabă decât fonturi web, ceea ce înseamnă că fonturile vor fi afișate în mod similar pentru toți clienții de e-mail.

Gata Mag

Ready Mag, un editor de grafică în browser, se orientează, de asemenea, spre fonturile de sistem, conducând cu fonturile de sistem Mac, urmate de o serie de Helveticas. Acest lucru este probabil dincolo de ceea ce este necesar pentru o stivă de fonturi în e-mail.

Fonturi utilizate : fonturi de sistem Apple, care se întorc la Helvetica și Arial.

Ceea ce îmi place la acest e-mail este modul în care tipografia îndrăzneață separă conținutul. Face e-mailul ușor de scanat. Și cu un text minim, cititorii grăbiți pot obține valoarea fiecărei secțiuni și pot lua măsuri rapid.

Blurb

Platforma de autopublicare Blurb folosește fonturi web pentru a-și aduce identitatea mărcii pe e-mail-uri, folosind ponderi ușoare și aldine, precum și litere mari pentru a contura ierarhia și zonele de acțiune.

Fonturi utilizate : Futura și Proxima Nova (fonturi web), revenind la Helvetica și Arial.

Este grozav să vezi numerele – cele care compun pașii – stilate folosind text live, mai degrabă decât imagini. Acest lucru creează o experiență mult mai fluidă pentru abonații care se bazează pe cititoare de ecran și înseamnă, de asemenea, că acestea vor fi redate atunci când imaginile nu sunt încărcate.

Tripadvisor

La fel ca multe mărci, platforma de călătorie Tripadvisor și-a trimis mesajele despre COVID-19 folosind un șablon în stil de scrisoare. Acesta este un mod mai personal și mai direct de a comunica cu clienții, oferind informații importante fără distracția imaginilor sau probabilitatea de a fi confundat cu un e-mail de marketing.

Fonturi folosite : Arial.

Tipografia mare și îndrăzneață evidențiază mesajul general al e-mailului, în timp ce titlurile stilate pentru a ieși în evidență față de blocurile de conținut fragmentat, oferind puncte de ancorare pentru ca cititorul să înțeleagă valoarea unei secțiuni.

Acest e-mail extrem de scanat are, de asemenea, o umplutură ample în stânga și în dreapta containerului principal, ceea ce este o tehnică excelentă pentru a preveni copleșirea cititorului prin blocuri mari de copii.

Tattly

Retailerul de tatuaje temporare Tattly are o abordare foarte creativă a design-ului de e-mail, e-mailurile promoționale utilizând adesea tehnici și tendințe interesante de design. Ei folosesc o tipografie îndrăzneață în eroul acestui e-mail pentru a atrage atenția asupra noilor produse prezentate în e-mail.

Fonturi utilizate : Open Sans (font web), revenind la Helvetica și Arial.

Este obișnuit în cazul e-mailurilor foarte proiectate, cum ar fi acesta, ca tipografia să fie bazată pe imagini, mai degrabă decât pe text live.

Există o serie de considerații privind accesibilitatea care trebuie luate în considerare atunci când utilizați imagini pentru text, cum ar fi aplicarea textului ALT care reflectă copierea și luarea în considerare a modului în care va arăta textul pentru persoanele care trebuie să mărească e-mailul din cauza unui aspect vizual. deficienta. Textul se va pixeliza și va deveni ilizibil? De asemenea, cât de lizibil este textul bazat pe imagini atunci când e-mailul scade pe dispozitivele mobile?

Deși textul live este cel mai bun mod de a vă menține e-mailurile accesibile și lizibile, există o modalitate de a face zonele de eroi bazate pe imagini valoroase pentru un public mai larg, prin împachetarea imaginii eroului într-o etichetă H1 și adăugând textul imaginii la eticheta ALT, asa:

<h1 style=”Helvetica Neue,Helvetica,sans-serif; font-size:50px; line-height:75px; color:#262524;”><img src=”hero.png” alt=”Image based hero messaging - there is a way!”></h1>

Această abordare face ca e-mailul să poată fi scanat pentru abonați să se bazeze pe cititoare de ecran, deoarece aceștia pot folosi funcționalitatea de comenzi rapide pentru a naviga prin titluri.

„Înfășurarea unei imagini într-o etichetă H1 este un cod semantic valid și va fi inclusă în meniurile scurte pentru titlurile cititorului de ecran. Cu toate acestea, este important să rețineți că este posibil ca textul ALT să nu fie citit de toate instrumentele de citire a textului.” – Mark Robbins, inginer software, Salesforce

Tipografia e-mailului are un impact

Odată cu creșterea rapidă a numărului de mesaje care concurează pentru atenția abonaților dvs., sarcina de a ieși în evidență și de a oferi în continuare o experiență de încredere – rapidă – devine tot mai grea. Tipografia este o modalitate excelentă de a vă face e-mailurile frumoase, eficiente și accesibile, fără a vă încetini.

Ține cont de acest ghid și împărtășește cum folosești tipografia în e-mailurile tale. Mi-ar plăcea să le văd!

Creați e-mailuri de marcă, fără erori, cu Litmus Gata cu e-mailurile sparte. Creați și testați-vă e-mailurile cu Litmus pentru a asigura o experiență excelentă pentru abonați în fiecare căsuță de e-mail. Începe perioada gratuită de testare