Więcej niż słowa: jak używać typografii e-mail, która mówi tomy

Serif i sans-serif to najczęściej używane kroje pisma, zwłaszcza w przypadku kopiowania treści. Dzieje się tak, ponieważ są najbardziej czytelne, a zatem dostępne. Dobrze radzą sobie w pomniejszeniu i przy niższych wagach.

Czcionki skryptów i wyświetlaczy są często zbyt skomplikowane, aby można je było kopiować. Oznacza to, że mogą być trudne do odczytania, a jeszcze trudniejsze do zeskanowania. Są więc zwykle zarezerwowane dla nagłówków.

Kroje pisma o stałej szerokości są również rzadziej używane jako kopia treści. Zamiast tego są preferowane w zasobach technicznych dla języków programowania, aby odróżnić kod od języka naturalnego.

Czcionki internetowe

Aby użyć kroju pisma w wiadomości e-mail, musi to być czcionka internetowa.

Jest to cyfrowy krój pisma, który można wywołać w kodzie. Dostępnych jest wiele darmowych czcionek internetowych, a także te, które można kupić. Najpierw jednak przyjrzyjmy się dwóm typom czcionek cyfrowych, które można wywołać w wiadomości e-mail: bezpiecznym czcionkom internetowym i czcionkom internetowym.

Bezpieczne czcionki internetowe

Są to kroje pisma instalowane w większości systemów operacyjnych, co oznacza, że ​​wywołanie tych czcionek w kodzie poczty e-mail spowoduje spójne renderowanie w klientach poczty e-mail, urządzeniach i systemach operacyjnych.

Oto bezpieczne czcionki internetowe, które są najlepiej obsługiwane na urządzeniach z systemem Windows i Mac:

Czcionki internetowe

Są to kroje pisma, które nie są dostępne we wszystkich systemach operacyjnych.

Dlatego musisz dodać dodatkowy kod do swoich e-maili, aby móc z nich korzystać. Należy również upewnić się, że w stosie czcionek znajdują się rezerwowe czcionki internetowe, ponieważ nie wszystkie klienty poczty e-mail będą renderować czcionki internetowe.

Istnieje wiele różnych miejsc, w których można znaleźć czcionki internetowe, takie jak Google Fonts, który jest darmowym zasobem i Adobe Fonts, który wymaga subskrypcji.

Aby uzyskać wyczerpujący przewodnik po czcionkach internetowych, zapoznaj się z naszym Ultimate Guide to Web Fonts.

W idealnym przypadku nie należy używać jednocześnie więcej niż dwóch stylów czcionek . Dzieje się tak częściowo dlatego, że może to być hałaśliwe i mylące, jeśli zastosujesz zbyt wiele, ale może również wydłużyć czas ładowania wiadomości e-mail, jeśli dzwonisz w wielu czcionkach internetowych.

Stylizacja czcionki

Istnieją dodatkowe style czcionek, które możemy zaprojektować i zakodować, aby zwrócić uwagę na słowa i zdania w naszej wiadomości e-mail. Ale jak i kiedy ich używamy, jest ważne, ponieważ mogą one wpływać na czytelność i dostępność naszych e-maili.

Kompletny przewodnik po dostępności poczty e-mail Odkryj szczegółowe informacje i porady, których potrzebujesz, aby pisać, projektować i kodować wiadomości e-mail, z których może korzystać każdy — niezależnie od jego umiejętności. UZYSKAJ SWÓJ PRZEWODNIK

Pogrubiony

Postaraj się ograniczyć pogrubiony tekst do kilku słów, które chciałbyś wyróżnić spośród reszty tekstu wiadomości e-mail. Dzięki temu nie będziesz mieć wielu słów kluczowych walczących o uwagę.

Chociaż pogrubiony tekst może pomóc widzącym subskrybentom zidentyfikować kluczowe informacje, tylko dzięki kodowaniu semantycznemu czytniki ekranu zauważą różnicę.

Pogrubiony tag <b> nie jest semantyczny i nie podkreśli wybranych słów dla użytkownika czytnika ekranu. Aby odzwierciedlić wrażenia, jakie otrzymują Twoi widzący użytkownicy, zawsze używaj tagu <strong>.

<p>Be <strong> bold </strong> ,<br />be <strong>brave</strong></p>

italski

Podobnie jak pogrubienie, kursywa słów dodaje akcentu, choć w mniejszym stopniu.

