E-posttypografi: 8 bästa teckensnitt för e-post (och anpassade teckensnittsidéer för e-post)

De flesta företag med säkra följare har fullt ut omfamnat allt e-postmarknadsföring har att erbjuda vid denna tidpunkt. Nyhetsbrev via e-post, Autosvar, osv. E-postmarknadsföring har varit ett konsekvent sätt att hålla fingret på pulsen på din kunds behov samtidigt som du marknadsför alla de senaste produkterna eller tjänsterna du har att erbjuda.

Det faktum att du kan nå kunder långt efter att de har lämnat din webbplats är så kraftfullt. Men alla gamla e-postmeddelanden duar bara inte. Hur du presenterar ditt e-postinnehåll är en viktig del av att fånga uppmärksamhet och uppmuntra kunder att faktiskt läsa dina e-postmeddelanden snarare än att ta bort dem direkt.

Design spelar en avgörande roll här. Men sannolikt är en av de viktigaste aspekterna att ta hand om din alternativ för teckensnitt. E-postsäkra teckensnitt gör det lättare för kunder att läsa vad du har att säga, vilket innebär att du är mer benägen att få den konverteringen.

Det är vad vi kommer att diskutera här idag.

Vad är e-postsäkra teckensnitt?

Det är frestande att använda snygga teckensnitt för dina e-postmeddelanden. När allt kommer runt vill du göra ett positivt intryck. Och du vill få ditt innehåll att sticka ut. Speciella teckensnitt visas dock inte alltid korrekt i alla e-postklienter. Faktum är att om ett teckensnitt inte stöds kan en e-postklient sluta använda ett reservteckensnitt som i bästa fall kan förstöra din avsedda ton eller dölja läsbarheten för ditt innehåll i värsta fall.

Det är därför det rekommenderas starkt att du håller dig till e-postsäkra teckensnitt endast när du skapar e-postmarknadsföringsinnehåll. Vi kommer till detaljerna om ett ögonblick. Men först, låt oss kort diskutera hur bra teckensnittsval faktiskt kan göra en enorm inverkan på din Omvandlingsfrekvens.

Hur bra teckensnitt ökar konverteringar

De flesta spenderar bara 11 sekunder på e-post. Det betyder att alla teckensnitt du väljer måste vara läsbara och skanningsbara. De måste erbjuda den ”i korthet” bekvämligheten. Ofta innebär detta att förlita sig på standardteckensnitt som alla redan är bekanta med. Låter det tråkigt? Alternativet är sämre. Faktum är att människor tar dubbelt så lång på sig för att läsa snygga teckensnitt. Och om folk bara spenderar 11 sekunder på ett e-postmeddelande, är det massor av tid som slösas bort.

 

Det är dock inte bara teckensnittet du väljer som påverkar konverteringarna. Storleken på teckensnittet du väljer spelar också roll. Enligt forskning som utförts av Click Laboratory, något öka en teckensnittsstorlek kan ha en enorm inverkan på din konverteringsfrekvens.

Forskningen omfattade att öka ett textblock som är inställt på Arial-teckensnitt från 10pt till 13pt. Mer utrymme lades också till mellan textraderna. Den 13pt versionen av teckensnittet presterade så mycket bättre eftersom innehållet nu var lättare att läsa för ögonen.

Denna lilla förändring minskade avvisningsfrekvens med 10% och ökade konverteringsfrekvensen med hela 133%! Allt på grund av att du förstorar upp teckensnittets storlek med två punkter!

Det finns en psykologi i dina teckensnittsval också. Detta gäller logotyper mestadels men det skulle löna sig att hålla denna information i åtanke eftersom du väljer e-postteckensnitt också. Vissa typer av teckensnitt har vissa ”känslor” associerade med dem. Enligt Crazy Egg, de fem viktigaste teckensnittstyperna framkallar olika känslor eller associationer:

Serif Teckensnitt

Exempel är Times New Roman, Baskerville och Georgia. Serif-teckensnitt utstrålar en känsla av respektabilitet, tillförlitlighet och tradition. Äldre märken (eller de som vill verka som om de har funnits i årtionden) använder sig av den här typen av teckensnitt för att ingjuta förtroende. Den Tiffany & Co logotypen fungerar som ett gediget exempel.

