Marketing e-mailowy i automatyzacjaInfografiki marketingowe

Bezpieczne czcionki e-mailowe i najlepsze praktyki dotyczące czcionek HTML w wiadomościach e-mail

Wszyscy słyszeliście moje skargi dotyczące braku postępów w obsłudze poczty e-mail na przestrzeni lat, więc nie będę spędzać (za dużo) czasu na narzekaniu na ten temat. Chciałbym tylko, aby jeden duży klient poczty e-mail (aplikacja lub przeglądarka) wyłamał się z pakietu i próbował w pełni obsługiwać najnowsze wersje HTML i CSS. Nie mam wątpliwości, że firmy wydają dziesiątki milionów dolarów na udoskonalanie swoich e-maili.

Dlatego fantastycznie jest mieć firmy takie jak Uplers, które są na bieżąco z każdym aspektem projektowania wiadomości e-mail. W najnowszej infografice zespół przeprowadzi Cię przez typografię oraz sposoby wykorzystania różnych czcionek i ich charakterystyki, aby dostosować Twoje e-maile.

Używanie niestandardowych czcionek w wiadomościach e-mail

Używanie czcionek zewnętrznych może być nieco trudniejsze niż w przypadku standardowego projektowania stron internetowych ze względu na różną obsługę w różnych klientach poczty e-mail. Jednak nadal możliwe jest włączenie zewnętrznych czcionek do wiadomości e-mail dla klientów, którzy je obsługują, zapewniając jednocześnie czcionki zastępcze dla tych, którzy tego nie robią.

60% klientów poczty e-mail obsługuje teraz niestandardowe czcionki używane w projektach poczty e-mail, w tym AOL Mail, natywna aplikacja pocztowa dla systemu Android (nie Gmail), Apple Mail, iOS Mail, Outlook 200, Outlook.com i poczta e-mail oparta na przeglądarce Safari.

Nadrzędni

A awaryjna czcionka to czcionka zapasowa, którą może wyświetlić klient poczty e-mail w przypadku, gdy nie może wyrenderować czcionki podstawowej (zewnętrznej). Dzięki temu Twoja wiadomość e-mail pozostanie czytelna i zachowa swój zamierzony wygląd tak wiernie, jak to możliwe, w różnych środowiskach przeglądania.

  1. Wybierz czcionkę zewnętrzną: wybierz czcionkę zewnętrzną, której chcesz użyć. Może to pochodzić z usługi takiej jak Czcionki Google lub czcionka hostowana na Twoim serwerze internetowym.
  2. Dołącz czcionkę do swojego kodu HTML e-maila: W przypadku klientów poczty e-mail, które ją obsługują, łącze do czcionki zewnętrznej zostanie umieszczone w pliku <head> HTML Twojego e-maila. Jednak wielu klientów poczty e-mail nie pozwala na łączenie się z zasobami zewnętrznymi ze względów bezpieczeństwa. Zamiast tego możesz dołączyć czcionkę jako łącze w nadziei, że klienci poczty internetowej zezwalający na łącza zewnętrzne wyrenderują ją.
  3. Określ czcionki zastępcze: wybierz bezpieczne czcionki zastępcze, które mają wygląd podobny do czcionki zewnętrznej. Powinny to być ogólne rodziny czcionek preinstalowane na większości urządzeń i systemów operacyjnych.
  4. Użyj wbudowanego CSS do definicji stylu: Ze względu na ograniczoną obsługę CSS w wielu klientach poczty e-mail, najlepszą praktyką jest używanie wbudowanego CSS do definiowania stylów, w tym rodzin czcionek.

Przykład:

Załóżmy, że chcesz użyć czcionki zewnętrznej Otwarte Sans z czcionek Google, z czcionkami Arial i bezszeryfowymi jako opcjami zastępczymi. Oto, jak możesz tego spróbować:

<!DOCTYPE html>
<html>
<head>
  <title>Email with External Font</title>
  <!-- Attempt to include external font - not supported by all email clients -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
  <div style="font-family: 'Open Sans', Arial, sans-serif; font-size: 16px;">
    Hello, this is a sample text using Open Sans, with Arial and sans-serif as fallbacks.
  </div>
</body>
</html>

Ważne uwagi:

  • Wsparcie klienta poczty e-mail: Wiele klientów poczty e-mail, szczególnie tych stacjonarnych, takich jak Microsoft Outlook, nie obsługuje czcionek zewnętrznych. Klienci sieciowi, tacy jak Gmail, mają lepszą obsługę, ale nadal istnieją ograniczenia.
  • Czcionki zastępcze: są one niezbędne, aby Twoja poczta e-mail pozostała funkcjonalna i estetyczna dla wszystkich klientów. Kolejność w font-family styl przechodzi od najbardziej preferowanej do najmniej preferowanej czcionki, kończąc na rodzinie ogólnej (sans-serif or serif).
  • Testowanie: Zawsze testuj wiadomości e-mail w formacie HTML w różnych klientach poczty e-mail, aby zobaczyć, jak są renderowane. Mogą w tym pomóc narzędzia takie jak Lakmus lub Email on Acid.

