Verkkokirjasinten perimmäinen opas

Historiallisesti oikean kirjasimen valitseminen sähköpostiin ei ole koskaan ollut kovin vaikeaa, kun otetaan huomioon, että valittavana on vain rajallinen määrä verkkoturvallisia kirjasimia. Asiat ovat kuitenkin muuttuneet. Yhä useammat sähköpostisuunnittelijat ylittävät rajoja ja omaksuvat samoja kehitystekniikoita, joita web-suunnittelijat ovat käyttäneet jo vuosia – web-fonttien käyttöönottoa sähköposteissaan.

Web-fontit antavat web-suunnittelijoille mahdollisuuden olla luovempia typografiansa suhteen, jolloin he voivat valita suunnittelussaan myös muita kuin standardifontteja.

Kuten yleensä on tapana, kun sähköpostisuunnittelun ja -kehityksen alalla murretaan uraauurtavaa tietä, yhteisömme eteenpäin suuntautuvat jäsenet toivat näitä tekniikoita ensimmäisten joukossa sähköposteihimme (ja huomiomme). Olemme valtavan kiitoksen velkaa Campaign Monitorin upealle oppaalle web-fonteista, Paul Airyn ”A Type of Email” -kirjalle ja Style Campaignille inspiraatiosta.

Verkkofonttien perimmäisessä oppaassa perehdymme yksityiskohtiin siitä, mitä web-fontit ovat ja miten sähköpostisuunnittelijat voivat ottaa ne käyttöön sähköposteissaan.

Mikä on web-fontti?

Sähköpostisuunnittelijoiden sähköposteihinsa käyttämiä fontteja on kahta erilaista tyyppiä – web-turvallisia fontteja ja web-fontteja. Tässä on näiden kahden ero:

Verkkoturvalliset fontit
Ajatella Arialia, Times New Romania, Verdanaa tai Georgiaa parhaina esimerkkeinä verkkoturvallisista fonteista. Ne ovat oletusfontteja, jotka löytyvät useimmista eri käyttöjärjestelmistä ja laitteista.

Verkkokirjasimet
Verkkokirjasimet eivät kuulu eri laitteissa ja käyttöjärjestelmissä käytettävissä oleviin oletusfontteihin, vaan ne on erityisesti suunniteltu ja lisensoitu käytettäväksi verkkosivustoilla. Pari sinulle ehkä tuttua web-fonttia ovat Open Sans ja Roboto.

Miksi web-fontit?

Markkinoijana ja suunnittelijana tiedät paineet pysyä brändin mukaisena sähköpostissa värien, muotoilun ja – kyllä – typografian suhteen. Tärkeän kopion lukitseminen kuviin on ollut sähköpostisuunnittelun vakiokäytäntö keinona pysyä brändissä ja olla luova. Tekstin ”piilottaminen” kuviin rajoittaa kuitenkin sähköpostin saavutettavuutta, koska ruudunlukuohjelmat eivät pysty lukemaan kuvassa olevaa tekstiä.

Web-fontit avaavat uusia luovuuden mahdollisuuksia typografiassa, minkä ansiosta sähköpostisuunnittelijat voivat olla luovia ja saavutettavia – ja samalla pitää kiinni brändinsä ilmeestä ja tunnelmasta.

Sähköposti- ja web-fontit

Vaikka web-fonteilla ei ole yleistä tukea, tässä ovat sähköpostiohjelmat, joissa niitä tuetaan:

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

Tuettujen sähköpostiohjelmien luettelo saattaa näyttää lyhyeltä, mutta ota rohkeutta – useimmat niistä ovat 10 suosituimman sähköpostiohjelman joukossa. Siitä on syytä olla innoissaan!

*Pro-vinkki: Huhtikuussa 2018 Gmail julkaisi päivitetyn käyttöliittymän webmail-ohjelmaansa. Tämä uusi käyttöliittymä käyttää kahta suosittua web-fonttia: Google Sans ja Roboto. Mitä tämä tarkoittaa? Huolimatta siitä, että Gmail ei tue webfontteja, jos käytät jompaakumpaa näistä webfonteista sähköposteissasi, ne todella renderöidään Gmailissa. Lisää fontit yksinkertaisesti font-family CSS-attribuuttiin, jos haluat käyttää niitä sähköpostissasi.