Vogue också:

Sans Serif Teckensnitt

Exempel är Helvetica, Calibri och Franklin Gothic. Sans serif teckensnitt ger bort ett modernt utseende som är rent och enkelt. Dessa teckensnitt ger intryck av tillförlitlighet och stabilitet. Sans serif-teckensnitt är mer likt ett företags-utseende. Netflix har ett sans serif-teckensnitt:

Moderna teckensnitt

Exempel är Futura och Century Gothic. Moderna teckensnitt kan verka snygga, eleganta eller ge en övergripande känsla av styrka. Hulus logotyp är ett populärt exempel på en som använder en modernt teckensnitt:

Teckensnitt för skript

Exempel är Edwardian Script och Bickham Script. Skriptteckensnitt kommer sannolikt inte att vara ett klokt val för användning i dina e-postmeddelanden. De gör dock en inverkan när de används i logotyper och det kan fungera för grafiska element. Coca-Cola är ett tidlöst exempel på ett skriptteckensnitt som används väl:

Visa teckensnitt

Exempel är Cooper och Valencia. Ord och känslor som ofta förknippas med visa teckensnitt inkluderar en känsla av individualitet eller unikhet, vänlighet eller uttrycksfullhet. För logotyper (och eventuellt rubriker) kan visningsteckensnitt göra verklig inverkan och sticka ut. Disney erbjuder en av de mest kända logotyperna i världen, och den har ett visningsteckensnitt:

Med den här informationen i åtanke kan vi nu gå vidare till hur du kan välja det bästa teckensnittet för e-postmeddelanden.

E-posttypografi: Hur man väljer de bästa teckensnitten

Du känner nu till de fem grundläggande typerna av teckensnitt som är tillgängliga (andra än symboler, antar jag). Och du vet att olika teckensnittstyper skapar olika känslor hos dina kunder. Men hur kan kunskapen om vilken typ av typsnitt Coca-Cola använder användas för att välja rätt teckensnitt för dina nyhetsbrev?

Vi dyker in.

Alla teckensnitt som du väljer att använda i företagets e-postmeddelanden måste innehålla följande 4 egenskaper:

Kvalitet #1: Läsbarhet

Vi har redan nämnt denna kvalitet men det tål att upprepas eftersom det är det överlägset viktigaste. Om ditt teckensnitt inte är läsbart kommer ingen att kunna läsa dina e-postmeddelanden. Och om de inte kan läsas, kan du verkligen inte förvänta dig konverteringar, nu kan du?

Kvalitet #2: Tydlighet

Rena, skarpa teckensnitt med exakta linjer är det som kommer att fungera bäst i din e-postkopia. Inget med blomstring eller slingrande. Och absolut ingenting med supertunna och lätta linjer. Större teckenstorlekar gör också bättre ifrån sig. Gör ditt teckensnitt till en pt eller två större storlekar än du vanligtvis skulle göra, se till att teckenvikten är anständig (men inte fet) och sikta på ett radavstånd på 1,15.

Kvalitets#3: Psykologiskt lämplig

Som nämnts ovan har vissa teckensnittstyper specifika känslor associerade med dem. Se till att teckensnitten du väljer passar in i det övergripande humöret du försöker förmedla med ditt innehåll och syftet med ditt innehåll. Att verka pålitlig eller som en myndighetsfigur kan vara fördelaktigt om du försöker sälja något, till exempel.

Kvalitet #4: Varumärkes Lämpligt

På samma sätt bör alla teckensnitt du väljer vara logiska för användning för din bransch eller nisch. Om ditt företag har en gammaldags känsla skulle det inte vara lämpligt att använda ett supermodernt teckensnitt eller visningsstil. På samma sätt, om du driver ett teknikbaserat företag, skulle något rustikt eller formellt förmodligen inte heller göra den bästa passformen. Allt handlar om vad som känns rätt.

8 bästa teckensnitt för e-post

