Den ultimata guiden till webbtypsnitt

Historiskt sett har det aldrig varit särskilt svårt att välja rätt typsnitt för ditt e-postmeddelande, med tanke på det begränsade antalet webbsäkra typsnitt att välja mellan. Men saker och ting har förändrats. Fler och fler e-postdesigners tänjer på gränserna och anammar samma utvecklingstekniker som webbdesigners har använt i åratal – de implementerar webbteckensnitt i sina e-postmeddelanden.

Vebbteckensnitt gör det möjligt för webbdesigners att vara mer kreativa med sin typografi, vilket gör det möjligt för dem att välja icke-standardiserade teckensnitt i sina designer.

Som det brukar vara fallet när det gäller att bryta ny mark inom e-postdesign och -utveckling var framåtblickande medlemmar i communityt en av de första som förde fram dessa tekniker till våra inboxar (och uppmärksamhet). Vi är skyldiga Campaign Monitors fantastiska guide till webbtypsnitt, Paul Airys ”A Type of Email” och Style Campaign ett stort tack för deras inspiration.

I den ultimata guiden till webbtypsnitt kommer vi att gå in på detaljerna om vad webbtypsnitt är och hur e-postdesigners kan implementera dem i sina e-postmeddelanden.

Vad är ett webbtypsnitt?

Det finns två olika typer av typsnitt som e-postdesigners kan använda i sina e-postmeddelanden – webbsäkra typsnitt och webbtypsnitt. Här är skillnaden mellan de två:

Säkra typsnitt för webben
Tänk på Arial, Times New Roman, Verdana eller Georgia som utmärkta exempel på säkra typsnitt för webben. De är standardtypsnitt som finns i de flesta olika operativsystem och enheter.

Webbtypsnitt
Webbtypsnitt finns inte som en del av standardtypsnitten som är tillgängliga på olika enheter och operativsystem, utan är särskilt utformade och licensierade för att användas på webbplatser. Ett par webbtypsnitt som du kanske känner till är Open Sans och Roboto.

Varför webbtypsnitt?

Som marknadsförare och formgivare känner du till trycket att hålla sig på samma varumärke i e-post, med färger, design och – ja – typografi. Att låsa in viktiga texter i bilder har varit ett standardförfarande inom e-postdesign som ett sätt att hålla sig till varumärket och vara kreativ. Men att ”gömma” text i bilder begränsar tillgängligheten i e-postmeddelandet eftersom skärmläsare inte kan läsa texten i bilden.

Webbtypsnitt öppnar nya vägar för kreativitet inom typografi, vilket gör det möjligt för e-postdesigners att vara kreativa och tillgängliga – och hålla sig till varumärkets utseende och känsla.

E-post- och webbtypsnitt

Vänliga webbtypsnitt har inte universellt stöd, men här är de e-postklienter där de stöds:

Apple Mail
iOS Mail
Google Android
Samsung Mail (Android 8.0)
Outlook for Mac
Outlook App

Listan över e-postklienter som stöds kan se kort ut, men ta dig i kragen – de flesta av dem är bland de tio mest populära e-postklienterna. Det är något att vara glad över!

*Pro tips: I april 2018 släppte Gmail ett uppdaterat gränssnitt för sin webbmailklient. Det nya gränssnittet använder två populära webbtypsnitt: Google Sans och Roboto. Vad innebär detta? Trots att Gmail inte har stöd för webbtypsnitt kommer de faktiskt att renderas i Gmail om du använder något av dessa webbtypsnitt i dina e-postmeddelanden. Lägg helt enkelt till teckensnitten i CSS-attributet font-family om du vill använda dem i ditt e-postmeddelande.

Opptäck din topp 10

När det gäller e-postmarknadsföring handlar allt om din målgrupp. Använd Litmus Email Analytics för att upptäcka vilka e-postklienter som är mest populära bland dina prenumeranter. Registrera dig gratis!

Det finns tre huvudsakliga tillvägagångssätt som du kan använda när du använder webbtypsnitt i din e-post.

Hur du bäddar in webbtypsnitt i e-post

