Più delle parole: come utilizzare la tipografia e-mail che la dice lunga

Serif e sans-serif sono i caratteri tipografici più comunemente usati, specialmente per il body copy. Questo perché sono più leggibili e quindi accessibili. Rendono bene quando vengono ridimensionati e con pesi inferiori.

I caratteri tipografici e di visualizzazione sono spesso troppo complessi per la copia del corpo. Ciò significa che possono essere difficili da leggere e ancora più difficili da scansionare. Quindi di solito sono riservati ai titoli.

I caratteri tipografici a spaziatura fissa sono anche meno comunemente usati come copia del corpo. Invece, sono preferiti nelle risorse tecniche per i linguaggi di programmazione per distinguere il codice dal linguaggio naturale.

Caratteri web

Per utilizzare un carattere tipografico all'interno di un'e-mail, è necessario che sia un carattere web.

Questo è un carattere digitale che può essere chiamato nel tuo codice. Ci sono molti font web gratuiti disponibili così come quelli che possono essere acquistati. Prima, però, diamo un'occhiata ai due tipi di caratteri digitali che puoi chiamare nella tua e-mail: caratteri sicuri per il web e caratteri web.

Font sicuri per il Web

Si tratta di caratteri tipografici installati sulla maggior parte dei sistemi operativi, il che significa che chiamare questi caratteri nel codice e-mail si tradurrà in un rendering coerente tra client di posta elettronica, dispositivi e sistemi operativi.

Ecco i caratteri sicuri per il Web meglio supportati su dispositivi Windows e Mac:

Caratteri web

Questi sono caratteri che non sono disponibili su tutti i sistemi operativi.

Pertanto, è necessario aggiungere del codice extra alle e-mail per utilizzarle. Devi anche assicurarti di avere font di riserva per il Web nella tua pila di font, poiché non tutti i client di posta elettronica eseguiranno il rendering dei caratteri web.

Ci sono molti posti diversi dove puoi trovare font web, come Google Fonts che è una risorsa gratuita e Adobe Fonts che richiede un abbonamento.

Per una guida completa sui caratteri web, consulta la nostra guida definitiva ai caratteri web.

Idealmente, non dovresti usare più di due stili di carattere alla volta . Ciò è in parte dovuto al fatto che può diventare rumoroso e confuso se ne applichi troppi, ma può anche aumentare il tempo di caricamento della tua email se stai chiamando con più caratteri web.

Stile del carattere

Ci sono stili di carattere aggiuntivi che possiamo progettare e codificare per attirare l'attenzione su parole e frasi all'interno della nostra e-mail. Ma come e quando li utilizziamo è importante in quanto possono influire sulla leggibilità e sull'accessibilità delle nostre e-mail.

La guida definitiva all'accessibilità della posta elettronica Scopri gli approfondimenti e i consigli passo passo necessari per scrivere, progettare e codificare le email che possono essere apprezzate da chiunque, indipendentemente dalle proprie capacità. OTTIENI LA ​​TUA GUIDA

Grassetto

Cerca di limitare il testo in grassetto a una manciata di parole che vorresti mettere in risalto rispetto al resto della copia nella tua email. Questo ti assicurerà di non avere più parole chiave che combattono per attirare l'attenzione.

Anche se il testo in grassetto può aiutare gli abbonati vedenti a identificare le informazioni chiave, è solo attraverso la codifica semantica che gli screen reader coglieranno la differenza.

Il tag <b> in grassetto non è semantico e non metterà in risalto le parole scelte per l'utente dello screen reader. Quindi, per ripetere l'esperienza che stanno ottenendo i tuoi utenti vedenti, usa sempre il tag <strong>.

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

Corsivo

Simile al grassetto, le parole in corsivo aggiungono enfasi, anche se in misura minore.

Come con il grassetto, esistono diversi modi per codificare il testo in corsivo. Tuttavia, è il tag <em> che è conforme a WCAG (non il tag <i>) e può fornire agli screen reader un'indicazione di come qualcosa dovrebbe essere inteso.

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

Barrato

L'applicazione di questo stile può attirare l'attenzione su una riduzione del prezzo o un aggiornamento delle informazioni.

Tuttavia, non viene visualizzato in modo coerente tra i client di posta elettronica.

Il tag HTML <strike> non è supportato da Hey e solo parzialmente supportato dalle app Gmail. E affrontare questo stile con il line-through CSS ha anche un supporto limitato con alcuni client di posta elettronica che rendono la linea così sottile che è abbastanza difficile da vedere.