W przypadku e-maili sprzedażowych i marketingowych atrakcyjność wizualna może znacząco wpłynąć na skuteczność wiadomości. Chociaż użycie unikalnej czcionki zewnętrznej może wyróżnić Twoje e-maile, ważne jest, aby czcionki zastępcze zachowały profesjonalną i czytelną jakość niezbędną do skutecznego odbioru wiadomości.

W wiadomościach e-mail używane są 4 typy czcionek

  • Szeryfów – Czcionki szeryfowe mają znaki z zawijasami, punktami i kształtami na końcach pociągnięć. Mają formalny wygląd, dobrze rozmieszczone znaki i odstępy między wierszami, co znacznie poprawia czytelność. Najpopularniejsze czcionki w tej kategorii to Times, Georgia i MS Serif.
  • Bez Serifa – Czcionki bezszeryfowe są jak czcionki zbuntowane, które chcą zrobić własne wrażenie i nie mają żadnych fantazyjnych ozdób. Mają półformalny wygląd, który przedkłada praktyczność nad wygląd. Najpopularniejsze czcionki w tej kategorii to Arial, Tahoma, Trebuchet MS, Open Sans, Roboto i Verdana.
  • Monogram - Czcionki te, inspirowane czcionką maszynową do pisania, mają blok lub „płytkę” na końcu znaków. Chociaż rzadko są one używane w wiadomościach e-mail w formacie HTML, większość „zastępczych” wiadomości e-mail w postaci zwykłego tekstu w wiadomościach MultiMIME wykorzystuje te czcionki. Czytanie wiadomości e-mail przy użyciu tych czcionek daje wrażenie administracyjne związane z dokumentami rządowymi. Courier jest najczęściej używaną czcionką w tej kategorii.
  • Kaligrafia – Naśladując odręczne litery z przeszłości, tym, co wyróżnia te czcionki, jest płynny ruch, za którym podąża każdy znak. Czytanie tych czcionek na materialnym nośniku jest całkiem przyjemne, ale czytanie ich na ekranie cyfrowym może być raczej kłopotliwe i męczące dla oczu. Dlatego takie czcionki są najczęściej używane w nagłówkach lub logo jako obrazy statyczne.

Czcionki bezpieczne dla poczty e-mail obejmują Arial, Georgia, Helvetica, Lucida, Tahoma, Times, Trebuchet i Verdana. Czcionki niestandardowe obejmują sporo rodzin, a w przypadku klientów, którzy ich nie obsługują, konieczne jest kodowanie czcionek zastępczych. W ten sposób, jeśli klient nie będzie w stanie obsłużyć dostosowanej czcionki, powróci do czcionki, którą może obsługiwać.

Arial

font-family: Arial, sans-serif;

font-family: Georgia, serif;

Helvetica

font-family: Helvetica, sans-serif;

Lucida

font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; 

Tahoma

font-family: Tahoma, Geneva, sans-serif;

Czasy

font-family: 'Times New Roman', Times, serif;

Trebuchet

font-family: 'Trebuchet MS', sans-serif;

Verdana

font-family: Verdana, Geneva, sans-serif;

Aby uzyskać bardziej szczegółowe spojrzenie, koniecznie przeczytaj Omnisend artykuł: 

Bezpieczne czcionki e-mail a czcionki niestandardowe: co musisz o nich wiedzieć

Typografia w infografice e-mailowej
Źródło: Nadrzędni

Kliknij, jeśli chcesz wejść w interakcję z infografiką.

Douglas Karr

Douglas Karr jest dyrektorem ds. marketingu OtwórzWglądy i założycielem Martech Zone. Douglas pomógł dziesiątkom odnoszących sukcesy start-upów MarTech, pomagał w due diligence ponad 5 miliardów dolarów w przejęciach i inwestycjach Martech i nadal pomaga firmom we wdrażaniu i automatyzacji ich strategii sprzedaży i marketingu. Douglas to uznany na całym świecie ekspert ds. transformacji cyfrowej oraz MarTech i mówca. Douglas jest także autorem przewodnika dla manekinów i książki o przywództwie biznesowym.

Powiązane artykuły

Powrót do góry przycisk
Zamknij

Wykryto Adblock

Martech Zone jest w stanie udostępnić Ci te treści bez żadnych kosztów, ponieważ zarabiamy na naszej witrynie poprzez przychody z reklam, linki partnerskie i sponsoring. Będziemy wdzięczni za usunięcie blokady reklam podczas przeglądania naszej witryny.