Podobnie jak w przypadku pogrubienia, istnieje wiele sposobów kodowania tekstu pisanego kursywą. Jednak to tag <em> jest zgodny z WCAG (nie tag <i>) i może dać czytnikom ekranu wskazówkę, jak coś należy rozumieć.

<p>I love funny English words like <em> gubbins </em> and <em>gnarly</em>.</p>

Przekreślenie

Zastosowanie tej stylizacji może zwrócić uwagę na obniżkę ceny lub aktualizację informacji.

Jednak nie jest to spójne renderowanie w klientach poczty e-mail.

Tag HTML <strike> nie jest obsługiwany przez Hey i tylko częściowo obsługiwany przez aplikacje Gmaila. Zwalczanie tego stylu za pomocą przechodzenia między wierszami CSS ma również ograniczone wsparcie w przypadku niektórych klientów poczty e-mail, które renderują wiersz tak cienki, że jest to dość trudne do zauważenia.

Warto również zauważyć, że w przypadku tego stylu występuje problem z ułatwieniami dostępu, ponieważ czytniki ekranu nie podkreślają słowa przekreśleniem, co może negatywnie wpłynąć na wrażenia osób korzystających z technologii wspomagających. Dodanie kontekstu przed każdą kwotą, takiego jak „było” i „teraz”, sprawi, że będzie to cenne doświadczenie dla wszystkich.

Najlepszym sposobem na zakodowanie przekreślenia jest użycie tagu HTML <strike>, na przykład:

<p>Was<br /><span> <strike> $200 </strike> </span></p>

Duże litery

Używanie wielkich liter może zwrócić uwagę na słowa kluczowe i pokazać hierarchię. Jednak może być również postrzegany jako krzyk, więc najlepiej używać go oszczędnie.

Innym powodem, dla którego warto traktować wielkie litery, jest to, że wpływa to na czytelność. Znamy rozpoznawanie słów po ich kształcie. Jednolity prostokątny kształt pisanego wielkimi literami tekstu spowalnia nas i ogranicza skanowalność.

Polecam również stylizowanie tekstu wielkimi literami za pomocą stylów CSS, ponieważ pisanie wielkimi literami może negatywnie wpłynąć na czytniki ekranu. W niektórych przypadkach czytnik ekranu może zwiększyć głośność, gdy napotka wielkie litery, lub może odczytywać słowa litera po literze, identyfikując je jako akronimy.

Style CSS nie są identyfikowane przez czytniki ekranu, więc będą traktować tekst pisany wielkimi literami za pomocą CSS tak samo, jak zwykły tekst.

<p>We need to shout about this <br /><span>big win</span></p>

Odstępy między literami

Dodanie odstępów między literami może nadać czcionkom trochę dodatkowego charakteru i tożsamości, a także sprawić, że niektóre style czcionek będą bardziej czytelne.

Na przykład, jeśli musisz zastosować do tekstu styl wielkich liter, dodanie niewielkiego odstępu między literami może poprawić czytelność. Jest to jednak dobra równowaga, ponieważ zbyt duże odstępy między literami zaszkodzą czytelności.

Aby uzyskać więcej informacji na temat nakazów i zakazów dotyczących odstępów między literami, zapoznaj się z tym pomocnym postem.

Wsparcie jest dobre dla klientów poczty e-mail, a tylko Outlook oferuje częściowe wsparcie. Aby dodać odstępy między literami, chcesz stylizować za pomocą CSS:

<p style=”font-family:'Helvetica Neue',Helvetica,sans-serif; font-size:18px; line-height:28px; color:#0C4B6A; text-transform:uppercase; letter-spacing: 2px ;”>A little letter spacing helps readability</p>

Wyrównanie tekstu

Z wyrównaniem tekstu jest kilka absolutnych zakazów.

Przede wszystkim wyrównany styl: spowoduje to zakotwiczenie tekstu po lewej i prawej stronie jego kontenera. Aby to osiągnąć, dodaje nierówne odstępy między słowami, co ma duży wpływ na czytelność.

Tekst wyrównany do prawej powinien być używany tylko w przypadku języków czytanych od prawej do lewej. To bardzo nienaturalne, aby języki od lewej do prawej były czytane po wyrównaniu do prawej, a także negatywnie wpłynie to na czytelność.