Löydä top 10

Sähköpostimarkkinoinnissa kaikki on kiinni yleisöstäsi. Selvitä Litmus Email Analyticsin avulla, mitkä sähköpostiohjelmat ovat suosituimpia tilaajiesi keskuudessa. Rekisteröidy ilmaiseksi!

Löydä yleisösi →

Miten upotat web-fontit sähköpostiin

Voit käyttää web-fontteja sähköposteissasi kolmella eri tavalla.

@import

Käyttäessäsi @importia voit käyttää yksinkertaisempia lähestymistapoja, kun haluat tuoda web-fontteja sähköpostiin. Sijoita seuraava koodirivi sähköpostisi <head>-osioon, yleensä <style>:n yläosaan.

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

Tässä esimerkissä tuodun fontti-kirjasintyypin nimi on ”Montserrat.”

Verkkofonttipalvelusi antaa sinulle tarvittavan URL-osoitteen. Jos isännöit fonttia itse, sinun on osoitettava URL-osoite sinne, missä web-fonttitiedostosi sijaitsee.

Tämä menetelmä on hyvin tuettu useimmissa edellä mainituissa sähköpostiohjelmissa, ja siitä puuttuu tuki vain Android 2.3:ssa (Android Gingerbread) – vanhassa Android-versiossa, jonka markkinaosuus on häviävän pieni.

<link>

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

Kuten myös @import-menetelmää käytettäessäsi, web-fonttitietokantapalvelusi määrittelemäsi href-arvon. Jos isännöit fonttitiedostoa itse, muuta tämä URL-osoite osoittamaan, missä web-fontti sijaitsee palvelimellasi. Ja haluat sijoittaa tämän koodirivin sähköpostisi <head>-osioon, lähelle yläosaa.

Menetelmä <link> toimii hieman paremmin kuin @import-menetelmä, ja sitä tukevat kaikki edellä mainitut sähköpostiohjelmat (hurraa!).

Miksi valitsisit siis yhden menetelmän toisen sijaan? @import-metodi lykkää tuotavan web-fontin lataamista, kunnes HTML, johon se on upotettu, on ladattu kokonaan. Tämä voi johtaa siihen, että web-fontin näkyminen sähköpostiviestissä kestää hieman kauemmin, kun muu sähköpostiviesti latautuu. Sitä vastoin <link>-menetelmä lataa resurssin inline, kun HTML-tiedoston koodia luetaan (ylhäältä alaspäin), mikä voi viivästyttää sähköpostin latautumista, jos web-fonttitiedostosi on erityisen suuri.

@font-face

Online-verkkofonttitietopalvelut tarjoavat yleensä viisi tiedostomuotoa valittavaksi: .eot-, .woff-, .woff2-, .svg- ja .ttf-tiedostot. .woff-muodolla on paras tuki sähköpostin käytössä, joten suosittelemme käyttämään tätä muotoa aina kun mahdollista. @font-face-menetelmä on ainoa menetelmä, jonka avulla voit erikseen valita, minkä tiedostomuodon haluat tuoda, mikä tekee siitä kaikkein luodinkestävimmän menetelmän web-fonttien käyttöönotossa.

Tyypillinen @font-face-ilmoitus web-fontin tuomiseksi sähköpostiin käyttämällä Google Fontsia valitsemamme web-fonttitietopalvelun avulla:

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

Jos käytät Google Fontsia, web-fontin URL-osoitteen löytäminen ei valitettavasti ole helppoa – sinun on hypättävä muutamien esteiden läpi.

1. Valitse Google Fonts. Etsi haluamasi web-fontti.
Kun olet löytänyt ja valinnut sen, näytön alareunaan ilmestyy pieni musta palkki. Kun napsautat sitä, näet tällaisen ruudun:

2. Kopioi web-fontin URL-osoite (korostettu edellä) ja liitä se joko Safarin tai Internet Explorerin osoitepalkkiin.
Käytämme tässä menetelmässä Safaria tai Internet Exploreria, koska Google Fonts käyttää selaimen tunnistusta päättäessään, minkä tyyppistä fonttitiedostoa tarjotaan. Tässä menetelmässä haluamme käyttää .woff-tiedostotyyppiä. Käyttämällä Google Chromea .woff2-fonttitiedostotyyppiä, joka tarjoillaan selaimessa, jolla on rajoitettu tuki. Kiitos Elliot Rossille tästä ylimääräisestä oivalluksesta!

Kun sivu on latautunut, näet sivulla CSS-julistuksen:

3. Kopioi tämä CSS ja liitä se sähköpostisi <style>-osioon.
Vaikkakin tätä menetelmää pidetään luodinkestävimpänä, web-fonttipalvelun toimittaja voi tehdä muutoksia web-fontin maahantuonnissa käytettävään suoran pääsyn osoitteeseen. Jos päätät käyttää tätä menetelmää, testaa sähköpostisi säännöllisesti varmistaaksesi, että web-fontit edelleen renderöityvät ajan mittaan.

Litmusissa @font-face-menetelmä on paras tapa tuoda web-fontteja sähköposteihimme.

Kaikki kunnia tästä web-fonttien tuontimenetelmästä kuuluu sähköpostin esteettömyyden puolestapuhujalle Paul Airylle, kuten aiemmassa Type: E:n uutiskirjeessä (joka sinun pitäisi ehdottomasti tilata, jos et jo ole).

Webfonttien käyttäminen sähköpostissa

Kun web-fontti on tuotu, sen käyttäminen sähköpostissa on yhtä helppoa kuin web-turvallisen fontin käyttäminen käyttämällä tuontimenetelmässä määriteltyä font-family-nimeä:

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

Varautumisfontin valitseminen

Webfontteja käytettäessä on välttämätöntä käyttää varautumisfonttia web-turvallista fonttia niitä sähköpostiohjelmia varten, jotka eivät tue web-fontteja.

Vakioverkkoturvalliset fontit

Kullakin sähköpostiohjelmalla on oletusfontti, jos font-family-pinossa mainittu fontti ei ole käytettävissä. Esimerkiksi Gmail käyttää Arialia, Apple Mail Helveticaa ja Outlook Calibria.

Jos et pidä mistään näistä oletusfonteista, meillä on hyviä uutisia – voit valita varafontin font-family-pinosta.

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

Ajattele tätä priorisoiduksi listaksi suosikkifonteista. Jos asiakas ei voi noudattaa ykkösvalintaasi, se turvautuu luettelossasi seuraavana olevaan fonttiin.

Yllä olevan font-family-pinon avulla Gmail ei esimerkiksi huomioi luettelon ensimmäistä fonttia, koska se on web-fontti, jota Gmail ei tue, ja sähköpostiviestissä renderöity fontti on Verdana. Jos Verdana ei ole tuettu käytetyssä laitteessa (mikä on hyvin harvinaista, koska Verdana on turvallinen web-fontti), laite käyttää järjestelmän oletusarvoista sans-serif-fonttia, joka on luettelon kolmas fontti.

Oikean varafontin valinta

Oikean varafontin valinta, joka säilyttää sähköpostisi ulkoasun, on avainasemassa, kun haluat tarjota loistavan käyttökokemuksen kaikille tilaajillesi riippumatta siitä, mitä sähköpostiohjelmaa he käyttävät.

Varausfonttien tulisi olla samantyyppisiä kuin web-fontti – käytä sans-serif-varausfonttia, jos web-fontti on sans-serif-fontti, ja serif-varausfonttia, jos web-fontti on myös serif-fontti. Samantyylisen fontin käyttäminen auttaa säilyttämään sähköpostisi ulkoasun eri sähköpostiohjelmissa. Voit mennä askeleen pidemmälle analysoimalla fonttien x-korkeutta.

X-korkeus on fontin pystysuora korkeus. Ihannetapauksessa kannattaa valita varafontti, jolla on samanlainen x-korkeus, jotta sähköpostin ulkoasu ei hajoa, kun varafontti on käytössä.

Tässä on esimerkki fonttien Verdana, Arial ja web-fontti Proxima Nova välisistä hienovaraisista x-korkeuseroista. Näillä hienovaraisilla eroilla voi olla ratkaiseva merkitys sähköpostisuunnittelun onnistumisessa tai epäonnistumisessa, kun web-fontit eivät renderöi.

