'
Articles

Den ultimative guide til webskrifttyper

author
15 minutes, 29 seconds Read

Historisk set har det aldrig været særlig svært at vælge den rigtige skrifttype til din e-mail i betragtning af det begrænsede antal websikre skrifttyper at vælge imellem. Men tingene har ændret sig. Flere og flere e-mail-designere skubber grænserne og tager de samme udviklingsteknikker til sig, som webdesignere har brugt i årevis – de implementerer webfonte i deres e-mails.

Webfonte giver webdesignere mulighed for at være mere kreative med deres typografi, så de kan vælge ikke-standardiserede skrifttyper i deres design.

Som det normalt er tilfældet med at gå nye veje inden for e-mail-design og -udvikling, var fremadstormende medlemmer i fællesskabet blandt de første til at bringe disse teknikker til vores indbakker (og opmærksomhed). Vi skylder en stor tak til Campaign Monitors fantastiske guide til webfonts, Paul Airys “A Type of Email” og Style Campaign for deres inspiration.

I den ultimative guide til webfonts går vi i detaljer med, hvad webfonts er, og hvordan e-mail-designere kan implementere dem i deres e-mails.

Hvad er en webfont?

Der er to forskellige typer skrifttyper til rådighed for e-mail-designere til deres e-mails – websikre skrifttyper og webfonts. Her er forskellen mellem de to:

  • Websikre skrifttyper
    Tænk på Arial, Times New Roman, Verdana eller Georgia som gode eksempler på websikre skrifttyper. Det er de standardskrifttyper, der findes på de fleste forskellige styresystemer og enheder.
  • Webskrifttyper
    Webskrifttyper findes ikke som en del af de standardskrifttyper, der er tilgængelige på forskellige enheder og styresystemer, og de er specielt designet og licenseret til brug på websteder. Et par webskrifttyper, som du måske kender, er Open Sans og Roboto.

Hvorfor webskrifttyper?

Som markedsføringsmedarbejder og designer kender du presset for at forblive on-brand i e-mail, med farver, design og – ja – typografi. At låse vigtige tekster i billeder har været en standardpraksis inden for e-mail-design som en måde at holde sig til brandet og være kreativ på. Men at “skjule” tekst i billeder begrænser e-mailens tilgængelighed, fordi skærmlæsere ikke kan læse teksten på billedet.

Webskrifttyper åbner nye muligheder for kreativitet inden for typografi, så e-maildesignere kan være kreative og tilgængelige – og samtidig holde sig til deres mærkes udseende og følelse.

E-mail og webskrifttyper

Selv om webskrifttyper ikke har universel understøttelse, er her de e-mail-klienter, hvor de understøttes:

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

Listen over understøttede e-mail-klienter ser måske kort ud, men tag mod – de fleste af dem er blandt de 10 mest populære e-mail-klienter. Det er noget at være glad for!

*Pro Tip: I april 2018 udgav Gmail en opdateret grænseflade til deres webmailklient. Denne nye grænseflade bruger to populære webskrifttyper: Google Sans og Roboto. Hvad betyder det? På trods af at Gmail ikke understøtter webskrifttyper, vil de faktisk blive gengivet i Gmail, hvis du bruger en af disse webskrifttyper i dine e-mails. Du skal blot tilføje skrifttyperne til din font-family CSS-attribut, hvis du vil bruge dem i din e-mail.

Opdag din top 10

Når det kommer til e-mailmarkedsføring, handler det hele om din målgruppe. Brug Litmus Email Analytics til at finde ud af, hvilke e-mail-klienter der er mest populære blandt dine abonnenter. Tilmeld dig gratis!

Opdag dit publikum →

Sådan indlejrer du webfonte i e-mail

Der er tre hovedtilgange, du kan vælge, når du bruger webfonte i dine e-mails.

@import

Brug af @import er en af de mere enkle tilgange til import af webfonte i e-mail. Placer følgende kodelinje i <head> i din e-mail, normalt øverst i din <style>.

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

I dette eksempel er navnet på den importerede skrifttype-familie “Montserrat.”

Din webfont-tjeneste vil give dig den URL, du har brug for. Hvis du selv hoster skrifttypen, skal du pege URL’en til det sted, hvor din webskrifttypefil ligger.

Denne metode understøttes godt på tværs af de fleste af de ovennævnte e-mail-klienter og mangler kun understøttelse i Android 2.3 (Android Gingerbread) – en gammel Android-version, der har en forsvindende lille markedsandel.

<link>

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

