Webes betűtípusok: Hogyan lehet tökéletesen működni e-mailben

Nagyon tudományos tanulmányomból (megfigyeltem a lányomat, amikor az elmúlt évben jelentéseket kezdett írni) megtudtam, hogy a design egyik első szempontja, amellyel az emberek valaha játszani kezdenek, a tipográfia. Amikor először kezd el jelentéseket írni, órákat tölt el azzal, hogy kitalálja a legjobb betűtípust. Oké, talán nem órák, de a legtöbb ember egy kis időt tölt rá. Mert mint a nagy márkák tudják, a tipográfia számít. És ez számít az e-mailben.

De a hozzáférhetőség is számít. Ezért ne hagyja abba az üzenet befogását képekben, és kezdje el használni az élő szöveget webes betűtípusokkal és webes betűtípusokkal. Végül is a képektől nem függő és szélesebb közönség által is olvasható szöveg nagyszerű előfizetői élményhez vezet. És mint a legjobb vásárlók –az email 36 dollárt ad vissza minden befektetett dollárért– ez nagyszerű az általános marketing stratégiájához.

Ebben a blogbejegyzésben lebontom:

Web betűtípusok és web biztonságos betűtípusok

Kétféle módon lehet élő szöveget megtenni: webes és webes betűtípusok. Bár ugyanúgy hangzanak, vannak határozott különbségek. E különbségek megértése érdekében vessünk egy pillantást a betűtípusok működésére az e-mailekben.

Az e-mail kódolásakor a betűtípust a font-family nevű CSS tulajdonság segítségével deklarálják. Ennek a betűkészletcsaládnak csak egy betűtípusneve vagy több betűtípusneve lehet – ezeket gyakran fontkészletnek nevezik. Több betűtípus nevének biztosítása biztosítja, hogy ha egy betűtípus nem működik, akkor legyen egy választott tartalék vagy tartalék betűtípus. Több betűtípus nevének felsorolása nélkül az e-mail kliens dönthet a biztonsági másolat betűtípusáról. Amikor előfizetői megnyitják az e-mailt, a böngésző beolvassa a font-family tulajdonságot, és behúzza a használni kívánt betűtípust.

Webes betűtípusok

Az internetes biztonságos betűtípusokkal a böngésző a helyi betűtípus-könyvtárból húzza ki a betűtípust. Ez azt jelenti, hogy ezek olyan betűtípusok, amelyeket már telepítettek a számítógépére. Minden számítógép előre telepített betűtípussal rendelkezik, és ezek tekinthetők webbiztonságnak. Biztonságos a használata, mert van egy igazán jó eséllyel az előfizetődnek is megvannak már.

Hátránya, hogy a webes betűtípusokhoz képest korlátozott számú web biztonságos betűtípus létezik. És elég gyakran használják őket, így kevésbé valószínű, hogy kitűnik (ha erre törekszel).

A nyilvánvaló webes biztonságos betűtípusok a következők:

• Arial
• Helvetica
• Verdana
• Grúzia
• Times New Roman

De számos más is létezik, amelyeket bizonyos fokú magabiztossággal használhat. Tehát szakítson ki a szokásos Arial vagy Helvetica betűkészletből, és keressen egy márka számára megfelelő webes betűtípust.

A webes biztonságos betűtípusok számára a legjobb forrás CSS betűtípusok. Szeretem, hogy tartalmazzák a PC-k és a Mac-ek használatának százalékos arányát az egyes betűtípusokhoz, így körülbelül tudja, hogy hány előfizetője láthatja a kívánt betűtípust, és hányan látják helyette a tartalékot.

Webes betűtípusok

A webes betűtípusokat egy szerverről szerezzük be – akár egy magunk által üzemeltetett, akár egy külső (például a Google vagy az Adobe) szerverről. Emiatt a használható betűtípusok sokfélesége sokkal nagyobb, és bármilyen számítógépen használhatók … mindaddig, amíg a böngésző vagy az e-mail kliens be tudja húzni a betűtípust. Bizonyos esetekben előfizetőjének már lehet webe a gépükre letöltött és telepített betűtípus, így ezek a betűtípusok még azokon az e-mail klienseken is működni fognak, amelyek nem támogatják a webes betűtípusokat!

Tehát bár a webes betűtípusok sokkal több változatosságot és kreatív szabadságot adnak Önnek, mégis költségekkel járnak: korlátozott e-mail kliens támogatás (amiben mélyebben belemerülök).