Det finns tre huvudsakliga tillvägagångssätt som du kan använda när du använder webbtypsnitt i dina e-postmeddelanden.

@import

Användning av @import är ett av de enklare tillvägagångssätten för import av webbtypsnitt i e-post. Placera följande kodrad i <head> i ditt e-postmeddelande, vanligtvis högst upp i <style>.

@import url('https://fonts.googleapis.com/css?family=Montserrat');

I det här exemplet är namnet på det importerade typsnittet ”Montserrat.”

Din tjänst för webbtypsnitt ger dig den URL du behöver. Om du är värd för teckensnittet själv måste du peka URL:en till den plats där din webbteckensnittsfil finns.

Denna metod har bra stöd i de flesta av ovanstående e-postklienter och saknar bara stöd i Android 2.3 (Android Gingerbread) – en gammal Android-version som har en försvinnande liten marknadsandel.

<link>

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">

Samma som för @import-metoden kommer din webbteckensnittstjänst att definiera href-värdet. Om du är värd för teckensnittsfilen själv ändrar du den här URL:en så att den pekar på var webbteckensnittet finns på din server. Och du vill placera den här kodraden i <head> i ditt e-postmeddelande, nära toppen.

Metoden <link> fungerar något bättre än @import-metoden, med stöd från alla ovanstående e-postklienter (hurra!).

Så varför skulle du välja en metod framför en annan? Metoden @import skjuter upp laddningen av det webbteckensnitt som importeras tills HTML-texten som den är inbäddad i är helt laddad. Detta kan leda till att webbteckensnittet tar lite längre tid att visa i e-postmeddelandet medan resten av e-postmeddelandet laddas. Omvänt laddar <link>-metoden resursen inline när HTML-filens kod läses (från toppen till botten), vilket kan fördröja laddningen av e-postmeddelandet om filen med webbtypsnittet är särskilt stor.

@font-face

Tjänster för webbtypsnitt på nätet erbjuder vanligen fem filformat att välja mellan: .eot, .woff, .woff2, .svg och .ttf. Formatet .woff har bäst stöd när det gäller e-post, så vi föreslår att du använder detta format när du kan. Metoden @font-face är den enda metod som låter dig specifikt välja vilket filformat du vill importera, vilket gör den till den mest skottsäkra metoden för att implementera webbteckensnitt.

Här är en typisk @font-face-deklaration för att importera ett webbteckensnitt till e-post med Google Fonts som vår valda tjänst för webbteckensnitt:

@font-face {font-family: 'Montserrat';font-style: normal;font-weight: 400;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');}

Olyckligtvis är det inte lätt att hitta webbteckensnittets URL om du använder Google Fonts – det finns några hinder du måste ta dig igenom.

1. Sök efter det webbteckensnitt du vill använda.
När du har hittat och valt det visas en liten svart balk längst ner på skärmen. När du klickar på den visas en skärm som ser ut så här:

2. Kopiera webbtypsnittets URL (markerad ovan) och klistra in den i adressfältet i antingen Safari eller Internet Explorer.
Vi använder Safari eller Internet Explorer i den här metoden eftersom Google Fonts använder sig av webbläsarigenkänning för att avgöra vilken typ av typsnittsfil som ska serveras. För den här metoden vill vi använda filtypen .woff. Om du använder Google Chrome är det teckensnittsfiltypen .woff2 som kommer att serveras i webbläsaren som har begränsat stöd. Tack till Elliot Ross för denna extra insikt!

När sidan har laddats ser du en CSS-deklaration på sidan:

3. Kopiera denna CSS och klistra in den i <style>-avsnittet i ditt e-postmeddelande.
Och även om den här metoden anses vara den mest skottsäkra kan ändringar göras av leverantören av webbtypsnitttjänsten i den URL för direktåtkomst som används för att importera webbtypsnittet. Om du väljer att använda den här metoden bör du testa ditt e-postmeddelande regelbundet för att se till att dina webbtypsnitt fortsätter att återges med tiden.

På Lammus är @font-face-metoden vår bästa metod för att importera webbtypsnitt i våra e-postmeddelanden.

Alla äran för den här metoden för att importera webbtypsnitt går till Paul Airy, förespråkare för e-posttillgänglighet, som beskrivs i en tidigare artikel i Type: E-nyhetsbrev (som du definitivt bör prenumerera på om du inte redan har gjort det).

Användning av webbtypsnitt i e-post

När ditt webbtypsnitt är importerat är det lika enkelt att använda det i e-post som att använda ett webbsäkert typsnitt, med hjälp av namnet på typsnittsfamiljen som definierats i importmetoden:

font-family: 'Montserrat', sans-serif;

Väljning av ett reservtypsnitt

När du använder webbtypsnitt är det nödvändigt att ha ett webbsäkert reservtypsnitt på plats för de e-postklienter som inte stöder webbtypsnitt.

Standardtypsnitt för webbsäkra teckensnitt

Varje e-postklient har ett standardtypsnitt om det teckensnitt som anges i stacken för teckensnittsfamilj inte är tillgängligt. Gmail använder till exempel Arial, Apple Mail använder Helvetica och Outlook använder Calibri.

Om du inte gillar ljudet av något av dessa standardtypsnitt har vi goda nyheter – du kan välja ditt reservtypsnitt i stacken för typsnittsfamiljer.

font-family: 'Montserrat', Verdana, sans-serif;

Tänk på detta som en prioriterad lista över föredragna typsnitt. Om en klient inte kan följa ditt förstahandsval kommer den att falla tillbaka till nästa på listan.

Med teckensnittsstapeln ovan kommer Gmail till exempel att ignorera det första teckensnittet på listan eftersom det är ett webbteckensnitt som inte stöds i Gmail, och teckensnittet i e-postmeddelandet kommer att vara Verdana. Om Verdana inte stöds på den enhet som används (vilket är mycket sällsynt, eftersom Verdana är ett säkert webbteckensnitt) kommer enheten att använda standardteckensnittet utan serif för sitt system, eftersom detta är det tredje teckensnittet i listan.

Hur man väljer rätt reservtypsnitt

Att välja rätt reservtypsnitt som behåller e-postmeddelandets design är nyckeln till att servera en bra upplevelse för alla dina prenumeranter, oavsett vilken e-postklient de använder.

Fallbackteckensnitt bör vara av samma typ som webbteckensnittet – använd ett fallbackteckensnitt med sans-serif om webbteckensnittet är ett sans-serif-teckensnitt och ett fallbackteckensnitt med serif om webbteckensnittet också är ett serif-teckensnitt. Om du använder samma typ av typsnitt kan du behålla e-postmeddelandets utformning i olika e-postklienter. Du kan ta ett steg längre genom att analysera teckensnittens x-höjd.

X-höjden är teckensnittets vertikala höjd. Helst bör du välja ett reservtypsnitt som har en liknande x-höjd för att förhindra att din e-postdesign faller sönder när reservtypsnittet används.

Här är ett exempel på de subtila skillnaderna i x-höjd mellan typsnitten Verdana, Arial och webbtypsnittet Proxima Nova. Dessa subtila skillnader kan vara avgörande för om din e-postdesign är bra eller dålig när webbtypsnitt inte visas.

CSS Font Stack har en komplett lista – inklusive operativsystemtäckning – över webbsäkra typsnitt som kan användas som reservtypsnitt.

Undervik Faux Bold / Faux Italic

Om du har medföljande fetstil- och kursivversioner av dina webbtypsnittsfiler, låt oss då använda dem! Typsnittsdesigners har lagt ner mycket tankeverksamhet och arbete på att få alla olika stilar i ett typsnitt att stämma, så det är bäst att tillämpa den ursprungliga typsnittsdesignen i stället för att låta e-postklienten eller webbläsaren slumpmässigt tillämpa en falsk fet eller falsk kursiv stil på det vanliga typsnittet.

Grundläggande, gör INTE så här:

@font-face {font-family: 'Montserrat';src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');}style="font-family: 'Montserrat', Verdana, sans-serif; font-weight: bold; font-style: italic;"

Likt webbdesign kan du dra in de äkta typsnitten genom att inkludera dessa stilar i din @font-face-stack, så här:

@font-face {font-family: 'Montserrat';font-style: normal;font-weight: normal;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');}@font-face {font-family: 'Montserrat';font-style: italic;font-weight: normal;src: local('Montserrat-Italic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUQjIg1_i6t8kCHKm459WxRyS7m0dR9pA.woff2) format('woff2');}@font-face {font-family: 'Montserrat';font-style: normal;font-weight: bold;src: local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_dJE3gnD_vx3rCs.woff2) format('woff2');}@font-face {font-family: 'Montserrat';font-style: italic;font-weight: bold;src: local('Montserrat-BoldItalic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUPjIg1_i6t8kCHKm459WxZcgvz_PZwjimrqw.woff2) format('woff2');}

Som du kan se drar de olika stilarna in olika typsnitt oberoende av typsnittsfamilj. På så sätt, om du använder stilen för ditt typsnitt i HTML så här:

style="font-family: 'Montserrat', Verdana, sans-serif; font-weight: bold; font-style: italic;"

… så kommer det äkta typsnittet ”Montserrat-BoldItalic” att användas! Om du bara lägger till font-weight: bold; kommer ”Montserrat-Bold” och om du bara lägger till font-style: italic; kommer ”Montserrat-Italic”.

Så, du kanske undrar – varför gör du det på det här sättet i stället för att deklarera en annan typsnittsfamilj för varje stil, vilket också drar in de äkta typsnitten? Så här ser det ut:

Gör INTE detta heller!

@font-face {font-family: 'Montserrat Bold Italic';src: local('Montserrat Bold Italic'), local('Montserrat-BoldItalic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUPjIg1_i6t8kCHKm459WxZcgvz_PZwjimrqw.woff2) format('woff2');}style="font-family: 'Montserrat Bold Italic', Verdana, sans-serif;"

Det här innebär ett problem. Att använda namn på typsnittsfamiljer för att lagra stilar skapar inte bara överdrivet komplicerad och överflödig CSS, utan det tar också bort stilen från din text om dina fallbacks aktiveras. Om du till exempel tittar på ovanstående kod i Gmail (som inte har stöd för anpassade webbtypsnitt) kommer du bara att se Verdana utan fet stil och utan kursivering i stället för Montserrat Bold Italic. Genom att hålla din typsnittsfamilj och dina typsnittsvikter/typsnittstilar åtskilda kommer dina reservtypsnitt fortfarande att ha rätt stil.

Outlook, vad gör du med mig!

Med Times New Roman som standardtypsnitt för reservtypsnitt har Outlook traditionellt sett varit en utmaning för e-postmarknadsförare med ett hjärta för typografi. Även om Outlook 2019 – det är Microsofts senaste version av sin e-postklient – respekterar reservtypsnitt som anges i koden, är äldre Outlook-versioner fortfarande en utmaning.

Och om du använder importmetoden @font-face kommer Outlook 2007/10/13/16 att som standard använda Times New Roman oavsett vilket reservtypsnitt du har på plats. Den goda nyheten är att det finns ett väl testat hack som löser detta problem.

Följande CSS är riktad mot Outlook, som anges av <!-> och <!->, och talar om för Outlook att använda en annan typsnittsstack.

<!--><style type="text/css">.fallback-font {font-family: Arial, sans-serif;}</style><!-->

Använd klassen ”fallback-font” i ditt e-postmeddelande där du definierar din typsnittsfamilj:

<td class="fallback-font" style="font-family: 'Montserrat', Arial, sans-serif;">Your text here</td>

Och dina typsnitt i Outlook 2007/10/13 kommer att falla tillbaka elegant till Arial, istället för Times New Roman.

En annan lösning för det här felet är att linda in @font-face-importkoden i en media query och dölja den för Outlook:

@media screen { @font-face {font-family: 'Montserrat';font-style: normal;font-weight: 400;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');}}

Outlook kommer nu helt enkelt att ignorera ”Montserrat” i din typsnittsfamiljestack och läsa nästa typsnitt.

Det finns också metoden att rikta den Microsoft Office-specifika egenskapen, mso-font-alt, med ditt valda systemtypsnitt till ditt @font-face-deklarationsblock.

@font-face {font-family: 'Montserrat';font-style: normal;font-weight: normal;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');mso-font-alt: 'Arial';}

Detta kommer att tala om för Outlook för MS Office att standardmässigt använda ditt tilldelade reservtypsnitt.

Hur man hittar webbtypsnitt

Google Fonts

Det finns massor av tjänster för webbtypsnitt tillgängliga, men Google Fonts är vår favorit. Tjänsten är helt gratis, och du kan ladda ner webbteckensnitten till din dator om du gör upp en design i Adobe Photoshop, Sketch eller ett annat designprogram.

Typekit från Adobe

Adoses populära teckensnittsabonnemangstjänst har tidigare varit till liten nytta för e-postdesigners, eftersom Typekit förlitade sig på JavaScript för att bädda in teckensnitten. Från och med augusti 2017 aktiverar Typekit användningen av webbteckensnitt med hjälp av endast CSS – inget JavaScript krävs – och det öppnar upp webbteckensnitt som finns i Typekit för användning i e-post. Du hittar detaljerade instruktioner om hur du lägger till Typekit-webbteckensnitt i dina e-postmeddelanden med hjälp av @import i hjälpdokumentationen för Typekit.

Mer tjänster för webbteckensnitt

Om du letar efter ännu fler webbplatser som erbjuder webbteckensnitt som är licensierade för användning i e-post (oftast mot betalning) kan du kolla in några av nedanstående tjänster:

MyFonts
Commercial Type
Font Spring
Font Shop
You Work for Them
Village
Process Type Foundry

Licensiering av webbtypsnitt i e-post

Webbtypsnitt var ursprungligen utformade för att användas enbart på webbplatser, så deras licensiering gäller vanligtvis endast för användning på webbplatser och mobilapplikationer. Anledningen till att många tjänster för webbtypsnitt inte tillåter användning i e-post är att det ses som distribution av typsnittet, vilket strider mot många av tjänsternas licensavtal för slutanvändare (EULA).

De leverantörer av webbtypsnitt som finns med i listan ovan innehåller licenser för användning av webbtypsnitt i e-post. Många licenser debiteras dock på antalet månatliga öppningar, vilket bör beaktas när man använder en betald tjänst för webbtypsnitt.

Kan jag använda webbtypsnitt?

Det är absolut ingen skada att använda webbtypsnitt som en progressiv förbättring i din e-post just nu. Implementera dina reservtypsnitt på rätt sätt och skicka dina e-postmeddelanden in i framtiden!

Det är värt att ta en titt på din abonnentbas för att se hur många som läser dina e-postmeddelanden i en e-postklient som har stöd för webbtypsnitt. Om majoriteten inte gör det skulle det helt enkelt inte vara värt din tid och ansträngning, särskilt om du överväger att använda ett betalt webbtypsnitt.

Webtypsnitt gjort rätt

För att ge dig lite inspiration till vad som är möjligt, här är några av våra favoritmejl med webbtypsnitt.

Glöm inte att testa

Då användandet av webbtypsnitt i e-post fortfarande betraktas som något experimentellt, rekommenderar vi att du testar ofta, särskilt om du har distribuerat webbtypsnitt i mallar som kanske inte uppdateras regelbundet. Ändringar och uppdateringar av e-postklienters renderingsmöjligheter meddelas vanligtvis inte i förväg och kan ske sporadiskt, så det är bäst att testa regelbundet.

Det är värt att notera att om du har webbteckensnittet installerat på din egen dator kommer du att kunna se webbteckensnittet när du testar live i en e-postklient på din dator – något du bör ha i åtanke ifall det plötsligt ser ut som om Gmail nu har stöd för webbteckensnitt.

TESTAR TYPOGRAFIER I DINA KAMPANJER

Inspirerad att ta ditt typsnittspel till nästa nivå? Se bara till att testa dina kampanjer innan du skickar ut dem. Prova Litmus gratis och se till att din typografi ser fantastisk ut i 90+ e-postklienter, inklusive desktop, webmail och mobila enheter.

Lär dig mer →