Nøjagtig som @import-metoden definerer din webskrifttjeneste href-værdien. Hvis du selv er vært for skrifttypefilen, skal du ændre denne URL-adresse til at pege på, hvor webskrifttypen befinder sig på din server. Og du skal placere denne kodelinje i <head> i din e-mail, nær toppen.

Metoden <link> fungerer lidt bedre end @import-metoden og understøttes af alle de ovennævnte e-mail-klienter (hurra!).

Så hvorfor skulle du vælge den ene metode frem for den anden? @import-metoden udskyder indlæsningen af den webskrifttype, der importeres, indtil den HTML, som den er indlejret i, er fuldt indlæst. Det kan føre til, at det kan tage lidt længere tid for din webskrifttype at blive vist i din e-mail, mens resten af e-mailen indlæses. Omvendt indlæser <link>-metoden ressourcen inline, efterhånden som HTML-filens kode læses (fra top til bund), hvilket kan forsinke indlæsningen af din e-mail, hvis din webskrifttypefil er særlig stor.

@font-face

Online-webskrifttypetjenester tilbyder normalt fem filformater at vælge imellem: .eot, .woff, .woff2, .svg og .ttf. .woff-formatet har den bedste understøttelse, når det drejer sig om e-mail, så vi foreslår, at du bruger dette format, når du kan. @font-face-metoden er den eneste metode, der giver dig mulighed for specifikt at vælge, hvilket filformat du ønsker at importere, hvilket gør den til den mest skudsikre metode til implementering af webskrifttyper.

Her er en typisk @font-face-deklaration til import af en webfont til e-mail med Google Fonts som vores valgte webfonttjeneste:

@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');}

Hvis du bruger Google Fonts, er det desværre ikke let at finde webfont-URL’en – der er et par huller, du skal igennem.

1. Søg efter den webskrifttype, du gerne vil bruge.
Når du har fundet og valgt den, vises der en lille sort bjælke nederst på skærmen. Når du klikker på den, vises en skærm som denne:

2. Kopier webfont-URL’en (fremhævet ovenfor), og indsæt den i adresselinjen i enten Safari eller Internet Explorer.
Vi bruger Safari eller Internet Explorer i denne metode, da Google Fonts bruger browserafdækning til at afgøre, hvilken filtype for skrifttypen der skal serveres. Til denne metode ønsker vi at bruge filtypen .woff. Ved brug af Google Chrome er det .woff2-skrifttypetypen, der vil blive serveret i browseren, som har begrænset understøttelse. Tak til Elliot Ross for denne ekstra indsigt!

Når siden er indlæst, vil du se en CSS-deklaration på siden:

3. Kopier denne CSS, og indsæt den i afsnittet <style> i din e-mail.
Selv om denne metode anses for at være den mest skudsikre, kan leverandøren af webfonttjenesten foretage ændringer i den direkte adgangs-URL, der anvendes til at importere webfontten. Hvis du vælger at bruge denne metode, skal du teste din e-mail regelmæssigt for at sikre, at dine webfonts fortsat renderes over tid.

På Litmus er @font-face-metoden vores foretrukne implementering af import af webfonts i vores e-mails.

Al kredit for denne metode til import af webfonts går til Paul Airy, der er fortaler for e-mailtilgængelighed, som beskrevet i en tidligere Type: E-nyhedsbrev (som du helt sikkert bør abonnere på, hvis du ikke allerede er det).

Brug af webskrifttyper i e-mail

Når din webskrifttype er importeret, er det lige så nemt at bruge den i e-mail som at bruge en websikker skrifttype ved hjælp af det font-family-navn, der er defineret i importmetoden:

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

Valg af en fallback-skrifttype

Når du bruger webskrifttyper, er det en nødvendighed at have en fallback-websikker skrifttype på plads til de e-mail-klienter, der ikke understøtter webskrifttyper.

Default websikre skrifttyper

Hver e-mail-klient har en standardskrifttype, hvis den skrifttype, der er angivet i stakken med skrifttypefamilier, ikke er tilgængelig. Gmail bruger f.eks. Arial, Apple Mail bruger Helvetica, og Outlook bruger Calibri.

Hvis du ikke kan lide lyden af en af disse standardskrifttyper, har vi gode nyheder – du kan vælge din fallback-skrifttype i stakken med skrifttypefamilier. 

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

Tænk på dette som en prioriteret liste over foretrukne skrifttyper. Hvis en klient ikke kan overholde dit første valg, vil den falde tilbage til den næste på din liste.