Miért web betűtípusok?

Szóval elgondolkodhatna azon, miért foglalkozik egyáltalán a webes betűtípusokkal? Marketingszakemberként és tervezőként ismeri a nyomást arra, hogy továbbra is a márkanév maradjon az e-mailben, színben, dizájnnal és – igen – tipográfiával. A webes betűtípusok segítségével megmutathatja márkáját anélkül, hogy a szövegéhez képekre támaszkodna.

A fontos másolatok képekbe zárása az e-mail tervezés során bevett gyakorlat volt, mint módszer a márkánál maradni és kreatív lenni. De A képekbe történő „elrejtése” korlátozza a hozzáférhetőséget e-mailt, mert a képernyőolvasók nem tudják elolvasni a képen látható szöveget.

És ha szövege van a képein, az az előfizetői élményt rontja, ha alapértelmezés szerint kikapcsolt képeik vannak. Lehet, hogy ez nem az előfizetők hatalmas része, de valójában nem lehet tudni, hogy valakinek kikapcsolt-e a képe, és megnyitja-e az e-mailt. Akkor miért nem nyújtja a lehető legjobb élményt a lehető legszélesebb közönség számára?

A webes betűtípusok a kreativitás új lehetőségeit nyitják meg a tipográfiában, lehetővé téve az e-mail tervezők számára, hogy kreatívak és hozzáférhetőek legyenek – és ragaszkodjanak márkájuk kinézetéhez és hangulatához.

Használhatok webes betűtípusokat e-mailben?

Ha még nem sejtette, a válasz igen! De – mint minden e-mailben – vannak figyelmeztetések.

E-mail kliens támogatás

A webes betűtípusok csak néhány e-mail kliensnél működnek, és ügyelni kell arra, hogy ott, ahol nem támogatják őket, a betűtípus kecsesen esik vissza.

* Az e-mail beágyazási módjától függően néhány nyereséges eredmény van, később tárgyaljuk.

Érdemes megnézni az előfizetői bázist, hogy hányan tekintik meg az e-maileket egy webes betűtípusokat támogató e-mail kliensben. Ha elegendő előfizetője van, akkor ez egy csodálatos módja annak, hogy e-mailjét még jobban megérintse.

Ha a többség nem, akkor egyszerűen nem érné meg az idejét és erőfeszítését, különösen, ha fontolóra veszi egy fizetett webes betűtípus használatát.

Mely e-mail kliensek csinálják a te előfizetők használják? A Litmus Email Analytics segítségével megtudhatja, hogy előfizetői hol nyitják meg e-mailjeit, és hogyan folytatják tevékenységüket. Szerezzen bepillantást, amelyre szüksége van az e-mailek optimalizálásához és azon túl. További információ →

Engedélyezés

A webes betűtípusokat eredetileg kizárólag weboldalakon tervezték használni, ezért licencük általában csak webhelyeken és mobilalkalmazásokban használható. Az ok, amiért számos webes betűtípus-szolgáltatás nem engedélyezte az e-mailben való felhasználást, az az oka, hogy a betűtípus terjesztésének tekintik, ami ellentétes a szolgáltatások számos végfelhasználói licencszerződésével.

Az összes webes betűtípus-szolgáltató, akikkel kapcsolatba léptünk, támogatta a betűtípusok használatát e-mailben. Minden szolgáltatónak más és más engedélye volt, amelyre szükség volt, ezért nincs szabványos módja annak, hogy a betűtípusokat e-mailben licenceljék. Ha betűtípust szeretne használni, vegye fel a kapcsolatot a céggel, hogy megtudja, pontosan miként licencelik a betűkészletet.

Hol találhatók a webes betűtípusok

Tehát mindent átgondolt, és úgy döntött, hogy meg akarja engedni a webes betűtípusokat. A végtelennek tűnő lehetőségekkel megtalálhatja a márkájának megfelelőt. De az akadálymentesítést is szem előtt kell tartani.

Egyes betűtípusok könnyebben olvashatók, mint mások.

A díszes vagy dekoratív betűtípusok, például a kijelző vagy a kézírás betűtípusai, megnehezítik a látássérült vagy diszlexiás emberek számára a különbséget a betűalakok között. A Sans-serif betűtípusokat (kibővített funkciók nélküli betűtípusok vagy betűikben göndör betűk, például Arial, Calibri, Century Gothic vagy Helvetica) és födém betűtípusokat (vastagabb vonalakkal rendelkező betűtípusok, mint a Museo Slab és a Rockwell) könnyebben hozzáférhetőnek tartják.