Vale anche la pena notare che c'è un problema di accessibilità con questo stile, poiché gli screen reader non enfatizzeranno una parola barrata, il che potrebbe avere un impatto negativo sull'esperienza di coloro che fanno affidamento sulla tecnologia assistiva. L'aggiunta di un contesto prima di ogni importo, come "era" e "adesso", renderà questa esperienza preziosa per tutti.

Il modo migliore per codificare un barrato è utilizzare il tag HTML <strike>, in questo modo:

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

Maiuscolo

L'uso delle maiuscole può attirare l'attenzione sulle parole chiave e mostrare la gerarchia. Tuttavia, può anche essere visto come un grido, quindi è meglio usarlo con parsimonia.

Un altro motivo per andarci piano con le maiuscole è che influisce sulla leggibilità. Abbiamo familiarità con l'identificazione delle parole dalla loro forma. La forma rettangolare uniforme del testo maiuscolo ci rallenta e riduce la leggibilità.

Consiglierei anche di applicare uno stile al testo maiuscolo utilizzando lo stile CSS, poiché scrivere in maiuscolo potrebbe avere un impatto negativo sugli screen reader. In alcuni casi, uno screen reader può aumentare il volume quando incontra le maiuscole o può leggere le parole lettera per lettera poiché le identifica come acronimi.

Lo stile CSS non è identificato dagli screen reader, quindi tratterà il testo in maiuscolo con stile utilizzando i CSS allo stesso modo del testo normale.

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

Spaziatura del carattere

L'aggiunta di spaziatura tra le lettere può conferire un tocco di carattere e identità in più ai tuoi caratteri e può anche rendere più leggibili alcuni stili di carattere.

Ad esempio, se hai bisogno di applicare uno stile maiuscolo al tuo testo, anche l'aggiunta di una piccola spaziatura tra le lettere può migliorare la leggibilità. Tuttavia, è un buon equilibrio, poiché una spaziatura eccessiva delle lettere danneggerà la leggibilità.

Per ulteriori informazioni sulle cose da fare e da non fare della spaziatura delle lettere, dai un'occhiata a questo utile post.

Il supporto è buono per i client di posta elettronica con solo Outlook che offre un supporto parziale. Per aggiungere un po' di spaziatura tra le lettere, vuoi applicare uno stile usando 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>

Allineamento del testo

Ci sono un paio di veri e propri no-no con l'allineamento del testo.

Prima di tutto, lo stile giustificato : questo renderà il testo ancorato a sinistra e a destra del suo contenitore. Per raggiungere questo obiettivo, aggiunge una spaziatura diseguale tra le parole, incidendo pesantemente sulla leggibilità.

Il corpo del testo allineato a destra deve essere utilizzato solo per le lingue che si leggono da destra a sinistra. È molto innaturale che le lingue da sinistra a destra vengano lette quando sono allineate a destra e avrà anche un impatto negativo sulla leggibilità.

Il testo allineato al centro deve essere riservato a titoli o brevi paragrafi di non più di 3 righe.

L'allineamento ottimale è allineato a sinistra per le lingue da sinistra a destra. Questo crea un punto di ancoraggio a cui tornare ogni volta che viene letta una riga ed è una considerazione chiave per esperienze di lettura accessibili.

Per codificare l'allineamento del testo puoi utilizzare l'attributo di allineamento HTML. Tuttavia, questo allineerà anche tutti gli altri elementi che hai all'interno della cella. L'utilizzo di CSS su tag semantici, come intestazioni o paragrafi, è il modo più efficace per allineare la tua 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>

Colore

La cosa da ricordare con il colore è il contrasto.

Quando selezioni i colori del testo, devi assicurarti che risaltino rispetto ai colori o alle immagini di sfondo. Ciò contribuirà a rendere i tuoi contenuti leggibili per gli abbonati con una serie di disabilità visive. Il modo migliore per scoprire se hai un buon rapporto di contrasto è testare i tuoi colori nel controllo del contrasto di WebAim.

Per un approfondimento sulla creazione, progettazione e codifica di contenuti accessibili per e-mail, dai un'occhiata alle sessioni di Salesforce Trailhead che ho registrato con Mark Robbins, Software Engineer presso Salesforce.

Taglia

Non c'è davvero un limite massimo alla grandezza del tuo testo. Tuttavia, vuoi mantenere le parole su una riga in modo che siano leggibili e non interrompano la tua email.

Tuttavia, c'è un limite a quanto piccolo dovrebbe essere il testo. Qualsiasi cosa al di sotto dei 14 px diventa difficile da leggere per molte persone e la funzione di regolazione automatica del testo di iOS Apple Mail si attiverà e ingrandirà il testo.

A Litmus, raramente ci spostiamo al di sotto dei 18px. Se lo facciamo, lo limitiamo a informazioni terziarie come avvertenze, note a piè di pagina e contenuto a piè di pagina. Ciò consente ai contenuti primari di dominare.

