A webes betűtípusok végső útmutatója

Történelmileg sosem volt túl nehéz kiválasztani a megfelelő betűtípust az e-mailekhez, tekintve, hogy a webes biztonságos betűtípusok száma korlátozott. A dolgok azonban megváltoztak. Egyre több e-mail tervező feszegeti a határokat, és ugyanazokat a fejlesztési technikákat alkalmazza, amelyeket a webdesignerek már évek óta használnak – webes betűtípusok beépítését az e-mailjeikbe.

A webes betűtípusok lehetővé teszik a webdesignerek számára, hogy kreatívabbak legyenek a tipográfiájukkal, és nem szabványos betűtípusokat is választhassanak a terveikhez.

Amint általában az e-mail tervezés és fejlesztés terén új utakat törve, a közösség előrelátó tagjai voltak az elsők, akik ezeket a technikákat a postaládáinkba (és a figyelmünkbe) juttatták. Hatalmas köszönettel tartozunk a Campaign Monitor fantasztikus útmutatójának a webes betűtípusokról, Paul Airy “A Type of Email” című könyvének és a Style Campaignnek az inspirációért.

A webes betűtípusok végső útmutatójában beleássuk magunkat a részletekbe, hogy mik azok a webes betűtípusok, és hogyan alkalmazhatják őket az e-mail tervezők az e-mailjeikben.

Mi az a webes betűtípus?

A levéltervezők számára kétféle betűtípus áll rendelkezésre az e-mailjeikhez – a webbiztonsági betűtípusok és a webes betűtípusok. Íme a különbség a kettő között:

Webbiztonságos betűtípusok
Gondoljon az Arial, Times New Roman, Verdana vagy Georgia betűtípusokra, mint a webbiztonságos betűtípusok legjobb példáira. Ezek az alapértelmezett betűtípusok, amelyek a különböző operációs rendszerek és eszközök többségén megtalálhatóak.

Webes betűtípusok
A webes betűtípusok nem a különböző eszközökön és operációs rendszereken elérhető alapértelmezett betűtípusok között találhatók, hanem kifejezetten a webhelyeken való használatra tervezték és engedélyezték őket. Néhány webes betűtípus, amelyet már ismerhet, az Open Sans és a Roboto.

Miért webes betűtípusok?

Marketingesként és tervezőként ismeri a nyomást, hogy az e-mailekben, a színek, a design és – igen – a tipográfia terén a márkának megfelelő maradjon. A fontos szövegek képekbe zárása bevett gyakorlat volt az e-mailek tervezésében, hogy a márkán belül maradjunk és kreatívak legyünk. A szöveg képekben való “elrejtése” azonban korlátozza az e-mail hozzáférhetőségét, mivel a képernyőolvasók nem tudják elolvasni a képen lévő szöveget.

A webes betűtípusok új utakat nyitnak a tipográfia kreativitásában, lehetővé téve az e-mail tervezők számára, hogy kreatívak és hozzáférhetőek legyenek – és ragaszkodjanak a márka megjelenéséhez.

Email és webes betűtípusok

Míg a webes betűtípusok nem rendelkeznek univerzális támogatással, itt vannak azok az e-mail kliensek, ahol támogatottak:

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

A támogatott e-mail kliensek listája rövidnek tűnhet, de vigyázzon – a legtöbbjük a 10 legnépszerűbb e-mail kliens között van. Ez már valami, amiért érdemes izgatottnak lenni!

*Protipp: 2018 áprilisában a Gmail frissített felületet adott ki a webmail klienséhez. Ez az új felület két népszerű webes betűtípust használ: Google Sans és Roboto. Mit jelent ez? Annak ellenére, hogy a Gmail nem támogatja a webes betűtípusokat, ha bármelyik webes betűtípust használja az e-mailekben, azok valóban megjelenítik a Gmailben. Egyszerűen adja hozzá a betűtípusokat a font-family CSS-attribútumhoz, ha használni szeretné őket az e-mailben.

Fedezze fel a top 10-et

Az e-mail marketingben minden a célközönségről szól. A Litmus Email Analytics segítségével felfedezheti, hogy mely e-mail kliensek a legnépszerűbbek a feliratkozói körében. Regisztráljon ingyen!

