Förstå teckensnitt i e-post
Du kommer att lära dig
Läs om möjligheter och begränsningar med att använda typsnitt online och hur du skickar e-postmeddelanden som stämmer överens med ditt varumärke.
Letar du efter information om hur du använder anpassade teckensnitt? Läs hur du använder anpassade teckensnitt.
Så fungerar typsnitt
Typsnitt är visuella representationer av text och kan användas i tryckta eller onlinebaserade medier. Du kanske känner till några av de vanligaste typsnitten, som Arial eller Times New Roman, men det finns tusentals andra typsnitt som du kan använda för att kommunicera och representera ditt varumärke.
Med online-media (som webbplatser eller e-post) är dina typsnittsalternativ nästan obegränsade. Men när du delar din skapelse med någon annan kanske den inte ser exakt likadan ut, eftersom alla enheter inte har tillgång till samma typsnitt.
Det finns två huvudsakliga sätt som en enhet kan komma åt och använda ett typsnitt: systemtypsnitt (dvs. typsnitt som lagras på enheten du använder) och webbtypsnitt (dvs. typsnitt som laddas in från en extern server)
Om systemteckensnitt
Datorer och telefoner levereras förinstallerade med en mängd olika typsnitt. Det finns vissa typsnitt som ofta är installerade (de flesta enheter har till exempel Georgia och Verdana), men vad som ingår som standard kan variera stort mellan olika enheter. Teckensnitt som används av de flesta enheter kallas ”webbsäkra” teckensnitt.
Om webbteckensnitt
Till skillnad från webbsäkra teckensnitt läses webbteckensnitt in från en extern server samtidigt som innehållet du tittar på. Anpassade teckensnitt är vanligtvis webbteckensnitt. Om du använder ett webbteckensnitt bör du också ange ett webbsäkert reservteckensnitt, om en viss enhet inte kan läsa in ditt webbteckensnitt.
Om reservteckensnitt
När du visar något online, oavsett om det är en webbsida eller ett e-postmeddelande, finns det CSS (kod som används för att utforma innehåll online) i bakgrunden som talar om för din enhet vilket typsnitt som ska visas. Om din enhet inte kan komma åt typsnittet kontrollerar den CSS:en efter ett ”reservtypsnitt” (ett typsnitt eller flera typsnitt som valts av personen som skapade webbplatsen eller e-postmeddelandet, som ska användas om det önskade typsnittet inte var tillgängligt). Reservtypsnitt bör vara webbsäkra typsnitt som de flesta enheter kan använda. De ger dig mer kontroll över hur ditt meddelande visas när någon ser det på en enhet som inte har stöd för anpassade/webbtypsnitt.
Om det inte finns något reservtypsnitt, eller om reservtypsnittet inte stöds av enheten som används, använder enheten ett standardtypsnitt, som Arial eller Times New Roman. Standardtypsnitt varierar mycket mellan olika enheter och appar.
Så fungerar teckensnitt i e-post
Vissa e-postklienter stöder webbtypsnitt, men andra gör det inte. När någon öppnar ditt e-postmeddelande i en inkorg eller på en enhet som inte har stöd för webbteckensnitt ser de i stället ett standardteckensnitt. Du kan styra vilka systemteckensnitt som används som reserv genom att ställa in ett reservteckensnitt.
Om någon öppnar ditt e-postmeddelande på en enhet som stöder webbteckensnitt läser den in teckensnittet från webbadressen som anges i e-postmeddelandets CSS. Om enheten kan komma åt teckensnittet visas det. Annars går den vidare till reservteckensnitten.
Stöd för webbteckensnitt beror på e-postappen, dess version och typen av e-postkonto. Exempel på klienter som har stöd för webbteckensnitt är:
- Apple Mail
- iOS Mail (standardappen för e-post på iOS)
- Vissa e-postappar för Android (stödet varierar beroende på app; Android 2.3 har inte stöd för
@import-metoden som används av Google- och Adobe-teckensnitt) - Samsung Email på Android, förutom när du använder en Microsoft-e-postadress som Outlook.com eller Hotmail
- Outlook för Mac 2011 och 2016; Outlook för Mac 16.80 har inte stöd för webbteckensnitt
Gmail, inklusive Gmail-appen på Android, har vanligtvis inte stöd för webbtypsnitt. Gmails webbmail i datorn kan visa Roboto och Google Sans eftersom Gmail inkluderar dem i sina egna stilar. Det betyder inte att Gmail kan läsa in andra anpassade typsnitt från ditt mejl. Ange ett reservtypsnitt och testa ditt mejl i de Gmail-appar som dina mottagare använder.
För information per e-postapp och version, se Can I email:s tabell över stöd för webbteckensnitt.
Optimera teckensnitt i dina mejl
Det bästa sättet att se till att ditt e-postmeddelande ser konsekvent ut på olika enheter är att använda ett webb säkert typsnitt. Klaviyo standardteckensnitt är vanligtvis webbsäkra. Hitta teckensnitten som Klaviyo tillhandahåller i:
- Innehåll > Media och varumärke > Varumärke: välj Teckensnitt. Om du ser Stil i stället väljer du det för att hitta avsnittet Teckensnitt.
- Panelen Redigera stilar i redigeraren för e-postmallen
- Verktygsfältet för textformatering när du redigerar text i ett textblock eller teckensnittskontrollerna i andra block som innehåller text
- Panelen Redigera stilar i redigeraren för registreringsformuläret
3 av de typsnitt som Klaviyo tillhandahåller stöds inte av vissa enheter: Century Gothic, Tahoma och Arial Black. De här typsnitten är inte förinstallerade på iOS-enheter (t.ex. iPhones). Om det valda typsnittet inte är tillgängligt använder enheten nästa tillgängliga typsnitt i Klaviyos reservlista, vilket kan ändra hur ditt e-postmeddelande ser ut.
Tips för att använda anpassade teckensnitt
Om du föredrar att använda ett anpassat teckensnitt kan du använda tipsen nedan för att säkerställa att dina e-postmeddelanden ser välformgivna ut på olika enheter.
Använd reservteckensnitt
Välj ett webbsäkert reservteckensnitt som matchar ditt anpassade teckensnitt så nära som möjligt. Du kan välja ett reservtypsnitt från Klaviyo's standardtypsnitt när du konfigurerar det anpassade typsnittet.
Använd text i bilder
Även om ett e-postmeddelande som bara består av bilder kan försämra din leveransbarhet, kan du strategiskt använda en kombination av text i bilder och text i textblock för att skapa ett e-postmeddelande som matchar ditt varumärke. Välj ett anpassat, varumärkesanpassat typsnitt för dina rubriker och uppmaningar (CTAs) och kombinera det med ett webbsäkert typsnitt att använda i brödtexten. Se till att ha med viktig information och den viktigaste CTA:n i text- eller knappblock också, så att mottagarna kan använda dem även om bilderna inte laddas.
Använd bilder som innehåller ditt varumärkes typsnitt för utvald text och se till att lägga till alt-text när du lägger till bilderna i ditt e-postmeddelande. Använd sedan det webbsäkra typsnittet för resten av texten i ditt e-postmeddelande. På så sätt kan du använda ditt varumärkes typsnitt samtidigt som resten av ditt e-postmeddelande förblir läsbart när bilder inte laddas.
Testa noggrant
Oavsett vilka metoder du väljer ska du testa dina e-postmeddelanden noggrant, särskilt när du använder en ny design. Skicka e-postmeddelandet till dig själv på flera enheter för att säkerställa att du är nöjd med hur det ser ut på varje enhet. Du kan också använda e-posttestprogram som Litmus eller Email on Acid för att testa med ett bredare utbud av enheter.
Ytterligare resurser
- How to add custom fonts in email templates
Learn how to add new fonts to the Klaviyo email template editor so that your emails match your brand style. In this article, you’ll also learn about the tradeoffs when using custom fonts, and how to choose a font supported by the widest range of inboxes.
- Accessibility in emails and forms best practice reference
Learn how to make your emails and sign-up forms more accessible. When designing your emails and signup forms, you’ll want to make sure your designs are accessible to all of your recipients.
- How to update your brand styles in Klaviyo
Learn what to update in Klaviyo when rebranding or refreshing your brand’s design.