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

De flesta företag som har en solid publik har vid det här laget anammat allt som e-postmarknadsföring har att erbjuda. Nyhetsbrev via e-post, autosvar, du kan nämna det. E-postmarknadsföring har varit ett konsekvent sätt att hålla fingret på pulsen för dina kunders behov och samtidigt marknadsföra alla de senaste produkterna eller tjänsterna du har att erbjuda.

Det faktum att du kan nå kunderna långt efter att de har lämnat din webbplats är så kraftfullt. Men vilket gammalt e-postmeddelande som helst duger inte. Hur du presenterar ditt e-postinnehåll är en viktig del för att fånga uppmärksamhet och uppmuntra kunderna att faktiskt läsa dina e-postmeddelanden i stället för att radera dem vid första ögonkastet.

Design spelar en avgörande roll här. Men en av de viktigaste aspekterna att ta hänsyn till är troligen valet av typsnitt. Email-säkra typsnitt gör det lättare för kunderna att läsa vad du har att säga, vilket innebär att du har större chans att få den där konverteringen.

Det är vad vi ska diskutera här i dag.

Vad är email-säkra typsnitt?

Det är frestande att använda tjusiga typsnitt för dina e-postmeddelanden. Du vill ju trots allt göra ett positivt intryck. Och du vill få ditt innehåll att sticka ut. Speciella typsnitt visas dock inte alltid korrekt i alla e-postklienter. Om ett typsnitt inte stöds kan en e-postklient till slut använda ett reservtypsnitt som i bästa fall kan förstöra den avsedda tonen eller i värsta fall göra innehållet svårläsligt.

Det är därför det rekommenderas starkt att du håller dig till säkra typsnitt för e-post när du skapar innehåll för e-postmarknadsföring. Vi går in på detaljerna om en stund. Men först ska vi kort diskutera hur bra typsnittsval faktiskt kan ha stor inverkan på din konverteringsgrad.

Hur du presenterar dina e-postmeddelanden kan göra skillnaden mellan att din målgrupp läser dem… och skickar dem direkt till papperskorgen. 😬 🗑 Lär dig mer om e-postsäkra typsnitt och varför du behöver dem ⬇️Click to Tweet

Hur bra typsnitt ökar konverteringen

De flesta människor spenderar bara 11 sekunder på e-post. Det innebär att alla typsnitt du väljer måste vara läsbara och lätt att scanna. De måste erbjuda den där bekvämligheten ”på ett ögonblick”. Ofta innebär detta att man förlitar sig på standardtypsnitt som alla redan är bekanta med. Låter det tråkigt? Alternativet är värre. Faktum är att människor tar dubbelt så lång tid på sig att läsa tjusiga typsnitt. Och om folk bara spenderar 11 sekunder på ett e-postmeddelande är det mycket tid som går till spillo.

Det är dock inte bara typsnittet du väljer som har en inverkan på konverteringarna. Storleken på det typsnitt du väljer har också betydelse. Faktum är att enligt forskning utförd av Click Laboratory kan en liten ökning av ett teckensnitts storlek ha en enorm inverkan på din konverteringsgrad.

Undersökningen innebar att ett textblock inställt på teckensnittet Arial ökades från 10pt till 13pt. Mer utrymme lades också till mellan textraderna. Den 13pt-versionen av teckensnittet fungerade mycket bättre eftersom innehållet nu var lättare för ögonen och mer lättläst.

Denna lilla förändring minskade avvisningsfrekvensen med 10 % och ökade konverteringsfrekvensen med hela 133 %! Allt på grund av att man ökade teckensnittsstorleken med två punkter!

Det finns också en psykologi i dina teckensnittsval. Detta gäller främst logotyper, men det lönar sig att ha den här informationen i åtanke när du väljer typsnitt för e-post också. Vissa typer av typsnitt har vissa ”känslor” förknippade med dem. According to Crazy Egg, the five main font types elicit different emotions or associations:

Serif Fonts

Examples include Times New Roman, Baskerville, and Georgia. Serif fonts exude a sense of respectability, reliability, and tradition. Older brands (or those that want to appear as though they’ve been around for decades) make solid use of these sorts of fonts to instill confidence. The Tiffany & Co logo serves as a solid example.

Vogue, too:

Sans Serif Fonts

Examples include Helvetica, Calibri, and Franklin Gothic. Sans serif fonts give off a modern look that’s clean, simple, and straightforward. These fonts give off the impression of reliability and stability. Sans serif fonts are very corporate-looking. Netflix features a sans serif font:

Modern Fonts

Examples include Futura and Century Gothic. Modern fonts can appear stylish, chic, or give an overall sense of strength. Hulu’s logo is a popular example of one using a modern font:

Script Fonts

Examples include Edwardian Script and Bickham Script. Script fonts will likely not be a wise choice for use in your emails. However, they do make an impact when used in logos and that could work for graphical elements. Coca-Cola is a timeless example of a script font used well:

Display Fonts

Examples include Cooper and Valencia. Words and feelings commonly associated with display fonts include a sense of individuality or uniqueness, friendliness, or expressiveness. För logotyper (och eventuellt rubriker) kan displayteckensnitt ge ett verkligt genomslag och sticka ut. Disney erbjuder en av de mest kända logotyperna i världen, och den har ett displayteckensnitt:

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.

Typografi för e-post: Du känner nu till de fem grundläggande typerna av teckensnitt som finns tillgängliga (förutom symboler, antar jag). Och du vet att olika typsnittstyper skapar olika känslor hos dina kunder. Men hur kan kunskapen om vilken typ av typsnitt som Coca-Cola använder sig av översättas till att välja rätt typsnitt för dina nyhetsbrev via e-post?

Låt oss dyka in.

Varje typsnitt som du väljer att använda i dina företags e-postmeddelanden måste innehålla följande 4 kvaliteter:

Kvalitet nr 1: Läsbarhet

Vi har redan nämnt den här egenskapen, men den tål att upprepas eftersom den är den i särklass viktigaste. Om ditt typsnitt 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, eller hur?

Kvalitet nr 2: Tydlighet

Snygga, skarpa typsnitt med exakta linjer är det som kommer att fungera bäst i din e-posttext. Ingenting med floskler eller snirklingar. Och absolut ingenting med supertunna eller lätta linjer. Större typsnittsstorlekar gör sig också bättre. Gör ditt typsnitt en pt eller två större än vad du vanligtvis skulle göra, se till att typsnittsvikten är anständig (men inte fet) och sikta på ett radavstånd på 1,15.

Kvalitet nr 3: Psykologiskt lämpligt

Som nämnts ovan har vissa teckensnittstyper specifika känslor förknippade med dem. Se till att typsnittet/typsnitten du väljer passar den övergripande stämning du försöker förmedla med ditt innehåll samt syftet med ditt innehåll. Att framstå som pålitlig eller som en auktoritetsperson kan till exempel vara fördelaktigt om du försöker sälja något.

Kvalitet #4: Märkesanpassat

På samma sätt bör alla typsnitt du väljer vara logiskt meningsfulla att använda 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 typsnitt eller ett typsnitt i displaystil. Om du driver ett teknikbaserat företag skulle något rustikt eller formellt typsnitt förmodligen inte heller passa bäst. Allt handlar om vad som känns rätt.

8 bästa typsnitt för e-post

Vi har definierat typsnitt som är säkra för e-post. Vi har också talat om hur du kan begränsa ditt val av typsnitt. Men nu är det dags att gå in på detaljerna kring vilka typsnitt som faktiskt är e-postsäkra och hur du kan tänka utanför boxen utan att offra läsbarheten eller skada din konverteringsgrad.

De grundläggande e-postsäkra typsnitten

Det finns en grunduppsättning av läsbara (om än tråkiga) e-postsäkra typsnitt som de flesta e-postklienter kan känna igen. Let’s take a look at each of those now.

Arial

Arial is a very commonly used typeface. It was originally created in 1982 by Patricia Saunders and Robin Nicholas of Monotype Imaging. Though originally designed for use in an IBM laser printer, it has since become a web content favorite.

Verdana

Verdana is a font that was designed with screen displays in mind. It was developed by Matthew Carter and features wide characters and large spacing between each character to improve on-screen legibility. It’s another staple choice supported by most email clients.

Helvetica

And then there’s Helvetica, one of the most popular fonts currently in existence. Det är läsbart, lätt att se och stöds av de flesta ordbehandlingsprogram, e-postklienter och webbläsare.

Georgia

Georgia är ett annat vanligt typsnitt som stöds i e-postklienter. Det är lättläst, har stora bokstavsavstånd och använder tecken som gör varje bokstav distinkt för att förhindra förvirring. Det finns också en bra variation mellan vanlig och fet vikt 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 seriffria typsnittsfamiljerna i Windows-operativsystem. Det skapades med tanke på visning på skärmen, med klarhet och läsbarhet som går att uppnå även vid mindre typsnittsstorlekar. It was originally created by Matthew Carter.

Lucida

Or, you could use Lucida, another sans font family that prioritizes clean lines, a clear style, and distinct letterforms. Letter spacing is wider than standard and each character is a bit taller as well, adding more elements of legibility.

Trebuchet

Trebuchet is another option available that you could easily use in your email designs. It was created by Vincent Connare in 1996 and is a sans serif font. It was designed for screen reading and features larger line-heights, rounded edges, and wider character spacing.

Times New Roman

Lastly, there’s Times New Roman, a font that really doesn’t need much of an introduction. Det har ett traditionellt utseende och används ofta som standardtypsnitt i ordbehandlingsprogram. Det är läsbart på skärmen och i tryck.

Din e-postklient kan ha tillgång till andra typsnitt, men de ovan nämnda är de mest läsbara och de mest kända.

Så, enligt Mozilla, om du skulle lägga till typsnittet Open Sans i dina e-postmeddelanden skulle du använda följande kodutdrag:

@font-face{font-family:"Open Sans";src:url("/fonts/OpenSans-Regular-webfont.woff2")format("woff2"),url("/fonts/OpenSans-Regular-webfont.woff")format("woff");}

Specificering av webbtypsnittsalternativ

Som du alltid vill att webbtypsnittet som du har valt ut med omsorg 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 det valda reservalternativet åt slumpen. Så genom att använda @font-face igen kan du faktiskt ange vilket lokalt typsnitt du vill ska användas om ditt föredragna webbtypsnitt inte kan laddas ner.

Vi kan använda samma kodutdrag som refereras ovan och bara ändra det för att inkludera ett alternativ för reservtypsnitt:

@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")}

Hur du kan hitta webbtypsnitt som du kan använda i dina e-postmeddelanden

Det finns flera ställen online där du kan hitta webbtypsnitt. Var bara uppmärksam på eventuella licenskrav som de har. Varje webbplats kan ha olika specifikationer som du måste följa, så tänk på det.

• Google Fonts: Detta är en av de mest populära platserna för att hitta webbtypsnitt för närvarande och erbjuder ett bibliotek med öppen källkod av typsnitt som du kan använda var som helst och när som helst. Här finns för närvarande 1 020 typsnittsfamiljer.
• Fonts.com: Detta är en annan fantastisk resurs för typsnitt av alla slag, från skrivbords- till webbtypsnitt. Det är faktiskt Monotypes butik och har över 150 000 typsnitt att bläddra bland och kanske köpa.
• Typography.com: Det här är butiksdelen för H&Co, ett gjuteri som innehåller 1 500 typsnitt som kan användas på webben och för tryck.
• Font Squirrel: Det här är ett exempel på ett stort antal typsnitt som kan användas på webben och för tryck: Om du letar efter ett helt gratis urval kan Font Squirrel passa bra. Den här webbplatsen innehåller endast gratis typsnitt som kan användas i kommersiellt syfte.
• Adobe Fonts: Adobe Fonts, tidigare känt som Typekit, innehåller tusentals teckensnitt att välja mellan, som alla är tillgängliga med en Creative Cloud-prenumeration.
• Fontspring: Du måste visserligen köpa de webbtypsnitt som finns på Fontspring, men de är tillgängliga utan prenumeration och inkluderar vanligtvis obegränsade licenser för ökad bekvämlighet.
• MyFonts: MyFonts: Detta är ett annat företag som ägs av Monotype, med listor över massor av typsnitt för både tryck och webb.
• Village: Det här är faktiskt ett kollektiv av flera fonter som alla gått samman för att sälja sina typsnitt oberoende.
• Process Type Foundry: Detta är ett litet företag som grundades 2002 av två typsnittsdesigners och de säljer de typsnitt som de tillverkar till allmänheten.
• FontShop: Slutligen finns FontShop, en annan Monotype-butik och ett ställe där man kan bläddra bland och köpa webbtypsnitt.

Högkvalitativa, läsbara webbtypsnitt

Om du behöver lite inspiration är följande exempel på webbtypsnitt som är lättlästa och som skulle kunna 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-typsnitt som är idealiskt för läsning på skärmen. Det designades av Steve Matteson och har öppna former. Alla bokstäver är lätta att läsa och ser bra ut även i alla storlekar.

Roboto

Roboto är ett annat högkvalitativt webbtypsnitt som ser bra ut på skärmar. Det har en geometrisk design med öppna kurvor, vilket skapar en tilltalande dikotomi som helt enkelt fungerar. Each letter maintains a natural width, resisting the typical rigidity of grotesk fonts.

Raleway

Or, you could opt for Raleway, another sans serif font that offers thinner lines and a more elegant appeal. The typeface family was originally designed by Matt McInerney, then expanded later by Pablo Impallari and Rodrigo Fuenzalida.

Century Gothic

Century Gothic is a web font that offers a classic look. And it makes sense that this is the case since it’s actually a modernized version of older fonts from the 1920s and 30s. It has broad support across browsers and is readable on screens.

Proxima Nova

Proxima Nova is another web font option that is actually a re-envisioned version of the Proxima Sans font, which was first created in 1994. The font is slightly geometric but natural as well and would make for an excellent selection for your email copy.

Quasimoda

Quasimoda is a stylish web font that’s easy on the eyes and universal in its appeal. It was created by Lettersoup, a type foundry based in Berlin, Germany that was started by Botio Nikoltchev in 2014.

PT Sans Pro

PT Sans Pro might be just what you’re looking for in a web font. It offers rounded letterforms and a natural look. It was designed by Paratype, a digital font company that got its start in the 1980s.

Brandon Grotesque

The Brandon Grotesque web font was created by HVD Fonts. HVD grundades av Hannes von Döhren och företaget fokuserar på att skapa lättlästa, professionella men ändå snygga typsnitt som fungerar för alla möjliga tillämpningar.

Sofia Pro

Sofia Pro är ett seriefri typsnitt som designades av Mostardesign 2008. Det bibehåller en känsla av modernitet samtidigt som det innehåller rundade former. Det har en bra balans mellan harmoniska mönster och geometriska mönster.

Museo Sans

Sist har vi Museo Sans, som är en nyare variant av det populära typsnittet Museo. Det har en geometrisk sans serif-design som kan användas i både rubriker och kopierad text. Det är läsbart och mångsidigt, vilket gör det till en arbetshäst för e-post. Det designades av Exljbris 2008.

En anmärkning om att använda bilder i e-post kontra text

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

Var försiktig när du använder bilder i e-postmeddelanden och använd dem endast för att förstärka innehållet i ditt meddelande, inte för att förmedla viktig information. Så om du vill tillkännage en specialförsäljning på din webbplats ska du inte bara inkludera en bild av din försäljningsaffisch med produktinformationen på den och sedan kalla det en dag.

Du måste åtminstone inkludera bildens text som vanlig text också. Ännu bättre är att undvika denna redundans helt och hållet och bara använda e-postsäker text och spara bilderna för tillfälligt visuellt intresse.

Det enda textbaserade undantag jag kan tänka mig som skulle göra det lämpligt att använda text som bild är en logotyp, där företagets eller varumärkets namn redan är en självklarhet.

Skojfriskt faktum: de flesta människor spenderar bara 11 sekunder på att läsa ett e-postmeddelande.⏱ Slösa inte bort den dyrbara tiden med svårlästa typsnitt. 🙅♀️ Ta del av den här guiden om säkra typsnitt för e-post och få fler leads!Click to Tweet

Sammanfattning

Det räcker inte med vilket typsnitt som helst när du skickar e-postmeddelanden till potentiella kunder. Faktum är att om du misslyckas med att välja ett bra typsnitt kan det avsevärt skada din konverteringsgrad. Så de typsnitt du väljer måste vara e-postsäkra, göra ett gott intryck och erbjuda utmärkt läsbarhet.

I den här artikeln gick vi igenom de viktigaste typerna av typsnitt som finns och den psykologiska påverkan de kan ha. Vi visade exempel på typsnitt som de flesta e-postklienter stöder. Vi pratade också om webbtypsnitt, hur du kan lägga till dem på din webbplats samt erbjöd resurser och exempel på webbtypsnitt 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 typsnitt. 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.