Tekst wyśrodkowany powinien być zarezerwowany dla nagłówków lub krótkich akapitów nie dłuższych niż 3 wiersze.

Optymalne wyrównanie jest wyrównane do lewej dla języków pisanych od lewej do prawej. Tworzy to punkt zakotwiczenia, do którego należy wracać za każdym razem, gdy czytany jest wiersz, i jest kluczowym czynnikiem w przypadku przystępnych doświadczeń z czytaniem.

Aby zakodować wyrównanie tekstu, możesz użyć atrybutu HTML align. Jednak spowoduje to również wyrównanie wszelkich innych elementów znajdujących się w komórce. Używanie CSS w znacznikach semantycznych, takich jak nagłówki lub akapity, jest najskuteczniejszym sposobem wyrównania kopii:

<p style=”font-family:Helvetica Neue,Helvetica,sans-serif; font-size:18px; line-height:28px; color:#0C4B6A; text-align:left ;”>I am left aligned</p>

Kolor

Rzeczą do zapamiętania z kolorem jest kontrast.

Kiedy wybierasz kolory tekstu, musisz upewnić się, że będą się wyróżniać na tle kolorów lub obrazów tła. Dzięki temu Twoje treści będą czytelne dla subskrybentów z różnymi wadami wzroku. Najlepszym sposobem sprawdzenia, czy masz dobry współczynnik kontrastu, jest przetestowanie kolorów w narzędziu do sprawdzania kontrastu WebAim.

Aby dokładniej zagłębić się w tworzenie, projektowanie i kodowanie dostępnej zawartości do wiadomości e-mail, zapoznaj się z sesjami Salesforce Trailhead, które nagrałem z Markiem Robbinsem, inżynierem oprogramowania w Salesforce.

Rozmiar

Tak naprawdę nie ma górnej granicy tego, jak duży jest styl tekstu. Jednak chcesz zachować słowa w jednym wierszu, aby były czytelne i nie łamały wiadomości e-mail.

Nie ma ograniczeń co do sposobu mały tekst powinien być, choć. Wszystko poniżej 14 pikseli staje się trudne do odczytania dla wielu osób, a funkcja automatycznego dostosowywania tekstu w iOS Apple Mail uruchomi się i powiększy tekst.

W Litmus rzadko zbaczamy poniżej 18px. Jeśli to zrobimy, ograniczamy się do informacji trzeciorzędnych, takich jak zastrzeżenia, przypisy i treść stopki. Pozwala to na dominację treści podstawowej.

Wysokość linii

Dobra czytelność zależy również od odpowiedniego odstępu między poszczególnymi wierszami tekstu. Za mało, a śledzenie pojedynczego wiersza tekstu może być trudne bez spojrzenia na inny wiersz. Za dużo, a każda linia może wydawać się niezależna od następnej, co sprawia, że ​​czytanie i skanowanie jest wyzwaniem.

Aby to osiągnąć, wysokość linii powinna być od 1,5 do 2 razy większa od rozmiaru tekstu. Na przykład czcionka o rozmiarze 20 pikseli powinna mieć wysokość linii 30-40 pikseli.

Wskazówki dotyczące korzystania z typografii w projektowaniu wiadomości e-mail

Stylizując treści pisane można osiągnąć wiele. Wyjaśnię cztery sposoby skutecznego wykorzystania typografii w wiadomościach e-mail, aby wywrzeć wrażenie i poprowadzić czytelników.

Pomóż subskrybentom zidentyfikować Twoją markę

Przede wszystkim możesz zastosować czcionki marki, aby pomóc subskrybentom zidentyfikować Twoją markę po otwarciu wiadomości e-mail. Niektóre czcionki są bardzo charakterystyczne, nawet poza kontekstem. Pomyśl o Walcie Disneyu i Coca-Coli.

Rozróżniaj typy komunikacji

Możesz stylizować różne rodzaje komunikacji, takie jak e-maile transakcyjne i biuletyny, używając różnych stylów czcionek. Pomaga to odbiorcom szybko zidentyfikować rodzaj otrzymanej komunikacji.

Podnieś osobowość marki

Osobowość marki można również uwydatnić dzięki kreatywnej typografii, takiej jak użycie czcionek ekranowych w obszarze bohatera, które przywołują kluczowe wiadomości.