CSS Font Stackissa on täydellinen luettelo – mukaan lukien käyttöjärjestelmän kattavuus – web-turvallisista fonteista, joita voidaan käyttää varafontteina.

Välttää Faux Bold / Faux Italic

Jos sinulla on mukana olevat lihavoidut ja kursivoidut versiot web-fonttitiedostoistasi, niin käytä niitä! Kirjasinsuunnittelijat ovat nähneet paljon ajatusta ja vaivaa saadakseen fontin kaikki eri tyylit juuri oikeiksi, joten on parasta soveltaa alkuperäistä kirjasinsuunnittelua sen sijaan, että sähköpostiohjelma tai selain antaisi sähköpostin tai selaimen soveltaa sattumanvaraisesti faux boldia tai faux italicia tavalliseen fonttiin.

PERUSTELUT: ÄLÄ tee näin:

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

Verkkosuunnittelun tapaan voit vetää aidot fontit mukaan sisällyttämällä nämä tyylit @font-face-pinoon, esimerkiksi näin:

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

Kuten näet, eri tyylit vetävät eri fontteja font-familystä riippumatta. Tällä tavoin, jos tyylittelet fontin HTML:ssä näin:

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

…niin se vetää sisään aidon ’Montserrat-BoldItalic’ fontin! Samoin pelkkä font-weight: bold; vetää sisään ’Montserrat-Bold’ ja pelkkä font-style: italic; vetää sisään ’Montserrat-Italic’.

Voi olla, että ihmettelet – miksi teet sen näin sen sijaan, että ilmoittaisit kullekin tyylille eri font-family, joka myös vetää sisään aidot fontit? Tältä se näyttää:

Älä tee myöskään näin!

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

Tämä aiheuttaa ongelman. Font-family-nimien käyttäminen tyylien tallentamiseen ei ainoastaan luo liian monimutkaista ja turhaa CSS:ää, vaan se myös riistää tekstistäsi muotoilun, jos fallbackit astuvat voimaan. Jos esimerkiksi katsot yllä olevaa koodia Gmailissa (joka ei tue mukautettuja verkkokirjasimia), näet Montserrat Bold Italic -kirjasimen sijasta vain lihavoimattoman ja kursivoimattoman Verdanan. Pitämällä font-family ja fonttipainot/fonttityylit erillään, fallback-fontit säilyttävät silti oikean muotoilun.

Outlook, mitä sinä teet minulle!

Times New Romanin ollessa oletusarvoisesti fallback-fontti, Outlook on perinteisesti ollut haaste sähköpostimarkkinoijille, joilla on typografian sydän. Vaikka Outlook 2019 – se on Microsoftin uusin versio sen työpöydän sähköpostiohjelmasta – kunnioittaa koodissa määritettyjä varafontteja, vanhemmat Outlook-versiot ovat edelleen haaste.

Jos käytät @font-face-tuontimenetelmää, Outlook 2007/10/13/16 käyttää oletusarvoisesti Times New Romania riippumatta siitä, mikä varafontti sinulla on käytössäsi. Hyvä uutinen on, että on olemassa hyvin testattu hakkerointi, joka ratkaisee tämän ongelman.

Seuraava CSS kohdistuu Outlookiin, kuten <!-> ja <!-> merkitään, ja käskee Outlookia käyttämään eri fonttipakkaa.

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

Käytä sähköpostissasi luokkaa ”fallback-font” missä tahansa määrittelet font-family:

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

Ja Outlook 2007/10/13:n fontit laskevat armollisesti Arialiin Times New Romanin sijaan.

Toinen ratkaisu tähän bugiin on kietoa @font-face-tuontikoodi mediakyselyyn, jolloin se piilotetaan Outlookilta:

@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 jättää nyt yksinkertaisesti huomioimatta ”Montserrat” font-family-pinossa ja lukee seuraavaa fonttia.

On olemassa myös menetelmä, jossa kohdennat Microsoft Officen spesifisen ominaisuuden mso-font-alt valitsemallasi system-fontilla @font-face-ilmoituslohkoon.

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

Tämä kertoo MS Office Outlookille, että se käyttää oletusarvoisesti määrittelemääsi varafonttia.

Where to find web fonts

Google Fonts