Fedezze fel közönségét →

Hogyan ágyazza be a webes betűtípusokat e-mailbe

Három fő megközelítést alkalmazhat, amikor webes betűtípusokat használ e-mailjeiben.

@import

A @import használata az egyik egyszerűbb megközelítés a webes betűtípusok e-mailbe történő importálásához. Helyezze a következő kódsort az e-mail <head> részébe, általában a <style> tetejére.

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

Ebben a példában az importált betűtípus neve “Montserrat.”

A webes betűtípus-szolgáltatás megadja a szükséges URL-t. Ha maga tárolja a betűtípust, akkor az URL-t arra kell mutatnia, ahol a webes betűtípusfájlja található.

Ezt a módszert a legtöbb fenti e-mail kliens jól támogatja, és csak az Android 2.3 (Android Gingerbread) nem támogatja – egy régi Android-verzió, amelynek eltűnőben van a piaci részesedése.

<link>

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

A @import módszerhez hasonlóan a webes betűtípus-szolgáltatás határozza meg a href értékét. Ha te magad hosztolod a betűtípusfájlt, változtasd meg ezt az URL-címet úgy, hogy arra mutasson, ahol a webes betűtípus a szervereden található. Ezt a kódsort pedig az e-mail <head> részébe, az e-mail tetejéhez közel kell elhelyeznie.

A <link> módszer valamivel jobban teljesít, mint az @import módszer, és a fenti e-mail kliensek mindegyike támogatja (hurrá!).

Miért választja tehát az egyik módszert a másik helyett? Az @import módszer elhalasztja az importált webes betűtípus betöltését, amíg a beágyazott HTML teljesen be nem töltődik. Ez azt eredményezheti, hogy a webes betűtípus egy kicsit tovább tart, amíg az e-mailben megjelenik, míg az e-mail többi része betöltődik. Ezzel szemben a <link> módszer a HTML-fájl kódjának olvasásakor (fentről lefelé) soron belül tölti be az erőforrást, ami késleltetheti az e-mail betöltését, ha a webes betűtípus fájl különösen nagy.

@font-face

A webes betűtípus-szolgáltatások általában öt fájlformátum közül választhat: .eot, .woff, .woff2, .svg és .ttf. A .woff formátum rendelkezik a legjobb támogatással e-mailben, ezért javasoljuk, hogy amikor csak teheti, ezt a formátumot használja. Az @font-face módszer az egyetlen módszer, amely lehetővé teszi, hogy konkrétan kiválaszd, milyen fájlformátumot szeretnél importálni, így ez a leggolyóállóbb módszer a webes betűtípusok implementálásához.

Itt egy tipikus @font-face deklaráció egy webes betűtípus e-mailbe történő importálásához a Google Fonts mint választott webes betűtípus-szolgáltatás használatával:

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

Sajnos, ha a Google Fonts-ot használja, nem könnyű megtalálni egy webes betűtípus URL-címét – van néhány akadály, amin át kell ugrania.

1. Keresse meg a használni kívánt webes betűtípust.
Mihelyt megtalálta és kiválasztotta, egy kis fekete sáv jelenik meg a képernyő alján. Ha rákattint, egy ehhez hasonló képernyő jelenik meg:

2. Másolja ki a webes betűtípus URL-címét (fentebb kiemelve), és illessze be a Safari vagy az Internet Explorer címsorába.
Ezzel a módszerrel a Safarit vagy az Internet Explorert használjuk, mivel a Google Fonts a böngésző felismerését használja annak eldöntésére, hogy melyik betűtípusú fájltípust szolgálja ki. Ehhez a módszerhez a .woff fájltípust szeretnénk használni. A Google Chrome használatával a .woff2 betűtípus fájltípust fogja kiszolgálni a böngésző, amely korlátozott támogatással rendelkezik. Köszönet Elliot Rossnak ezért a plusz betekintésért!

Az oldal betöltése után egy CSS deklarációt fog látni az oldalon:

3. Másolja ki ezt a CSS-t, és illessze be az e-mail <style> szakaszába.
Míg ez a módszer tekinthető a leggolyóállóbbnak, a webes betűtípus szolgáltatás szállítója módosíthatja a webes betűtípus importálásához használt közvetlen elérési URL-t. Ez a módszer a leggolyóállóbbnak tekinthető, a webes betűtípus szolgáltatója változtathat a webes betűtípus importálásához használt közvetlen elérési URL-en. Ha ezt a módszert választja, rendszeresen tesztelje az e-mailt, hogy a webes betűtípusok idővel továbbra is megjelenjenek.

A Litmusnál az @font-face módszer a webes betűtípusok e-mailekbe történő importálásának a legjobb módja.

A webes betűtípusok importálásának e módszerét Paul Airy, az e-mail akadálymentesítés szószólójának köszönhetjük, amint azt egy korábbi Type: E hírlevélben (amelyre mindenképpen fel kell iratkoznod, ha még nem tetted meg).

A webes betűtípusok használata e-mailben

Amikor a webes betűtípus importálva van, a használata e-mailben olyan egyszerű, mint egy webes biztonságos betűtípus használata, az importálási módszerben meghatározott font-family név használatával:

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

Ellenső betűtípus kiválasztása

A webes betűtípusok használatakor elengedhetetlen, hogy legyen egy tartalék webes biztonságos betűtípus azon e-mail kliensek számára, amelyek nem támogatják a webes betűtípusokat.

Egy alapértelmezett webes biztonságos betűtípus

Minden e-mail kliensnek van egy alapértelmezett betűtípusa, ha a betűtípus-családban felsorolt betűtípus nem érhető el. A Gmail például az Arial-t, az Apple Mail a Helvetica-t, az Outlook pedig a Calibri-t használja.

Ha egyik alapértelmezett betűtípus sem tetszik, van egy jó hírünk: a font-family stackben kiválaszthatja a tartalék betűtípust.

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

Gondoljon erre úgy, mint a preferált betűtípusok rangsorolt listájára. Ha egy ügyfél nem tud megfelelni az első számú választásodnak, akkor a listán következőre esik vissza.

A fenti font-family stack használatával például a Gmail figyelmen kívül hagyja a lista első betűtípusát, mivel ez egy webes betűtípus, amelyet a Gmail nem támogat, és az e-mailben megjelenített betűtípus a Verdana lesz. Ha a Verdana nem támogatott a használt eszközön (ami nagyon ritka lenne, mivel a Verdana egy webes biztonságos betűtípus), az eszköz a rendszer alapértelmezett sans-serif betűtípusát fogja használni, mivel ez a harmadik betűtípus a listában.

Hogyan válasszuk ki a megfelelő tartalék betűtípust

A megfelelő tartalék betűtípus kiválasztása, amely megőrzi az e-mail designját, kulcsfontosságú ahhoz, hogy nagyszerű élményt nyújtson minden feliratkozójának, függetlenül attól, hogy melyik e-mail klienst használják.

A tartalék betűtípusnak ugyanolyan típusúnak kell lennie, mint a webes betűtípusnak – használjon sans-serif tartalék betűtípust, ha a webes betűtípusa sans-serif betűtípus, és serif tartalék betűtípust, ha a webes betűtípusa is serif betűtípus. Az azonos stílusú betűtípus használata segít megőrizni az e-mail dizájnját a különböző e-mail kliensekben. Egy lépéssel tovább mehet a betűtípusok x-magasságának elemzésével.

Az x-magasság a betűtípus függőleges magassága. Ideális esetben olyan tartalék betűtípust választ, amelynek hasonló x-magassága van, hogy megakadályozza, hogy az e-mail dizájnja szétessen, amikor a tartalék betűtípust használja.

Itt egy példa a Verdana, az Arial és a Proxima Nova webes betűtípusok közötti finom x-magasságbeli különbségekre. Ezek a finom különbségek jelenthetik a különbséget az e-mailek tervezésében, ha a webes betűtípusok nem renderelnek.

A CSS Font Stack egy teljes listát tartalmaz – beleértve az operációs rendszer lefedettségét is – a tartalék betűtípusként használható webes biztonságos betűtípusokról.