Vi har definierat e-postsäkra teckensnitt. Vi har också pratat om hur du kan begränsa ditt teckensnittsval. Men nu är det dags att komma till detaljerna om vilka teckensnitt som faktiskt är e-postsäkra och hur man tänker utanför lådan utan att offra läsbarhet eller skada din konverteringsfrekvens.

De grundläggande e-postsäkra teckensnitten

Det finns en grundläggande uppsättning läsbara (om än tråkiga) e-postsäkra teckensnitt som de flesta e-postklienter kan känna igen. Låt oss ta en titt på var och en av dem nu.

Arial

Arial är ett mycket vanligt typsnitt. Det skapades ursprungligen 1982 av Patricia Saunders och Robin Nicholas från Monotype Imaging. Även om det ursprungligen var utformat för användning i en IBM-laserskrivare, har det sedan dess blivit en webbinnehållsfavorit.

Verdana

Verdana är ett teckensnitt som har utformats med skärmvisningar i åtanke. Det utvecklades av Matthew Carter och har breda karaktärer och stort avstånd mellan varje karaktär för att förbättra läsbarheten på skärmen. Det är ett annat häftklammerval som stöds av de flesta e-postklienter.

Helvetica

Och sen har vi Helvetica, ett av de mest populära teckensnitten som för närvarande finns. Det är läsbart, lätt att titta på och stöds av de flesta ordbehandlingsprogram, e-postklienter och webbläsare.

Georgia

Georgia är ett annat vanligt typsnitt för att hitta stöd i e-postklienter. Den är till sin natur läsbar, har stora bokstäver och använder karaktärsdesign som gör varje bokstav distinkt för att förhindra förvirring. Det finns också en bra avvikelse mellan vanliga och djärva vikter som gör det användbart för extra betoning.

Tahoma

Tahoma är ett annat alternativ som stöds av de flesta e-postklienter. Det är en av de mest populära sans serif-teckensnittsfamiljerna på Windows-operativsystem. Det skapades med skärmvisning i åtanke, med tydlighet och läsbarhet uppnåelig vid ännu mindre teckenstorlekar. Det skapades ursprungligen av Matthew Carter.

Lucida

Eller så kan du använda Lucida, en annan sans-teckensnittsfamilj som prioriterar rena linjer, ett tydligt format och distinkta bokstavsformulär. Bokstavsavståndet är bredare än standard och varje tecken är också lite högre och lägger till fler läsbarhetselement.

Trebuchet

Trebuchet är ett annat alternativ som du enkelt kan använda i dina e-postdesigner. Den skapades av Vincent Connare 1996 och är ett sans serif-teckensnitt. Den är utformad för skärmläsning och har större linjehöjder, rundade kanter och bredare teckenavstånd.

Times New Roman

Slutligen finns det Times New Roman, ett teckensnitt som verkligen inte behöver mycket av en introduktion. Det har ett traditionellt utseende och används ofta som standardteckensnittsval i ordbehandlingsprogram. Det är läsbart på skärmen och i tryck.

Din e-postklient kan ha tillgång till andra teckensnitt, men ovanstående är de mest läsbara och mest erkända.

Anpassade e-postteckensnitt

Om de grundläggande teckensnittsalternativen inte tilltalar dig finns det ett annat alternativ. Du kan använda HTML-teckensnitt istället för att skapa ett mer anpassat utseende. Det är dock viktigt att notera att inte alla e-postmarknadsföring stjänster kan eller kommer att visa webbteckensnitt Korrekt.

Men först, låt oss pausa för att diskutera hur webbteckensnitt fungerar.

Så här fungerar webbteckensnitt

Webbteckensnitt finns, som namnet antyder, endast på webben. De ingår inte i operativsystem, enheter, appar eller programvara. De finns online och kan sedan läggas till i dina projekt via kodfragment, plugins och andra medel. Oftast hittar du webbteckensnitt som används på webbplatser. Flera e-postklienter stöder för närvarande användningen av webbteckensnitt, inklusive:

• Android-e-post
• Apple-post
• iOS-e-post
• Outlook 2000
• Outlook.com App
• Thunderbird

Webbteckensnitt stöds dock inte för alla dessa e-postklienter på samma sätt. Vissa kräver bara en länk, medan andra kräver ett kodfragment som importerar webbteckensnittet. Mer om det på ett ögonblick. Det är först viktigt att erkänna att även om en e-postklient inte stöder ditt webbteckensnitt (eller dess inkluderingsmetod), kommer ditt innehåll inte nödvändigtvis att se hemskt ut.

De flesta e-postklienter har ett reservalternativ. Det vill säga om webbteckensnittet som ingår i din e-post inte laddas korrekt, kommer e-postklienten att servera ett reservteckensnitt istället. Det är vanligtvis ett av de generiska alternativen som vi listade ovan, men det bra här är a) ditt innehåll kommer fortfarande att vara läsbart, b) ditt innehåll kommer inte att se hälften dåligt ut eftersom standardteckensnitten blev standard av skäl (de är vanliga ol’ lätta att läsa), och c) du kan ofta välja vilket teckensnitt du vill använda som din reserv.

För att ge dig en uppfattning om vad vi menar, Gmails standardteckensnitt är Arial medan Apple Mail använder Helvetica. I Outlook används Calibri medan iOS används San Francisco (ett teckensnitt som Apple skapade specifikt för sina enheter som var starkt inspirerat av Helvetica Neue.

Om du bestämmer dig för att använda webbteckensnitt bör du testa det på olika plattformar innan du startar.

Några e-postmarknadsföringstjänster innehåller redan stöd för webbteckensnitt. Kampanjövervakare innehåller till exempel flera alternativ för webbteckensnitt i sin dra-och-släpp-e-postbyggare och reservalternativ ställs automatiskt in för dig med minimalt krångel.

Om din e-postmarknadsföringsplattform inte innehåller support för webbteckensnitt internt är det troligt att du kan lägga till den via kod.

Det finns flera kodfragment som du kan använda för att bädda in webbteckensnitt i HTML-e-postmeddelanden.

<länk>

Att använda <link> för att lägga till webbteckensnitt i dina e-postmeddelanden är ett populärt val. Alla webbteckensnitt du väljer definierar Url till dig. Så om du är hosting för teckensnittet själv ändrar du det till teckensnittsadressen på webbplatsen. Om teckensnittet är hosting för webbteckensnittsförsäljaren använder du url de anger.

Du placerar kodfragmentet i avsnittet <head> i e-postmeddelandets kod. Det borde visas i början. Den här metoden stöds av de flesta e-postklienter och laddas ganska snabbt. Du kan dock stöta på vissa problem om webbteckensnittsfilen är på den större sidan.

Så om du får ditt webbteckensnitt från Google-teckensnitt visas följande när du har valt teckensnittsformat och valt länken som önskad inbäddningsmetod:

@import

Ett annat sätt att lägga till webbteckensnitt i e-postmeddelanden är att @import. Den här är superenkel och fungerar bra på de flesta e-postklienter också. Dock inte på några äldre versioner av Android.

Precis som med <link> kodfragmentet infogar du @import i avsnittet <head> i din e-post också. Återigen, i Google Fonts, är detta vad du ser efter att ha valt ett teckensnitt, dess stilar och klicka på bubblan bredvid @import:

Om du använder en annan webbteckensnittstjänst kanske du inte får en inbäddningskod som den här, och i stället måste du skriva ut kodavsnittet själv. Använd Url din webbteckensnittstjänst ger dig, eller om du väljer att vara hosting för teckensnittet själv, använd lämplig länk på servern.

@font ansikte

Den här regeln gör det så att du kan ladda ned ett teckensnitt från en server eller vara hosting för dem så att de kan användas på en webbplats, eller i det här fallet i dina e-postmeddelanden. Det fungerar på ett liknande sätt som de tidigare två metoderna genom att det laddar ner teckensnitt i farten så att de kan användas av din webbplats eller dina e-postmeddelanden. Som med alla andra metoder som diskuteras här klistrar du in det här kodavsnittet i avsnittet <head> i e-postmeddelandets HTML.

Så, enligt Mozilla, om du skulle lägga till teckensnittet Öppna Sans i dina e-postmeddelanden, skulle du använda följande kodfragment:

@font-face{

font-family:"Open Sans";

src:url("/fonts/OpenSans-Regular-webfont.woff2")format("woff2"),

url("/fonts/OpenSans-Regular-webfont.woff")format("woff");

}

Ange alternativ för webbteckensnitt

Även om du alltid vill att webbteckensnittet som du noggrant har valt ska fungera, kommer det inte alltid att vara fallet. Oavsett om det beror på serverfel eller systemkompatibilitet är det en bra idé att inte lämna reservalternativet valt för slumpen. Så med @font ansikte igen kan du faktiskt ange vilket lokalt teckensnitt du vill ska användas om ditt önskade webbteckensnitt inte kan laddas ner.

Vi kan använda samma Kodstycke referens ovan och bara ändra det så att det innehåller ett alternativ för reservteckensnitt:

@font-face{

font-family:"Open Sans";

src:url("/fonts/OpenSans-Regular-webfont.woff2")format("woff2"),

url("/fonts/OpenSans-Regular-webfont.woff")format("woff");

local("Helvetica")

}

Här hittar du webbteckensnitt att använda i dina e-postmeddelanden

Det finns flera platser online där du kan källa webbteckensnitt. Tänk bara på eventuella licenskrav de har. Varje webbplats kan ha olika specifikationer som du måste följa, så kom ihåg det.

• Google-teckensnitt: Detta är en av de mest populära platserna att hitta webbteckensnitt för närvarande, som erbjuder ett open source-bibliotek med teckensnitt att använda var som helst när som helst. Den har för närvarande 1 020 teckensnittsfamiljer.
• Fonts.com: Detta är en annan fantastisk resurs för teckensnitt av alla slag, från skrivbord till webbteckensnitt. Det är faktiskt Monotype-butiken och har över 150 000 teckensnitt att bläddra igenom och kanske köpa.
• Typography.com: Detta är skyltfönstret för H&Co, ett gjuteri som innehåller 1 500 typsnitt som kan användas på webben och för utskrift.
• Font Squirrel: Om du letar efter ett helt gratis urval kan Font Squirrel passa räkningen. Denna webbplats har endast gratis teckensnitt som kan användas för kommersiella ändamål.
• Adobe Fonts: Tidigare känd som Typekit, Adobe Fonts innehåller tusentals teckensnitt att välja mellan, som alla är tillgängliga med en Creative Cloud Prenumeration.
• Fontspring: Även om du måste köpa webbteckensnitten som listas på Fontspring, är de tillgängliga utan prenumeration och innehåller vanligtvis obegränsade licenser för extra bekvämlighet.
• MyFonts: Detta är ett annat Monotype-ägt företag, med listor för massor av teckensnitt för både tryck och webb.
• Village: Detta är faktiskt ett kollektiv av flera gjuterier som alla gick ihop för att sälja sina teckensnitt självständigt.
• Process Type Foundry: Detta är ett litet företag som grundades 2002 av två typdesigners och de säljer de teckensnitt de gör till allmänheten.
• FontShop: Slutligen finns det FontShop, en annan Monotype-butik och plats att bläddra och köpa webbteckensnitt.

Högkvalitativa, läsbara webbteckensnitt

Om du behöver lite inspiration är följande alla exempel på webbteckensnitt som är lättlästa och kan läggas till i dina e-postmeddelanden med hjälp av de metoder som beskrivs ovan.

Open Sans

Open Sans är ett mycket läsbart sans serif-teckensnitt som är idealiskt för läsning på skärmen. Den designades av Steve Matteson och har öppna former. Alla bokstäver är lätta att läsa och ser bra ut i alla storlekar också.

Roboto

Roboto är ett annat högkvalitativt webbteckensnitt som ser bra ut på skärmar. Den har en geometrisk design med öppna kurvor, vilket skapar en tilltalande dikotomi som bara fungerar. Varje bokstav bibehåller en naturlig bredd och motstår den typiska styvheten hos groteskteckensnitt.

Raleway

Eller så kan du välja Raleway, ett annat sans serif-teckensnitt som erbjuder tunnare linjer och ett mer elegant utseende. Typsnittsfamiljen designades ursprungligen av Matt McInerney, och utökades senare av Pablo Impallari och Rodrigo Fuenzalida.

Century Gothic

Century Gothic är ett webbteckensnitt som erbjuder ett klassiskt utseende. Och det är vettigt att detta är fallet eftersom det faktiskt är en moderniserad version av äldre teckensnitt från 1920- och 30-talet. Den har ett brett stöd för Webbläsare och kan läsas på skärmar.

Proxima Nova

Proxima Nova är ett annat webbteckensnittsalternativ som faktiskt är en omgjord version av Proxima Sans-teckensnittet, som först skapades 1994. Teckensnittet är något geometriskt men naturligt också och skulle göra ett utmärkt urval för att användas i e-post.

Quasimoda

Quasimoda är ett elegant webbteckensnitt som är lätt för ögonen och universellt i sin överklagande. Det skapades av Lettersoup, ett typgjuteri baserat i Berlin, Tyskland som startades av Botio Nikoltchev 2014.

PT Sans Pro

PT Sans Pro kan vara precis vad du letar efter i ett webbteckensnitt. Här erbjuds rundade brevformulär och ett naturligt utseende. Det designades av Paratype, ett digitalt teckensnittsföretag som fick sin start på 1980-talet.

Brandon Grotesque

Brandon Grotesque är ett webbteckensnitt som skapades av HVD-teckensnitt. HVD grundades av Hannes von Döhren och företaget fokuserar på att skapa lättlästa, professionella men snygga typsnitt som fungerar för ett antal applikationer.

Sofia Pro

Sofia Pro är ett sans serif-teckensnitt som designades av Mostardesign 2008. Det upprätthåller en känsla av modernitet samtidigt som det inkluderar rundade former. Det utstrålar en stabil balans mellan harmoniska mönster och geometriska.

Museo Sans

Slutligen finns det Museo Sans, som är en nyare font. Den har en geometrisk sans serif-design som kan användas i både rubriker och kopieringstext. Det är läsbart och mångsidigt, vilket gör det till en arbetshäst för e-postmeddelanden. Den designades av Exljbris 2008.

En anteckning om hur du använder bilder i e-post kontra text

Om du bäddar in en Bild till exempel i en affisch eller till och med en skärmdump av text skriven i ett vackert teckensnitt, kan det vara ett sätt att komma runt problemet med e-postsäkra teckensnitt. Detta kommer med sina egna problem men eftersom bilder i e-postmeddelanden inte alltid visas, eller kanske inte visas korrekt på vissa skärmar. Det finns också frågan om skärmläsare, som, om du inte inkluderar alternativ text, inte vet vad bilden säger.

Var försiktig när du använder bilder i e-postmeddelanden och använd dem bara för att förbättra innehållet i ditt meddelande, inte för att leverera viktig information. Så om du ville tillkännage en särskild försäljning på din webbplats, inkludera inte bara en bild av din försäljningsaffisch med produktinformationen som listas på den.

Du måste åtminstone inkludera bildens text som oformaterad text också. Ännu bättre, undvik detta helt och hållet och använd bara e-postsäker text och spara bilderna för tillfälligt visuellt intresse.

Det enda textbaserade undantag jag kan komma på som skulle göra användningen av text-som-bild lämplig är en logotyp, där företagets eller varumärkets namn redan är en självklarhet.

Sammanfattning

Inte vilket teckensnitt som helst kommer att vara perfekt när du skickar e-postmeddelanden till prospekt och kunder. Faktum är att om du inte väljer ett bra teckensnitt kan det skada konverteringsfrekvensen avsevärt. Så de teckensnitt du väljer måste vara e-postsäkra, göra ett bra intryck och erbjuda utmärkt läsbarhet.

I den här artikeln granskade vi de viktigaste typerna av teckensnitt där ute och den psykologiska inverkan de kan ha. Vi visade exempel på teckensnitt som de flesta e-postklienter stöder. Vi pratade också om webbteckensnitt, hur du kan lägga till dem på din webbplats, samt erbjöd resurser och exempel på webbteckensnitt som du kan använda för att komma igång.

Förhoppningsvis har du nu en bättre uppfattning om effekten av e-postsäkra teckensnitt. Och med den här guiden i handen kan du göra välgrundade val när du närmar dig din nästa e-postkampanj.