Altezza della linea

Una buona leggibilità si basa anche su uno spazio adeguato tra ogni riga di testo. Troppo poco e può essere difficile seguire una singola riga di testo senza che lo sguardo si sposti su un'altra riga. Troppo, e ogni riga può sembrare indipendente dalla successiva, rendendo la lettura e la scansione una sfida.

Per ottenere ciò, l'altezza delle linee dovrebbe essere compresa tra 1,5 e 2 volte la dimensione del testo. Ad esempio, una dimensione del carattere di 20 px dovrebbe avere un'altezza della linea di 30-40 px.

Suggerimenti per l'utilizzo della tipografia nel design della posta elettronica

Si può ottenere molto modificando il contenuto scritto. Spiegherò quattro modi in cui puoi utilizzare efficacemente la tipografia nelle tue e-mail per avere un impatto e guidare i lettori.

Aiuta gli abbonati a identificare il tuo marchio

Prima di tutto, puoi applicare i caratteri del marchio per aiutare gli abbonati a identificare il tuo marchio quando aprono la tua email. Alcuni caratteri sono molto distintivi, anche fuori contesto. Pensa a Walt Disney e alla Coca-Cola.

Differenziare i tipi di comunicazione

Puoi modellare diversi tipi di comunicazione come e-mail transazionali e newsletter utilizzando diversi stili di carattere. Questo aiuta il tuo pubblico a identificare rapidamente il tipo di comunicazione che ha ricevuto.

Elevare la personalità del marchio

La personalità del marchio può anche essere elevata con la tipografia creativa, come l'uso di caratteri di visualizzazione nell'area degli eroi che richiamano messaggi chiave.

Il tuo messaggio sta arrivando giusto? Tieni a bada gli errori e assicurati che le tue e-mail abbiano un impatto. Visualizza l'anteprima in oltre 100 app e dispositivi, convalida collegamenti e immagini, verifica l'accessibilità e altro ancora. Non fare errori

Crea gerarchia

Una delle cose più utili che puoi fare con la tipografia è creare una gerarchia, aiutando a guidare il lettore attraverso la tua email. Quindi passerò un po' più di tempo qui.

Oggi, il volume di email ricevute dalla maggior parte degli abbonati è notevole. Non è possibile passare e digerire tutti i messaggi ricevuti. Pertanto, le e-mail aperte vengono spesso scansionate mentre il lettore cerca punti di ancoraggio all'interno della tua e-mail per comprenderne il valore.

Appoggiandoti a stili di carattere, dimensioni, pesi e colori, puoi mostrare quali parti della tua email sono più importanti. Sebbene non sia un sostenitore del "fold", penso che sia importante dare agli abbonati l'opportunità di comprendere lo scopo dell'e-mail e agire senza doversi impegnare a leggere molto testo.

Lascia che te lo spieghi con questo esempio:

Utilizza una tipografia grande e audace nell'area dell'eroe per attirare l'attenzione su un titolo che riassume il valore o lo scopo dell'e-mail.

Se i clic e le conversioni sono l'obiettivo della tua campagna, il follow-up con un invito all'azione può aiutare il lettore a intraprendere l'azione senza dover consumare l'intera email.

Quindi, aggiungi titoli meno dominanti che rompono il testo del corpo in modo che questo contenuto possa essere facilmente scansionato se il lettore non può impegnarsi a leggere ogni parola.

I marchi diventano creativi con la tipografia delle e-mail

Ora per alcuni esempi di marchi con un grande uso della tipografia nei loro progetti di posta elettronica. Cosa li distingue e attira i lettori?

UMIDO

DAMP, una newsletter che mette in evidenza produttori di vino e rivenditori che si concentrano sulla produzione e vendita di vini naturali, si appoggia fortemente alla tipografia, lavorando con caratteri serif e sans-serif per definire la gerarchia dei contenuti.

Font utilizzati: Helvetica Neue con fallback Arial, e font di sistema serif Times New Roman.

L'area dell'eroe mostra l'unica immagine in questa newsletter in formato lungo, con una tipografia in grassetto che definisce il tono dell'e-mail all'apertura. Questa tendenza del design delle email di tipografia audace fa una dichiarazione. Non c'è da meravigliarsi se così tanti marchi hanno adottato questo stile.

La cosa veramente interessante di questa e-mail è che ottengono questo stile moderno e pulito utilizzando caratteri di sistema anziché caratteri web, il che significa che i caratteri verranno visualizzati in modo simile su tutti i client di posta elettronica.

Pronto Mag

