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.
- 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.
- 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ą. - 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.
- 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
orserif
). - 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ć
Kliknij, jeśli chcesz wejść w interakcję z infografiką.