A Faux Bold / Faux Italic elkerülése

Ha vannak kísérő félkövér és dőlt betűs változatai a webes betűtípusfájloknak, akkor használjuk őket! A betűtípusok tervezői rengeteg gondolatot és erőfeszítést fektettek abba, hogy a betűtípus különböző stílusait pontosan eltalálják, ezért a legjobb gyakorlat, ha az eredeti betűtípustervet alkalmazzuk, és nem hagyjuk, hogy az e-mail kliens vagy a böngésző véletlenszerűen faux boldot vagy faux dőlt betűt alkalmazzon a normál betűtípusra.

Lényegében ezt NE tedd:

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

A webdesignhoz hasonlóan a valódi betűtípusokat is behúzhatod, ha ezeket a stílusokat beilleszted a @font-face verembe, például így:

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

Amint látod, a különböző stílusok a betűtípus-formától függetlenül különböző betűtípusokat húznak be. Így, ha a HTML-ben így stilizálod a betűtípust:

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

…akkor a valódi ‘Montserrat-BoldItalic’ betűtípust fogja behúzni! Hasonlóképpen, csak a font-weight: bold; hozzáadásával a ‘Montserrat-Bold’, és csak a font-style: italic; hozzáadásával a ‘Montserrat-Italic’ fog bejönni.

Azt kérdezheted, hogy miért csinálod így, ahelyett, hogy minden stílushoz más font-family-t deklarálnál, ami szintén a valódi betűtípusokat vonja be? Ez így néz ki:

Ne csináld ezt sem!

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

Ez problémát jelent. A font-family nevek használata a stílusok tárolására nemcsak túlságosan bonyolult és redundáns CSS-t hoz létre, hanem a szöveged stílusától is megfosztja, ha a fallbackek beindulnak. Így például – ha a fenti kódot a Gmailben nézed (amely nem támogatja az egyéni webes betűtípusokat), akkor a Montserrat Bold Italic helyett csak a Verdana betűtípust fogod látni vastagítás nélkül, ékezet nélkül. A betűtípus-család és a betűsúlyok/betűstílusok elkülönítésével a tartalék betűtípusok továbbra is megtartják a megfelelő stílusjegyeket.

Outlook, mit csinálsz velem!

A Times New Roman alapértelmezett tartalék betűtípussal az Outlook hagyományosan kihívást jelent a tipográfiáért rajongó e-mail marketingesek számára. Míg az Outlook 2019 – ez a Microsoft asztali e-mail kliensének legújabb verziója – tiszteletben tartja a kódban megadott tartalék betűtípusokat, a régebbi Outlook verziók még mindig kihívást jelentenek.

Ha az @font-face importálási módszert használja, az Outlook 2007/10/13/16 alapértelmezés szerint a Times New Roman betűtípust fogja használni, függetlenül attól, hogy milyen tartalék betűtípust használ. A jó hír az, hogy van egy jól tesztelt hack, amely megoldja ezt a problémát.

A következő CSS az Outlookot célozza, ahogyan azt a <!-> és <!-> jelöli, és azt mondja az Outlooknak, hogy egy másik font-stacket használjon.

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

A “fallback-font” osztályt használja az e-mailben, bárhol is határozza meg a font-family-t:

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

És a betűtípusok az Outlook 2007/10/13-ban kegyesen vissza fognak esni Arialra, a Times New Roman helyett.

Egy másik megoldás erre a hibára, ha az @font-face importáló kódot egy médiakérdésbe csomagoljuk, elrejtve azt az Outlook elől:

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

Az Outlook mostantól egyszerűen figyelmen kívül hagyja a “Montserrat”-ot a font-family stackben, és a következő fontot olvassa.

Létezik az a módszer is, hogy a Microsoft Office-specifikus tulajdonságot, az mso-font-alt, a választott system-fonttal célozza meg az @font-face deklarációs blokkban.

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

Ez megmondja az Outlook for MS Office-nak, hogy alapértelmezés szerint a hozzárendelt tartalék betűtípust használja.

Hol találunk webes betűtípusokat

Google Fonts