Ready Mag, un editor di grafica nel browser, si appoggia anche ai caratteri di sistema, in primo luogo con i caratteri di sistema Mac, seguiti da una serie di Helveticas. Questo è probabilmente al di là di quanto richiesto da uno stack di caratteri nelle e-mail.

Font utilizzati : font di sistema Apple, che ricadono su Helvetica e Arial.

Quello che amo di questa e-mail è il modo in cui la tipografia audace separa il contenuto. Rende l'e-mail facile da scansionare. E con una copia del corpo minima, i lettori in fretta possono ottenere il valore di ogni sezione e agire rapidamente.

Blurb

La piattaforma di autopubblicazione Blurb utilizza i caratteri web per portare la propria identità di marca nelle e-mail, utilizzando pesi chiari e in grassetto e lettere maiuscole per delineare la gerarchia e le aree di azione.

Font utilizzati : Futura e Proxima Nova (caratteri web), che ricadono su Helvetica e Arial.

È fantastico vedere i numeri, quelli che compongono i passaggi, in stile utilizzando il testo in tempo reale anziché le immagini. Ciò crea un'esperienza molto più fluida per gli abbonati che fanno affidamento sugli screen reader e significa anche che questi verranno visualizzati quando le immagini non vengono caricate.

TripAdvisor

Come molti marchi, la piattaforma di viaggi Tripadvisor ha inviato i propri messaggi COVID-19 utilizzando un modello in stile lettera. Questo è un modo più personale e diretto di comunicare con i clienti, offrendo informazioni importanti senza la distrazione delle immagini o la possibilità di essere scambiati per un'e-mail di marketing.

Caratteri utilizzati : Arial.

La tipografia grande e audace mette in evidenza il messaggio generale dell'e-mail, mentre i titoli disegnati per distinguersi dai blocchi del corpo del testo dividono il contenuto fornendo punti di ancoraggio al lettore per comprendere il valore di una sezione.

Questa e-mail altamente scansionabile ha anche un'ampia spaziatura a sinistra e a destra del contenitore principale, che è un'ottima tecnica per impedire a grandi blocchi di copia di sopraffare il lettore.

Tattly

Il rivenditore di tatuaggi temporanei Tattly ha un approccio molto creativo al design delle e-mail, con e-mail promozionali che spesso sfruttano tecniche e tendenze di design entusiasmanti. Usano la tipografia in grassetto nell'eroe di questa e-mail per attirare l'attenzione sui nuovi prodotti presenti all'interno dell'e-mail.

Caratteri utilizzati : Open Sans (carattere web), che ricorre a Helvetica e Arial.

È comune con le e-mail altamente progettate, come questa, che la tipografia sia basata sull'immagine, piuttosto che sul testo live.

Ci sono una serie di considerazioni sull'accessibilità che devono essere fatte quando si usano immagini per il testo, come l'applicazione di testo ALT che fa eco alla copia e tenendo conto di come apparirà il testo per le persone che hanno bisogno di ingrandire l'e-mail a causa di una visuale menomazione. Il testo si pixelerà e diventerà illeggibile? Inoltre, quanto è leggibile il testo basato su immagini quando l'e-mail si ridimensiona sui dispositivi mobili?

Sebbene il testo live sia il modo migliore per mantenere le tue e-mail accessibili e leggibili, c'è un modo per rendere preziose le aree degli eroi basate su immagini per un pubblico più ampio, avvolgendo la tua immagine dell'eroe in un tag H1 e aggiungendo il testo dell'immagine al tuo tag ALT, come questo:

<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>

Questo approccio rende l'e-mail scansionabile per gli abbonati che dipendono dagli screen reader, poiché sono in grado di utilizzare la funzionalità di scelta rapida per navigare tra i titoli.

“Il wrapping di un'immagine all'interno di un tag H1 è un codice semantico valido e sarà incluso nei menu di scelta rapida delle intestazioni dello screen reader. Tuttavia, è importante notare che il testo ALT potrebbe non essere letto da tutti gli strumenti di lettura del testo. – Mark Robbins, Software Engineer, Salesforce

La tipografia delle e-mail è un pugno

Con il numero in rapida crescita di messaggi in competizione per attirare l'attenzione dei tuoi iscritti, l'onere di distinguersi e di fornire comunque un'esperienza affidabile, veloce, continua a diventare più pesante. La tipografia è un ottimo modo per rendere le tue e-mail belle, efficaci e accessibili senza rallentarti.

Tieni a mente questa guida e condividi come usi la tipografia nelle tue e-mail. mi piacerebbe vederli!

Crea e-mail senza errori sul marchio, con Litmus Niente più email rotte. Crea e testa le tue e-mail con Litmus per garantire un'ottima esperienza per gli abbonati in ogni casella di posta. Inizia la tua prova gratuita