Czy Twoja wiadomość jest poprawna? Unikaj błędów — i zadbaj o to, by Twoje e-maile miały wpływ. Wyświetlaj podgląd w ponad 100 aplikacjach i urządzeniach, sprawdzaj łącza i obrazy, testuj dostępność i nie tylko. Niepopełnić błędu

Utwórz hierarchię

Jedną z najbardziej przydatnych rzeczy, które możesz zrobić z typografią, jest tworzenie hierarchii, która pomaga prowadzić czytelnika przez e-mail. Więc spędzę tu trochę więcej czasu.

Obecnie ilość e-maili otrzymywanych przez większość subskrybentów jest znaczna. Przejście i przetrawienie wszystkich otrzymanych wiadomości jest po prostu niemożliwe. Dlatego otwarte wiadomości e-mail są często skanowane, gdy czytelnik szuka punktów kontrolnych w wiadomości e-mail, aby zrozumieć wartość.

Opierając się na stylach, rozmiarach, grubościach i kolorach czcionek, możesz pokazać, które części wiadomości e-mail są najważniejsze. Chociaż nie wierzę w „fałdę”, uważam, że ważne jest, aby dać subskrybentom możliwość zrozumienia celu wiadomości e-mail i podjęcia działań bez konieczności czytania wielu kopii.

Pozwól, że przedstawię ci to za pomocą tego przykładu:

Wykorzystuje dużą i odważną typografię w obszarze bohatera, aby zwrócić uwagę na nagłówek podsumowujący wartość lub cel wiadomości e-mail.

Jeśli celem kampanii są kliknięcia i konwersje, dalsze wezwanie do działania może pomóc czytelnikowi podjąć działanie bez konieczności korzystania z całej wiadomości e-mail.

Następnie dodaj mniej dominujące nagłówki, które rozbijają treść, aby można było łatwo zeskanować tę treść, jeśli czytelnik nie może zobowiązać się do przeczytania każdego słowa.

Marki stają się kreatywne dzięki typografii e-mail

Teraz kilka przykładów marek, które świetnie wykorzystują typografię w swoich projektach e-maili. Co je wyróżnia i przyciąga czytelników?

WILGOĆ

DAMP, biuletyn poświęcony producentom wina i sprzedawcom detalicznym, którzy koncentrują się na wytwarzaniu i sprzedaży naturalnych win, mocno opiera się na typografii, pracując z czcionkami szeryfowymi i bezszeryfowymi, aby ułożyć hierarchię treści.

Czcionki używane: Helvetica Neue z Arial awaryjnej i czcionki systemowej serif Times New Roman.

Obszar bohatera wyświetla jedyny obraz w tym długim biuletynie, z pogrubioną typografią, która nadaje ton wiadomości e-mail jako otwartej. Ten trend w projektowaniu e-maili z odważną typografią stanowi oświadczenie. Nic dziwnego, że tak wiele marek przyjęło ten styl.

To, co jest naprawdę interesujące w tym e-mailu, to fakt, że osiągnęli ten nowoczesny i czysty styl przy użyciu czcionek systemowych, a nie czcionek internetowych – co oznacza, że ​​czcionki będą renderować się podobnie we wszystkich klientach poczty e-mail.

Gotowy Mag

Ready Mag, edytor graficzny w przeglądarce, również opiera się na czcionkach systemowych, na czele z czcionkami systemowymi Mac, a następnie szeregiem Helveticas. Prawdopodobnie wykracza to poza to, co jest wymagane od stosu czcionek w wiadomości e-mail.

Użyte czcionki : czcionki systemowe Apple, nawiązujące do Helvetica i Arial.

To, co kocham w tym e-mailu, to sposób, w jaki śmiała typografia oddziela treść. Ułatwia skanowanie wiadomości e-mail. A przy minimalnej liczbie kopii treści, czytelnicy w pośpiechu mogą uzyskać wartość każdej sekcji i szybko podjąć działania.

Nota wydawnicza

Platforma do samodzielnego publikowania Blurb wykorzystuje czcionki internetowe, aby przedstawić swoją tożsamość marki w wiadomościach e-mail, używając lekkich i pogrubionych grubości, a także wielkich liter, aby nakreślić hierarchię i obszary działania.

Użyte czcionki : Futura i Proxima Nova (czcionki internetowe), nawiązujące do Helvetica i Arial.

