Typsnitt är en viktig del av e-postdesign och påverkar både läsbarhet, varumärkesupplevelse och hur användaren uppfattar mejlet. Till skillnad från på webben, där du kan använda nästan vilka webfonts du vill, är möjligheterna mer begränsade i e-post eftersom olika klienter har olika stöd. Ett typsnitt kan se perfekt ut i en inkorg men bytas ut eller ignoreras i en annan.

Genom att förstå begränsningarna och använda smarta fallback-alternativ kan du skapa mejl som ser snygga, enhetliga och proffsiga ut i alla inkorgar.

Här är en mer detaljerad guide till hur typsnitt fungerar i e-post och hur du använder dem på bästa sätt.

Webbsäkra typsnitt (det bästa valet)

Webbsäkra typsnitt är sådana som redan finns förinstallerade på de flesta operativsystem, som Windows, macOS, iOS, Android och Linux. Eftersom typsnitten redan finns på användarens enhet kan e-postklienterna visa dem utan att behöva ladda något externt.

Varför de passar perfekt för e-post

• Hög kompatibilitet: Stöds av i stort sett alla e-postklienter, inklusive Gmail, Outlook, Yahoo och Apple Mail
• Inga laddningsproblem: Ingen extern laddning eller @font-face krävs
• Jämn visning: Gör att din text ser ut nästan exakt som i din ursprungliga design

Vanliga webbsäkra typsnitt är till exempel:

Tips: Arial och Helvetica anses vara neutrala och professionella, vilket gör dem lämpliga för de flesta branscher.

Anpassade typsnitt

Anpassade typsnitt inkluderar typsnitt som Proxima Nova, Lato, Montserrat eller andra Google Fonts, Adobe Fonts eller självhostade typsnitt som inte är förinstallerade på enheter. För att använda dem i e-post refereras de vanligtvis via @font-face i <style>-taggen i mejlet, eller genom att använda en hostingtjänst (som Google Fonts).

Varför de kan vara svåra att använda:

• Begränsat stöd: De flesta större e-postklienter, särskilt Gmail, Outlook och Yahoo, tar bort den anpassade fontkoden eller ersätter den med ett systemfont.  
• Prestandaproblem: Även i stödda klienter ökar laddningen av ett anpassat typsnitt mejlets storlek och kan försena rendering.  
• Visuell inkonsekvens: Om fallback-typsnittet ser väldigt olika ut kan din layout gå sönder eller kännas fel för varumärket.

Klienter som kan stödja anpassade typsnitt:

• Apple Mail (macOS och iOS)  
• Outlook för Mac  
• Thunderbird  
• Samsung Mail (delvis)

Ibland kan det se ut som om ett anpassat typsnitt laddas eftersom det redan är installerat på användarens enhet – inte för att e-postklienten stöder den. 

Fallback-typsnitt

Eftersom anpassade typsnitt inte alltid kan litas på att visas korrekt i alla inkorgar, är fallback-typsnitt viktiga. Ett fallback-typsnitt används när det primära typsnittet inte går att ladda. Det ser till att mejlet förblir läsbart och visuellt nära den ursprungliga designen.

Exempel på font-stack:

font-family: 'Proxima Nova', Arial, sans-serif;

I det här fallet:

• 'Proxima Nova' är det föredragna (anpassade) typsnittet.
• Om det inte finns tillgängligt används Arial (webbsäkert).
• Om Arial inte finns tillgängligt, kommer webbläsaren att använda ett generiskt sans-serif-typsnitt.

Varför använda flera fallback-nivåer:

• För att behålla din designstruktur och läsbarhet på olika plattformar.
• För att undvika layoutförändringar som kan uppstå när ett typsnitts mått skiljer sig (t.ex. radavstånd, mellanrum).

Bästa praxis: Inkludera alltid minst ett webbsäkert fallback-typsnitt efter ett anpassat typsnitt.

Stöd för typsnitt i e-postklienter

Stödet för typsnitt varierar stort mellan e-postklienter. Här är en förenklad tabell som visar hur de beter sig:

* Typsnitt kan visas om de redan är installerade på enheten.

** Gmail tvingar fram Roboto (Android) och Helvetica (iOS).

*** Typsnitt skrivs ofta över eller tas bort helt.

***** Gmail tillämpar aggressiva typsnittsåtgärder, även för inline-stilar.

Exempel på hur typsnitt ser ut i de 3 mest populära e-postklienterna – Apple Mail, Gmail och Outlook:

• Anpassat typsnitt Kanit (https://fonts.google.com/specimen/Kanit):
  
  

• Webbsäkert typsnitt Arial:
• 

Bästa practice för att använda typsnitt i e-post

Här är de viktigaste reglerna som varje e-postutvecklare bör följa:

• Använd webbsäkra typsnitt när det är möjligt.
• Definiera alltid fallback-typsnitt – detta säkerställer att ditt meddelande är läsbart och att ditt varumärke bevaras så mycket som möjligt.
• Begränsa användningen av anpassade typsnitt till dekorativa syften – som logotyper i bildform eller mindre stiliserade rubriker.
• Undvik att förlita dig på anpassade typsnitt för viktig kommunikation – använd dem inte för CTA-knappar, navigering eller prissättning.
• Testa dina mejl på olika plattformar – använd verktyg som Litmus eller Email on Acid för att förhandsgranska hur ditt mejl visas i olika klienter.
• Optimera för läsbarhet – oavsett typsnitt, se till att radavstånd, teckenstorlek och kontrast stödjer läsbarheten.

Typsnittsrendering i våra editors

Klassisk editor:

Förhandsgranskningen visar ditt varumärkes typsnitt om det är definierat. Däremot visas endast fallback-typsnitt (t.ex. Arial) i redigeringsläget.

Vår nya editor erbjuder en mer avancerad förhandsgranskning:

Tips: Det du ser i e-postredigeraren är inte alltid det dina mottagare kommer att se. Testa alltid de live-versioner du skickar.