Med ovenstående skrifttypestak vil Gmail f.eks. ignorere den første skrifttype på listen, da det er en webskrifttype, der ikke understøttes i Gmail, og den skrifttype, der gengives i e-mailen, vil være Verdana. Hvis Verdana ikke understøttes på den anvendte enhed (hvilket vil være meget sjældent, da Verdana er en sikker web-skrifttype), vil enheden bruge den standard sans-serif-skrifttype for sit system, da dette er den tredje skrifttype på listen.

Sådan vælger du den rigtige fallback-skrifttype

Det er vigtigt at vælge den rigtige fallback-skrifttype, der bevarer din e-mails design, for at servere en god oplevelse for alle dine abonnenter, uanset hvilken e-mail-klient de bruger.

Fallback-skrifttyper bør være af samme type som webskrifttypen – brug en fallback-skrifttype uden serif, hvis din webskrifttype er en sans-serif-skrifttype, og en fallback-skrifttype med serif, hvis din webskrifttype også er en serif-skrifttype. Hvis du bruger den samme skrifttype, er det nemmere at bevare din e-mails design i forskellige e-mail-klienter. Du kan gå et skridt videre ved at analysere skrifttypernes x-højde.

X-højden er den lodrette højde af skrifttypen. Ideelt set bør du vælge en fallback-skrifttype, der har en lignende x-højde, så du undgår, at dit e-mail-design falder fra hinanden, når fallback-skrifttypen er i brug.

Her er et eksempel på de subtile forskelle i x-højde mellem skrifttyperne Verdana, Arial og webskrifttypen Proxima Nova. Disse subtile forskelle kan være afgørende for, om dit e-mail-design er godt eller skidt, når webskrifttyper ikke kan gengives.

CSS Font Stack har en komplet liste – inklusive operativsystemdækning – over websikre skrifttyper, der kan bruges som fallback-skrifttyper.

Undgå Faux Bold / Faux Italic

Hvis du har ledsagende fede og kursive versioner af dine webskrifttypefiler, så lad os bruge dem! Designere af skrifttyper har lagt mange tanker og kræfter i at få alle de forskellige stilarter i en skrifttype til at være helt rigtige, så det er den bedste praksis at anvende det originale skrifttypedesign i stedet for at lade e-mail-klienten eller browseren tilfældigt anvende en falsk fed eller falsk kursiv på den almindelige skrifttype.

Grundlæggende skal du IKKE gøre dette:

@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;"

Som webdesign kan du trække de ægte skrifttyper ind ved at inkludere disse stilarter i din @font-face stak, som her:

@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, trækker de forskellige stilarter forskellige skrifttyper ind, uanset skrifttype-familien. På denne måde, hvis du stiliserer din skrifttype i HTML på denne måde:

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

… så vil den ægte skrifttype “Montserrat-BoldItalic” blive hentet ind! På samme måde vil det at tilføje font-weight: bold; trække ‘Montserrat-Bold’ ind, og det at tilføje font-style: italic; vil trække ‘Montserrat-Italic’ ind.

Så, du undrer dig måske – hvorfor gøre det på denne måde i stedet for at deklarere en anden font-family for hver stil, som også trækker de ægte skrifttyper ind? Sådan ser det ud:

Du skal heller IKKE gøre dette!

@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 giver et problem. Ved at bruge font-family-navne til at gemme stilarter skabes ikke blot overdrevent kompliceret og overflødigt CSS, men det fratager også din tekst styling, hvis dine fallbacks træder i kraft. Så hvis du f.eks. ser ovenstående kode i Gmail (som ikke understøtter brugerdefinerede webskrifttyper), vil du kun se Verdana uden fed skrifttype og uden kursiv i stedet for Montserrat Bold Italic. Ved at holde din font-family og dine font-weights/font-styles adskilt, vil dine fallback-skrifttyper stadig bevare den korrekte styling.

Outlook, hvad gør du ved mig!

Med Times New Roman som standard fallback-skrifttype har Outlook traditionelt været en udfordring for e-mail-markedsføringsfolk med et hjerte for typografi. Mens Outlook 2019 – det er Microsofts nyeste version af sin desktop-e-mailklient – værdsætter de fallback-skrifttyper, der er angivet i koden, er ældre Outlook-versioner stadig en udfordring.

Hvis du bruger @font-face-importmetoden, vil Outlook 2007/10/13/16 som standard vælge Times New Roman, uanset hvilken fallback-skrifttype du har på plads. Den gode nyhed er, at der findes et velafprøvet hack, der løser dette problem.

Følgende CSS er rettet mod Outlook, som angivet med <!-> og <!->, og fortæller Outlook, at det skal bruge en anden font-stack. 

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