Verkkofonttipalveluita on tarjolla runsaasti, mutta Google Fonts on suosikkimme. Palvelu on täysin ilmainen, ja voit ladata web-fontit omalle koneellesi, jos mallinnat suunnitelmia Adobe Photoshopissa, Sketchissä tai muussa suunnitteluohjelmistossa.

Typekit by Adobe

Adoben suositusta fonttitilauspalvelusta ei ole aiemmin ollut juurikaan hyötyä sähköpostisuunnittelijoille, sillä Typekit nojautui JavaScriptiin fonttien upottamisessa. Elokuusta 2017 alkaen Typekit mahdollisti web-fonttien käytön pelkällä CSS:llä – JavaScriptiä ei tarvita – ja se avaa Typekitistä löytyvät web-fontit käytettäväksi sähköpostissa. Yksityiskohtaiset ohjeet Typekit-verkkofonttien lisäämisestä sähköposteihin @importin avulla löydät Typekitin ohjeasiakirjoista.

Lisäyksiä webfonttipalveluista

Jos etsit vielä lisää sivustoja, jotka tarjoavat webfontteja lisensoituna käytettäväksi sähköpostissa (useimmiten maksullisesti), tutustu alla oleviin palveluihin:

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

Webfonttien lisensointi sähköpostissa

Webfontit suunniteltiin alunperin käytettäväksi ainoastaan verkkosivustoilla, joten niiden lisensointi on tyypillisesti tarkoitettu käytettäväksi vain verkkosivustoilla ja mobiilisovelluksissa. Syy siihen, miksi monet webfonttipalvelut eivät salli käyttöä sähköpostissa, on se, että sitä pidetään fontin jakamisena, mikä on vastoin monien palveluiden loppukäyttäjän lisenssisopimuksia (EULA).

Yllä olevassa luettelossa olevat webfonttien toimittajat sisältävät lisenssejä webfonttien käyttöön sähköpostissa. Monista lisensseistä veloitetaan kuitenkin kuukausittaisten avausten määrän mukaan, mikä on otettava huomioon, kun käytetään maksullista webfonttipalvelua.

Voinko käyttää webfontteja?

Ei ole mitään haittaa käyttää webfontteja progressiivisena lisäyksenä sähköposteissasi juuri nyt. Toteuta varafontit oikein ja työnnä sähköpostisi tulevaisuuteen!

On syytä tarkastella tilaajakantaasi, kuinka moni katsoo sähköpostisi web-fontteja tukevalla sähköpostiohjelmalla. Jos suurin osa ei ole, se ei yksinkertaisesti ole aikasi ja vaivasi arvoista, varsinkin jos harkitset maksullisen web-fontin käyttöä.

Web-fontit oikein tehtynä

Antaaksemme sinulle hieman inspiraatiota siitä, mikä on mahdollista, tässä on muutama suosikkisähköpostimme, joissa käytetään web-fontteja.

Älkää unohtako testata

Koska web-fonttien käyttöä sähköpostissa pidetään vielä hieman kokeellisena, suosittelemme testaamaan niitä usein, etenkin jos olet ottanut web-fontit käyttöön malleissa, joita ei välttämättä päivitetä säännöllisesti. Sähköpostiohjelmien renderöintiominaisuuksien muutoksista ja päivityksistä ei yleensä ilmoiteta etukäteen, ja ne voivat tapahtua satunnaisesti, joten on parasta testata säännöllisesti.

On syytä huomata, että jos sinulla on web-fontti asennettuna omalle tietokoneellesi, näet web-fontin testatessasi sitä livenä sähköpostiohjelmassa omalla koneellasi – tämä kannattaa pitää mielessä siltä varalta, että yhtäkkiä näyttää siltä, että Gmail tukee nyt web-fontteja.

TESTAA TYYPOGRAFIAA KAMPANJASI

Kannattaa viedä kirjoitusasujen käyttötaitosi seuraavalle tasolle? Muista vain testata kampanjasi ennen niiden lähettämistä. Kokeile Litmusta ilmaiseksi ja varmista, että typografiasi näyttää upealta yli 90 sähköpostiohjelmassa, mukaan lukien työpöytä-, webmail- ja mobiililaitteet.

Learn more →