Egy csomó webes betűtípus-szolgáltatás áll rendelkezésre, de a Google Fonts a kedvencünk. A szolgáltatás teljesen ingyenes, és a webes betűtípusokat letöltheti a számítógépére, ha az Adobe Photoshopban, a Sketchben vagy más tervezőszoftverben készít terveket.

Typekit by Adobe

Az Adobe népszerű betűtípus-előfizetési szolgáltatása a múltban kevéssé volt hasznos az e-mail tervezők számára, mivel a Typekit a betűtípusok beágyazásához JavaScriptre támaszkodott. 2017 augusztusától a Typekit lehetővé tette a webes betűtípusok használatát kizárólag CSS használatával – nem szükséges JavaScript -, és ez megnyitja a Typekitben található webes betűtípusokat az e-mailben való használatra. A Typekit súgó dokumentációjában részletes utasításokat talál arra vonatkozóan, hogyan adhat hozzá Typekit webes betűtípusokat az e-mailekhez az @import használatával.

Még több webes betűtípus-szolgáltatás

Ha még több olyan webhelyet keres, amelyek e-mailben való használatra engedélyezett webes betűtípusokat kínálnak (többnyire fizetős alapon), nézzen meg néhányat az alábbi szolgáltatások közül:

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

A webes betűtípusok engedélyezése e-mailben

A webes betűtípusokat eredetileg kizárólag weboldalakon való használatra tervezték, ezért licencelésük jellemzően csak weboldalakon és mobilalkalmazásokban való használatra vonatkozik. Sok webes betűtípus-szolgáltatás azért nem engedélyezi az e-mailben való használatot, mert ez a betűtípus terjesztésének minősül, ami sok szolgáltatás végfelhasználói licencszerződésével (EULA) ellentétes.

A fenti listában szereplő webes betűtípus-szolgáltatók engedélyezik a webes betűtípusok e-mailben való használatát. Sok licenc azonban a havi megnyitások száma alapján kerül felszámításra, amit figyelembe kell venni, ha fizetős webes betűtípus-szolgáltatást vesz igénybe.

Használhatok webes betűtípusokat?

A webes betűtípusok progresszív fejlesztésként történő használata az e-mailekben jelenleg egyáltalán nem árt. Implementálja megfelelően a tartalék betűtípusokat, és tolja az e-maileket a jövőbe!

Megéri megnézni az előfizetői bázisát, hogy hányan tekintik meg az e-mailjeit olyan e-mail kliensben, amely támogatja a webes betűtípusokat. Ha a többség nem, akkor egyszerűen nem éri meg az időt és az erőfeszítést, különösen, ha fizetős webes betűtípus használatát fontolgatja.

Webes betűtípusok jól megcsinálva

Azért, hogy egy kis inspirációt adjunk a lehetőségekhez, íme néhány kedvenc webes betűtípusokat tartalmazó e-mailünk.

Ne felejtsen el tesztelni

Mivel a webes betűtípusok e-mailben való használata még kissé kísérleti jellegűnek számít, javasoljuk, hogy gyakran teszteljen, különösen akkor, ha olyan sablonokban telepített webes betűtípusokat, amelyeket esetleg nem frissítenek rendszeresen. Az e-mail kliensek renderelési képességeinek változásait és frissítéseit általában nem jelentik be előre, és ezek szórványosan történhetnek, ezért a legjobb, ha rendszeresen tesztel.

Érdemes megjegyezni, hogy ha a webes betűtípus telepítve van a saját számítógépén, akkor a webes betűtípust a saját számítógépén lévő e-mail kliensben történő éles teszteléskor is látni fogja – ezt érdemes észben tartani, ha hirtelen úgy tűnik, hogy a Gmail már támogatja a webes betűtípusokat.

TESZTELJEN TÍPOGRAFIÁT A KAMPÁNYOKBAN

Újabb szintre szeretné emelni a betűkészletét? Csak ne felejtse el tesztelni a kampányait, mielőtt elküldi őket. Próbálja ki ingyenesen a Litmus-t, és győződjön meg róla, hogy tipográfiája több mint 90 e-mail kliensben, köztük asztali, webmail és mobil eszközökön is lenyűgözően néz ki.

Tudjon meg többet →