Brug klassen “fallback-font” i din e-mail, hvor du definerer din skrifttype-familie:

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

Og dine skrifttyper i Outlook 2007/10/13 vil falde elegant tilbage til Arial, i stedet for Times New Roman.

En anden løsning på denne fejl er at pakke @font-face-importkoden ind i en media query og skjule den for 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 vil nu simpelthen ignorere “Montserrat” i din font-family stak og læse den næste skrifttype.

Der er også en metode til at målrette den Microsoft Office-specifikke egenskab, mso-font-alt, med din valgte system-font til din @font-face-deklarationsblok. 

@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';}

Dette vil fortælle Outlook for MS Office, at den skal standardisere til din tildelte fallback-skrifttype.

Hvor du kan finde webskrifttyper

Google Fonts

Der er masser af tilgængelige webskrifttjenester, men Google Fonts er vores favorit. Tjenesten er helt gratis, og du kan downloade webskrifttyperne til din computer, hvis du laver designs i Adobe Photoshop, Sketch eller et andet designprogram.

Typekit fra Adobe

Adobe’s populære abonnementstjeneste for skrifttyper har tidligere været til ringe nytte for e-mail-designere, da Typekit var afhængig af JavaScript til at indlejre skrifttyper. Fra august 2017 gjorde Typekit det muligt at bruge webskrifttyper ved hjælp af kun CSS – der kræves ikke JavaScript – og det åbner webskrifttyper, der findes i Typekit, til brug i e-mail. Du kan finde detaljerede instruktioner om, hvordan du tilføjer Typekit-webskrifttyper til dine e-mails ved hjælp af @import, i hjælpedokumentationen til Typekit.

Mere webskrifttypetjenester

Hvis du leder efter endnu flere websteder, der tilbyder webskrifttyper med licens til brug i e-mail (for det meste mod betaling), kan du tjekke nogle af nedenstående tjenester:

  • MyFonts
  • Commercial Type
  • Font Spring
  • Font Shop
  • Du arbejder for dem
  • Village
  • Process Type Foundry

Licensering af webfonts i e-mail

Webfonts blev oprindeligt designet til udelukkende at blive brugt på websteder, så deres licensering er typisk kun til brug på websteder og mobilapplikationer. Grunden til, at mange webfonttjenester ikke tillader brug i e-mail, er, at det betragtes som distribution af skrifttypen, hvilket er i strid med mange af tjenesternes slutbrugerlicensaftale (EULA).

De leverandører af webfonts på ovenstående liste omfatter licenser til brug af webfonts i e-mail. Mange licenser opkræves dog efter antallet af månedlige åbninger, hvilket bør overvejes, når du bruger en betalt webfont-tjeneste.

Kan jeg bruge webfonts?

Der er absolut ingen skade ved at bruge webfonts som en progressiv forbedring i dine e-mails lige nu. Implementer dine fallback-skrifttyper korrekt, og skub din e-mail ind i fremtiden!

Det er værd at tage et kig på din abonnentbase for at se, hvor mange der ser dine e-mails i en e-mail-klient, der understøtter webskrifttyper. Hvis flertallet ikke gør det, ville det simpelthen ikke være din tid og indsats værd, især hvis du overvejer at bruge en betalt webfont.

Webfonts done right

For at give dig lidt inspiration til, hvad der er muligt, er her nogle af vores yndlingsmails med webfonts.

Se hele e-mailen
Se hele e-mailen
Se hele e-mailen

Glem ikke at teste

Da brugen af webfonts i e-mail stadig betragtes som lidt eksperimentel, anbefaler vi, at du tester ofte, især hvis du har implementeret webfonts i skabeloner, der måske ikke bliver opdateret regelmæssigt. Ændringer og opdateringer af e-mail-klienters renderingsmuligheder annonceres normalt ikke på forhånd og kan ske sporadisk, så det er bedst at teste regelmæssigt.

Det er værd at bemærke, at hvis du har webskrifttypen installeret på din egen computer, vil du kunne se webskrifttypen, når du tester live i en e-mail-klient på din computer – noget, du skal huske på, hvis det pludselig ser ud til, at Gmail nu understøtter webskrifttyper.

TEST TYPOGRAFI I DINE KAMPAGNER

Inspireret til at tage dit skriftspil til det næste niveau? Du skal bare sørge for at teste dine kampagner, inden du sender dem ud. Prøv Litmus gratis, og sørg for, at din typografi ser fantastisk ud i 90+ e-mail-klienter, herunder desktop, webmail og mobile enheder.

Lær mere →

Similar Posts

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.