Wspaniale jest widzieć liczby — te, które składają się na kroki — stylizowane przy użyciu tekstu na żywo, a nie obrazów. Zapewnia to znacznie płynniejsze działanie subskrybentom, którzy polegają na czytnikach ekranu, a także oznacza, że ​​będą one renderowane, gdy obrazy nie zostaną załadowane.

Tripadvisor

Podobnie jak wiele marek, platforma turystyczna Tripadvisor rozesłała swoje wiadomości dotyczące COVID-19 za pomocą szablonu w stylu listu. Jest to bardziej osobisty i bezpośredni sposób komunikowania się z klientami, oferujący ważne informacje bez rozpraszania obrazów lub prawdopodobieństwa pomylenia ich z marketingową wiadomością e-mail.

Użyte czcionki : Arial.

Duża, odważna typografia podkreśla nadrzędny przekaz e-maila, podczas gdy nagłówki wyróżniają się na tle bloków treści z podziałem treści, zapewniając czytelnikowi punkty zaczepienia, aby zrozumieć wartość sekcji.

Ta wysoce skanowalna wiadomość e-mail ma również duże wypełnienie z lewej i prawej strony głównego kontenera, co jest świetną techniką zapobiegania przytłaczaniu czytelnika dużymi blokami kopii.

Tattly

Sprzedawca tymczasowych tatuaży Tattly ma bardzo kreatywne podejście do projektowania e-maili, przy czym e-maile promocyjne często wykorzystują ekscytujące techniki projektowania i trendy. Używają pogrubionej typografii w bohaterze tego e-maila, aby zwrócić uwagę na nowe produkty zawarte w e-mailu.

Użyte czcionki : Open Sans (czcionka internetowa), wracając do Helvetica i Arial.

W przypadku wysoce zaprojektowanych wiadomości e-mail, takich jak ta, typografia jest często oparta na obrazach, a nie na żywym tekście.

Istnieje szereg kwestii dotyczących ułatwień dostępu, które należy wziąć pod uwagę podczas korzystania z obrazów w tekście, takich jak zastosowanie tekstu ALT, który odzwierciedla kopię, oraz uwzględnienie tego, jak tekst będzie wyglądał dla osób, które muszą powiększyć wiadomość e-mail ze względu na osłabienie. Czy tekst będzie się pikselował i stał się nieczytelny? Ponadto, jak czytelny jest tekst oparty na obrazach, gdy wiadomość e-mail jest skalowana w dół na urządzeniach mobilnych?

Chociaż tekst na żywo jest najlepszym sposobem, aby Twoje wiadomości e-mail były dostępne i czytelne, istnieje sposób, aby obszary bohaterów oparte na obrazach były cenne dla szerszej publiczności, poprzez zawinięcie obrazu bohatera w znacznik H1 i dodanie tekstu obrazu do znacznika ALT. lubię to:

<h1 style=”Helvetica Neue,Helvetica,sans-serif; font-size:50px; line-height:75px; color:#262524;”><img src=”hero.png” alt=”Image based hero messaging - there is a way!”></h1>

Takie podejście sprawia, że ​​e-maile mogą być skanowane przez subskrybentów, którzy są uzależnieni od czytników ekranu, ponieważ mogą oni używać funkcji skrótów do poruszania się po nagłówkach.

„Zawijanie obrazu w znacznik H1 jest prawidłowym kodem semantycznym i zostanie uwzględnione w menu skrótów nagłówków czytnika ekranu. Należy jednak pamiętać, że tekst ALT może nie zostać odczytany przez wszystkie narzędzia do czytania tekstu”. – Mark Robbins, inżynier oprogramowania, Salesforce

Typografia e-maili ma mocny cios

Przy szybko rosnącej liczbie wiadomości konkurujących o uwagę Twoich subskrybentów, obciążenie, aby się wyróżniać i nadal zapewniać niezawodne działanie — szybko — staje się coraz cięższe. Typografia to świetny sposób, aby Twoje e-maile były piękne, skuteczne i dostępne bez spowalniania pracy.

Pamiętaj o tym przewodniku i podziel się tym, jak używasz typografii w swoich e-mailach. Chciałbym je zobaczyć!

Twórz markowe, bezbłędne e-maile — z Litmus Nigdy więcej zepsutych e-maili. Twórz i testuj swoje e-maile za pomocą Litmus, aby zapewnić doskonałe wrażenia subskrybenta w każdej skrzynce odbiorczej. Rozpocznij darmowy okres próbny