{"id":38377,"date":"2021-03-11T09:04:49","date_gmt":"2021-03-11T08:04:49","guid":{"rendered":"https:\/\/kinsta.com\/?p=84415"},"modified":"2024-04-08T09:32:23","modified_gmt":"2024-04-08T09:32:23","slug":"basta-teckensnitt-for-e-post","status":"publish","type":"post","link":"https:\/\/kinsta.com\/se\/blog\/basta-teckensnitt-for-e-post\/","title":{"rendered":"E-posttypografi: 8 b\u00e4sta teckensnitt f\u00f6r e-post (och anpassade teckensnittsid\u00e9er f\u00f6r e-post)"},"content":{"rendered":"

De flesta f\u00f6retag med s\u00e4kra f\u00f6ljare har fullt ut omfamnat allt\u00a0e-postmarknadsf\u00f6ring<\/a>\u00a0har att erbjuda vid denna tidpunkt.\u00a0Nyhetsbrev via e-post<\/a>,\u00a0Autosvar<\/a>, osv. E-postmarknadsf\u00f6ring har varit ett konsekvent s\u00e4tt att h\u00e5lla fingret p\u00e5 pulsen p\u00e5 din kunds behov samtidigt som du marknadsf\u00f6r alla de senaste produkterna eller tj\u00e4nsterna du har att erbjuda.<\/p>\n

Det faktum att du kan n\u00e5 kunder l\u00e5ngt efter att de har l\u00e4mnat din webbplats \u00e4r s\u00e5 kraftfullt. Men alla gamla e-postmeddelanden duar bara inte. Hur du presenterar ditt e-postinneh\u00e5ll \u00e4r en viktig del av att f\u00e5nga uppm\u00e4rksamhet och uppmuntra kunder att faktiskt l\u00e4sa dina e-postmeddelanden snarare \u00e4n att ta bort dem direkt.<\/p>\n

Design spelar en avg\u00f6rande roll h\u00e4r. Men sannolikt \u00e4r en av de viktigaste aspekterna att ta hand om din\u00a0alternativ f\u00f6r teckensnitt<\/a>. E-posts\u00e4kra teckensnitt g\u00f6r det l\u00e4ttare f\u00f6r kunder att l\u00e4sa vad du har att s\u00e4ga, vilket inneb\u00e4r att du \u00e4r mer ben\u00e4gen att f\u00e5 den konverteringen.<\/p>\n

Det \u00e4r vad vi kommer att diskutera h\u00e4r idag.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Vad \u00e4r e-posts\u00e4kra teckensnitt?<\/h2>\n

Det \u00e4r frestande att anv\u00e4nda\u00a0snygga teckensnitt<\/a>\u00a0f\u00f6r dina e-postmeddelanden. N\u00e4r allt kommer runt vill du g\u00f6ra ett positivt intryck. Och du vill f\u00e5 ditt inneh\u00e5ll att sticka ut. Speciella teckensnitt visas dock inte alltid korrekt i alla e-postklienter. Faktum \u00e4r att om ett teckensnitt inte st\u00f6ds kan en e-postklient sluta anv\u00e4nda ett reservteckensnitt som i b\u00e4sta fall kan f\u00f6rst\u00f6ra din avsedda ton eller d\u00f6lja l\u00e4sbarheten f\u00f6r ditt inneh\u00e5ll i v\u00e4rsta fall.<\/p>\n

Det \u00e4r d\u00e4rf\u00f6r det rekommenderas starkt att du h\u00e5ller dig till e-posts\u00e4kra teckensnitt endast n\u00e4r du skapar e-postmarknadsf\u00f6ringsinneh\u00e5ll. Vi kommer till detaljerna om ett \u00f6gonblick. Men f\u00f6rst, l\u00e5t oss kort diskutera hur bra teckensnittsval faktiskt kan g\u00f6ra en enorm inverkan p\u00e5 din\u00a0Omvandlingsfrekvens<\/a>.<\/p>\n\n

Hur bra teckensnitt \u00f6kar konverteringar<\/h3>\n

De flesta spenderar bara\u00a011 sekunder<\/a>\u00a0p\u00e5 e-post. Det betyder att alla teckensnitt du v\u00e4ljer m\u00e5ste vara l\u00e4sbara och skanningsbara. De m\u00e5ste erbjuda den ”i korthet” bekv\u00e4mligheten. Ofta inneb\u00e4r detta att f\u00f6rlita sig p\u00e5 standardteckensnitt som alla redan \u00e4r bekanta med. L\u00e5ter det tr\u00e5kigt? Alternativet \u00e4r s\u00e4mre. Faktum \u00e4r att m\u00e4nniskor tar\u00a0dubbelt s\u00e5 l\u00e5ng<\/a>\u00a0p\u00e5 sig f\u00f6r att l\u00e4sa snygga teckensnitt. Och om folk bara spenderar 11 sekunder p\u00e5 ett e-postmeddelande, \u00e4r det massor av tid som sl\u00f6sas bort.<\/p>\n

\"Script
Script vs. Sans serif l\u00e4stid<\/figcaption><\/figure>\n

\u00a0<\/p>\n

Det \u00e4r dock inte bara teckensnittet du v\u00e4ljer som p\u00e5verkar konverteringarna. Storleken p\u00e5 teckensnittet du v\u00e4ljer spelar ocks\u00e5 roll. Enligt forskning som utf\u00f6rts av\u00a0Click Laboratory<\/a>, n\u00e5got \u00f6ka en teckensnittsstorlek kan ha en enorm inverkan p\u00e5 din konverteringsfrekvens.<\/p>\n

Forskningen omfattade att \u00f6ka ett textblock som \u00e4r inst\u00e4llt p\u00e5 Arial-teckensnitt fr\u00e5n 10pt till 13pt. Mer utrymme lades ocks\u00e5 till mellan textraderna. Den 13pt versionen av teckensnittet\u00a0presterade\u00a0<\/em>s\u00e5 mycket b\u00e4ttre eftersom inneh\u00e5llet nu var l\u00e4ttare att l\u00e4sa f\u00f6r \u00f6gonen.<\/p>\n

Denna lilla f\u00f6r\u00e4ndring minskade\u00a0avvisningsfrekvens<\/a>\u00a0med 10% och \u00f6kade konverteringsfrekvensen med hela 133%! Allt p\u00e5 grund av att du f\u00f6rstorar upp teckensnittets storlek med tv\u00e5 punkter!<\/p>\n

Det finns en psykologi i dina teckensnittsval ocks\u00e5. Detta g\u00e4ller logotyper mestadels men det skulle l\u00f6na sig att h\u00e5lla denna information i \u00e5tanke eftersom du v\u00e4ljer e-postteckensnitt ocks\u00e5. Vissa typer av teckensnitt har vissa ”k\u00e4nslor” associerade med dem. Enligt\u00a0Crazy Egg<\/a>, de fem viktigaste teckensnittstyperna framkallar olika k\u00e4nslor eller associationer:<\/p>\n

Serif Teckensnitt<\/h4>\n

Exempel \u00e4r Times New Roman, Baskerville och Georgia.\u00a0Serif-teckensnitt<\/a> utstr\u00e5lar en k\u00e4nsla av respektabilitet, tillf\u00f6rlitlighet och tradition. \u00c4ldre m\u00e4rken (eller de som vill verka som om de har funnits i \u00e5rtionden) anv\u00e4nder sig av den h\u00e4r typen av teckensnitt f\u00f6r att ingjuta f\u00f6rtroende. Den Tiffany & Co<\/a>\u00a0logotypen fungerar som ett gediget exempel.<\/p>\n

\"Tiffany
Tiffany och Co<\/figcaption><\/figure>\n

Vogue<\/a> ocks\u00e5:<\/p>\n

\"vogue\"
Vogue<\/figcaption><\/figure>\n

Sans Serif Teckensnitt<\/h4>\n

Exempel \u00e4r Helvetica, Calibri och Franklin Gothic.\u00a0Sans serif teckensnitt<\/a>\u00a0ger bort ett modernt utseende som \u00e4r rent och enkelt. Dessa teckensnitt ger intryck av tillf\u00f6rlitlighet och stabilitet. Sans serif-teckensnitt \u00e4r mer likt ett f\u00f6retags-utseende.\u00a0Netflix<\/a>\u00a0har ett sans serif-teckensnitt:<\/p>\n

\"netflix\"
Netflix<\/figcaption><\/figure>\n

Moderna teckensnitt<\/h4>\n

Exempel \u00e4r Futura och Century Gothic. Moderna teckensnitt<\/a> kan verka snygga, eleganta eller ge en \u00f6vergripande k\u00e4nsla av styrka. Hulus logotyp \u00e4r ett popul\u00e4rt exempel p\u00e5 en som anv\u00e4nder en\u00a0modernt teckensnitt<\/a>:<\/p>\n

\"Hulu\"
Hulu<\/figcaption><\/figure>\n

Teckensnitt f\u00f6r skript<\/h4>\n

Exempel \u00e4r Edwardian Script och Bickham Script.\u00a0Skriptteckensnitt<\/a>\u00a0kommer sannolikt inte att vara ett klokt val f\u00f6r anv\u00e4ndning i dina e-postmeddelanden. De g\u00f6r dock en inverkan n\u00e4r de anv\u00e4nds i logotyper och det kan fungera f\u00f6r grafiska element. Coca-Cola \u00e4r ett tidl\u00f6st exempel p\u00e5 ett skriptteckensnitt som anv\u00e4nds v\u00e4l:<\/p>\n

\"Coca-Cola\"
Coca-Cola<\/figcaption><\/figure>\n

Visa teckensnitt<\/h4>\n

Exempel \u00e4r Cooper och Valencia. Ord och k\u00e4nslor som ofta f\u00f6rknippas med\u00a0visa teckensnitt<\/a>\u00a0inkluderar en k\u00e4nsla av individualitet eller unikhet, v\u00e4nlighet eller uttrycksfullhet. F\u00f6r logotyper (och eventuellt rubriker) kan visningsteckensnitt g\u00f6ra verklig inverkan och sticka ut. Disney erbjuder en av de mest k\u00e4nda logotyperna i v\u00e4rlden, och den har ett visningsteckensnitt:<\/p>\n

\"Disney\"
Disney<\/figcaption><\/figure>\n

Med den h\u00e4r informationen i \u00e5tanke kan vi nu g\u00e5 vidare till hur du kan v\u00e4lja det b\u00e4sta teckensnittet f\u00f6r e-postmeddelanden.<\/p>\n

E-posttypografi: Hur man v\u00e4ljer de b\u00e4sta teckensnitten<\/h2>\n

Du k\u00e4nner nu till de fem grundl\u00e4ggande typerna av teckensnitt som \u00e4r tillg\u00e4ngliga (andra \u00e4n symboler, antar jag). Och du vet att olika teckensnittstyper skapar olika k\u00e4nslor hos dina kunder. Men hur kan kunskapen om vilken typ av typsnitt Coca-Cola anv\u00e4nder anv\u00e4ndas f\u00f6r att v\u00e4lja r\u00e4tt teckensnitt f\u00f6r dina nyhetsbrev?<\/p>\n

Vi dyker in.<\/p>\n

Alla teckensnitt som du v\u00e4ljer att anv\u00e4nda i f\u00f6retagets e-postmeddelanden m\u00e5ste inneh\u00e5lla f\u00f6ljande 4 egenskaper:<\/p>\n

Kvalitet #1: L\u00e4sbarhet<\/h3>\n

Vi har redan n\u00e4mnt denna kvalitet men det t\u00e5l att upprepas eftersom det \u00e4r det \u00f6verl\u00e4gset viktigaste. Om ditt teckensnitt inte \u00e4r l\u00e4sbart kommer ingen att kunna l\u00e4sa dina e-postmeddelanden. Och om de inte kan l\u00e4sas, kan du verkligen inte f\u00f6rv\u00e4nta dig konverteringar, nu kan du?<\/p>\n

Kvalitet #2: Tydlighet<\/h3>\n

Rena, skarpa teckensnitt med exakta linjer \u00e4r det som kommer att fungera b\u00e4st i din e-postkopia. Inget med blomstring eller slingrande. Och absolut ingenting med supertunna och l\u00e4tta linjer. St\u00f6rre teckenstorlekar g\u00f6r ocks\u00e5 b\u00e4ttre ifr\u00e5n sig. G\u00f6r ditt teckensnitt till en pt eller tv\u00e5 st\u00f6rre storlekar \u00e4n du vanligtvis skulle g\u00f6ra, se till att teckenvikten \u00e4r anst\u00e4ndig (men inte fet) och sikta p\u00e5 ett radavst\u00e5nd p\u00e5 1,15.<\/p>\n

Kvalitets#3: Psykologiskt l\u00e4mplig<\/h3>\n

Som n\u00e4mnts ovan har vissa teckensnittstyper specifika k\u00e4nslor associerade med dem. Se till att teckensnitten du v\u00e4ljer passar in i det \u00f6vergripande hum\u00f6ret du f\u00f6rs\u00f6ker f\u00f6rmedla med ditt inneh\u00e5ll och syftet med ditt inneh\u00e5ll. Att verka p\u00e5litlig eller som en myndighetsfigur kan vara f\u00f6rdelaktigt om du f\u00f6rs\u00f6ker s\u00e4lja n\u00e5got, till exempel.<\/p>\n

Kvalitet #4: Varum\u00e4rkes L\u00e4mpligt<\/h3>\n

P\u00e5 samma s\u00e4tt b\u00f6r alla teckensnitt du v\u00e4ljer vara logiska f\u00f6r anv\u00e4ndning\u00a0f\u00f6r din bransch eller nisch<\/a>. Om ditt f\u00f6retag har en gammaldags k\u00e4nsla skulle det inte vara l\u00e4mpligt att anv\u00e4nda ett supermodernt teckensnitt eller visningsstil. P\u00e5 samma s\u00e4tt, om du driver ett teknikbaserat f\u00f6retag, skulle n\u00e5got rustikt eller formellt f\u00f6rmodligen inte heller g\u00f6ra den b\u00e4sta passformen. Allt handlar om vad som k\u00e4nns r\u00e4tt.<\/p>\n

8 b\u00e4sta teckensnitt f\u00f6r e-post<\/h2>\n

Vi har definierat e-posts\u00e4kra teckensnitt. Vi har ocks\u00e5 pratat om hur du kan begr\u00e4nsa ditt teckensnittsval. Men nu \u00e4r det dags att komma till detaljerna om vilka teckensnitt som faktiskt \u00e4r e-posts\u00e4kra och hur man t\u00e4nker utanf\u00f6r l\u00e5dan utan att offra l\u00e4sbarhet eller skada din konverteringsfrekvens.<\/p>\n

De grundl\u00e4ggande e-posts\u00e4kra teckensnitten<\/h3>\n

Det finns en grundl\u00e4ggande upps\u00e4ttning l\u00e4sbara (om \u00e4n tr\u00e5kiga) e-posts\u00e4kra teckensnitt som de flesta e-postklienter kan k\u00e4nna igen. L\u00e5t oss ta en titt p\u00e5 var och en av dem nu.<\/p>\n

Arial<\/h4>\n
\"arial\"
Arial<\/figcaption><\/figure>\n

Arial<\/a>\u00a0\u00e4r ett mycket vanligt typsnitt. Det skapades ursprungligen 1982 av Patricia Saunders och Robin Nicholas fr\u00e5n Monotype Imaging. \u00c4ven om det ursprungligen var utformat f\u00f6r anv\u00e4ndning i en IBM-laserskrivare, har det sedan dess blivit en webbinneh\u00e5llsfavorit.<\/p>\n

Verdana<\/h4>\n
\"verdana\"
Verdana<\/figcaption><\/figure>\n

Verdana<\/a>\u00a0\u00e4r ett teckensnitt som har utformats med sk\u00e4rmvisningar i \u00e5tanke. Det utvecklades av Matthew Carter och har breda karakt\u00e4rer och stort avst\u00e5nd mellan varje karakt\u00e4r f\u00f6r att f\u00f6rb\u00e4ttra l\u00e4sbarheten p\u00e5 sk\u00e4rmen. Det \u00e4r ett annat h\u00e4ftklammerval som st\u00f6ds av de flesta e-postklienter.<\/p>\n

Helvetica<\/h4>\n
\"Helvetica\"
Helvetica<\/figcaption><\/figure>\n

Och sen har vi\u00a0Helvetica<\/a>, ett av de mest popul\u00e4ra teckensnitten som f\u00f6r n\u00e4rvarande finns. Det \u00e4r l\u00e4sbart, l\u00e4tt att titta p\u00e5 och st\u00f6ds av de flesta ordbehandlingsprogram, e-postklienter och webbl\u00e4sare.<\/p>\n

Georgia<\/h4>\n
\"georgia\"
Georgia<\/figcaption><\/figure>\n

Georgia<\/a> \u00e4r ett annat vanligt typsnitt f\u00f6r att hitta st\u00f6d i e-postklienter. Den \u00e4r till sin natur l\u00e4sbar, har stora bokst\u00e4ver och anv\u00e4nder karakt\u00e4rsdesign som g\u00f6r varje bokstav distinkt f\u00f6r att f\u00f6rhindra f\u00f6rvirring. Det finns ocks\u00e5 en bra avvikelse mellan vanliga och dj\u00e4rva vikter som g\u00f6r det anv\u00e4ndbart f\u00f6r extra betoning.<\/p>\n

Tahoma<\/h4>\n
\"tahoma\"
Tahoma<\/figcaption><\/figure>\n

Tahoma<\/a>\u00a0\u00e4r ett annat alternativ som st\u00f6ds av de flesta e-postklienter. Det \u00e4r en av de mest popul\u00e4ra sans serif-teckensnittsfamiljerna p\u00e5 Windows-operativsystem. Det skapades med sk\u00e4rmvisning i \u00e5tanke, med tydlighet och l\u00e4sbarhet uppn\u00e5elig vid \u00e4nnu mindre teckenstorlekar. Det skapades ursprungligen av Matthew Carter.<\/p>\n

Lucida<\/h4>\n
\"lucida\"
Lucida<\/figcaption><\/figure>\n

Eller s\u00e5 kan du anv\u00e4nda\u00a0Lucida<\/a>, en annan sans-teckensnittsfamilj som prioriterar rena linjer, ett tydligt format och distinkta bokstavsformul\u00e4r. Bokstavsavst\u00e5ndet \u00e4r bredare \u00e4n standard och varje tecken \u00e4r ocks\u00e5 lite h\u00f6gre och l\u00e4gger till fler l\u00e4sbarhetselement.<\/p>\n

Trebuchet<\/h4>\n
\"trebuchet\"
Trebuchet<\/figcaption><\/figure>\n

Trebuchet<\/a>\u00a0\u00e4r ett annat alternativ som du enkelt kan anv\u00e4nda i dina e-postdesigner. Den skapades av Vincent Connare 1996 och \u00e4r ett sans serif-teckensnitt. Den \u00e4r utformad f\u00f6r sk\u00e4rml\u00e4sning och har st\u00f6rre linjeh\u00f6jder, rundade kanter och bredare teckenavst\u00e5nd.<\/p>\n

Times New Roman<\/h4>\n
\"Times
Times New Roman<\/figcaption><\/figure>\n

Slutligen finns det\u00a0Times New Roman<\/a>, ett teckensnitt som verkligen inte beh\u00f6ver mycket av en introduktion. Det har ett traditionellt utseende och anv\u00e4nds ofta som standardteckensnittsval i ordbehandlingsprogram. Det \u00e4r l\u00e4sbart p\u00e5 sk\u00e4rmen och i tryck.<\/p>\n

Din e-postklient kan ha tillg\u00e5ng till andra teckensnitt, men ovanst\u00e5ende \u00e4r de mest l\u00e4sbara och mest erk\u00e4nda.<\/p>\n

Anpassade e-postteckensnitt<\/strong><\/h2>\n

Om de grundl\u00e4ggande teckensnittsalternativen inte tilltalar dig finns det ett annat alternativ. Du kan anv\u00e4nda HTML-teckensnitt<\/a>\u00a0ist\u00e4llet f\u00f6r att skapa ett mer anpassat utseende. Det \u00e4r dock viktigt att notera att inte alla e-postmarknadsf\u00f6ring stj\u00e4nster kan eller kommer att visa\u00a0webbteckensnitt\u00a0Korrekt<\/a>.<\/p>\n

Men f\u00f6rst, l\u00e5t oss pausa f\u00f6r att diskutera hur webbteckensnitt fungerar.<\/p>\n

S\u00e5 h\u00e4r fungerar webbteckensnitt<\/h3>\n

Webbteckensnitt finns, som namnet antyder, endast p\u00e5 webben. De ing\u00e5r inte i operativsystem, enheter, appar eller programvara. De finns online och kan sedan l\u00e4ggas till i dina projekt via kodfragment, plugins och andra medel. Oftast hittar du webbteckensnitt som anv\u00e4nds p\u00e5 webbplatser. Flera e-postklienter st\u00f6der f\u00f6r n\u00e4rvarande anv\u00e4ndningen av webbteckensnitt, inklusive:<\/p>\n