Íme néhány jó hely a kereséshez.

Google Fonts

Rengeteg webes betűtípus-szolgáltatás érhető el, de Google Fonts a kedvencünk. A szolgáltatás teljesen ingyenes, és letöltheti a webes betűtípusokat a számítógépére, ha az Adobe Photoshop, a Sketch vagy más tervezőszoftverben csúfolódik a terv.

Adobe betűtípusok

Typekit lett Adobe betűtípusok 2018. októberétől már támogatják a és az @import metódust is a betűtípusok webes betűtípusként történő használatához (erről bővebben a továbbiakban). A szolgáltatás nem teljesen ingyenes, de ha már rendelkezik Creative Cloud-előfizetéssel, az benne van.

Webes betűtípus-szolgáltatások

Számos egyéb webes betűtípus-szolgáltatás érhető el fizetős alapon. Győződjön meg arról, hogy megkapta a megfelelő licencet az e-mailben történő használatukhoz.

A webes licencek mellett lehet választani, hogy maga kezeli-e a betűtípust, vagy hogy a betűtípust a szolgáltató tárolja. Bizonyos webes licenceknél bizonyos összegű oldalmegtekintést fizet minden egyes e-mail esetében, amely betűszámlálást oldalnézetként tölt be, ezért mindenképpen vegye figyelembe ezt a licenc vásárlásakor.

A webes betűtípusok beágyazása az e-mailekbe

Mivel a webes betűtípusok általában nem találhatók meg valakinek a helyi eszközén, hanem máshol vannak tárolva, először be kell „ágyaznia” vagy be kell importálnia a webes betűtípust az e-mailekbe, mielőtt valóban felhasználhatja őket.

1. Szerezze be a betűtípus fájl URL-jét

Szüksége lesz a webes betűtípus URL-jére, hogy meghívhassa az e-mailbe. Webes betűtípus-szolgáltatásának meg kell adnia ezt az URL-t. De ha maga a betűtípusfájlt tárolja, szerezze be az URL-t onnan, ahol a webes betűtípus a szerveren található. Győződjön meg arról, hogy ez egy nyilvános URL, és nem egy helyi szerverről származik. Ellenkező esetben előfizetői nem férhetnek hozzá a webes betűtípushoz, és helyette egy tartalék betűtípust fognak látni.

Ha a Google Betűtípusokat használja, az URL megtalálása kissé trükkös, de nem túl nehéz. A @ font-face beágyazási módszer következő lépésében megtudhatja, hogyan.

2. Importálja a webes betűtípust a három módszer egyikével

Három módszer létezik a webes betűtípusok e-mailbe történő beágyazására (és egy figyelmeztetés, amely korlátozhatja, hogy melyik módszert használhatja). A betűtípus beágyazásának három módja a következő:

• @import
• @ font-face

Miért választaná tehát az egyik módszert a másik helyett?

Az @import metódus mindaddig elhalasztja az importált webes betűtípus betöltését, amíg a beágyazott HTML teljes mértékben be nem töltődik. Ez azt eredményezheti, hogy webes betűtípusa kissé hosszabb ideig tart, amíg megjelenik az e-mailben, míg a többi e-mail betöltődik. Ezzel szemben a metódus az erőforrást inline tölti be, amikor a HTML fájl kódját olvasják (fentről lefelé), ami késleltetheti az e-mail betöltését, ha a webes fontfájl különösen nagy.

Egy másik dolog, amelyet szem előtt kell tartani a használt módszer kiválasztásakor, az az, amit az ESP támogat.

Készíthet gyönyörű kódot, amely egész nap működik a Litmus programban, de ha az ESP megváltoztatja a kódot, mint tudjuk, a többségük, akkor semmi sem számít. Győződjön meg arról, hogy az ESP nem változtatja-e meg a kódját oly módon, hogy a betűtípusok nem működnek. A Litmusnál az ESP nem engedi, hogy az MSO feltételeket a stíluselemek köré tegyük. Tehát a és az @import metódusok nem fognak működni számunkra, mivel az Outlook nem támogatja őket megfelelően, amelyet az alábbiakban tárgyalunk.

A használatával

A módszer használata viszonylag egyszerű módszer betűtípusok beágyazására az e-mailbe. Helyezze ezt a kódsort az e-mail -jébe, a teteje közelében: