Kelimelerden Daha Fazlası: Hacimler Konuşan E-posta Tipografisi Nasıl Kullanılır?

Serif ve sans-serif, özellikle gövde kopyası için en sık kullanılan yazı tipleridir. Bunun nedeni, en okunaklı olmaları ve dolayısıyla erişilebilir olmalarıdır. Ölçek küçültüldüklerinde ve daha düşük ağırlıklarda iyi performans gösterirler.

Komut dosyası ve ekran yazı biçimleri genellikle gövde kopyası için çok karmaşıktır. Yani, okunması zor ve taranması daha da zor olabilir. Bu yüzden genellikle manşetlere ayrılırlar.

Tek aralıklı yazı biçimleri de gövde kopyası olarak daha az kullanılır. Bunun yerine, kodu doğal dilden ayırt etmek için programlama dilleri için teknik kaynaklarda tercih edilirler.

Web yazı tipleri

Bir e-postada bir yazı tipi kullanmak için bir web yazı tipi olması gerekir.

Bu, kodunuza çağrılabilecek dijital bir yazı tipidir. Satın alınabileceklerin yanı sıra birçok ücretsiz web yazı tipi mevcuttur. İlk olarak, e-postanıza arayabileceğiniz iki tür dijital yazı tipine bakalım: web için güvenli yazı tipleri ve web yazı tipleri.

Web için güvenli yazı tipleri

Bunlar, çoğu işletim sisteminde yüklü olan yazı tipleridir, yani bu yazı tiplerini e-posta kodunuza çağırmak, e-posta istemcileri, cihazlar ve işletim sistemleri arasında tutarlı bir işleme ile sonuçlanacaktır.

Windows ve Mac cihazlarda en iyi desteklenen web güvenli yazı tipleri şunlardır:

Web yazı tipleri

Bunların hepsi işletim sistemlerinde bulunmayan yazı biçimleri vardır.

Bu nedenle, e-postalarınızı kullanmak için bazı ekstra kodlar eklemeniz gerekir. Ayrıca, tüm e-posta istemcileri web yazı tiplerini oluşturmayacağından, yazı tipi yığınınızda yedek web için güvenli yazı tiplerine sahip olduğunuzdan emin olmalısınız.

Ücretsiz bir kaynak olan Google Fonts ve abonelik gerektiren Adobe Fonts gibi web fontlarını bulabileceğiniz birçok farklı yer var.

Web yazı tipleriyle ilgili kapsamlı bir kılavuz için Web Yazı Tiplerine İlişkin Nihai Kılavuzumuza göz atın.

İdeal olarak, aynı anda ikiden fazla yazı tipi stili kullanmamalısınız . Bunun nedeni kısmen, çok fazla uygulama yaparsanız gürültülü ve kafa karıştırıcı hale gelebilmesidir, ancak birden fazla web yazı tipinde arama yapıyorsanız e-postanızın yükleme süresini de artırabilir.

Yazı tipi stili

E-postamızdaki kelimelere ve cümlelere dikkat çekmeye yardımcı olmak için tasarlayabileceğimiz ve kodlayabileceğimiz ek yazı tipi stilleri var. Ancak bunları nasıl ve ne zaman kullandığımız önemlidir, çünkü bunlar e-postalarımızın okunabilirliğini ve erişilebilirliğini etkileyebilir.

E-posta Erişilebilirliği İçin En İyi Kılavuz Becerileri ne olursa olsun herkesin yararlanabileceği e-postalar yazmak, tasarlamak ve kodlamak için ihtiyaç duyduğunuz bilgileri ve adım adım önerileri keşfedin. REHBERİNİZİ EDİNİN

Gözü pek

Kalın yazıları, e-postanızdaki diğer metinler arasında öne çıkmasını istediğiniz birkaç kelimeyle sınırlamaya çalışın. Bu, dikkat çekmek için savaşan birden fazla anahtar kelimenizin olmamasını sağlayacaktır.

Metni kalınlaştırmak, gören abonelerin önemli bilgileri tanımlamasına yardımcı olabilirken, ekran okuyucuların farkı ancak semantik kodlama yoluyla anlayabilmesi gerekir.

<b> kalın etiketi semantik değildir ve seçtiğiniz kelimeyi/kelimeleri ekran okuyucu kullanıcıya vurgulamaz. Bu nedenle, gören kullanıcılarınızın yaşadığı deneyimi yansıtmak için her zaman <strong> etiketini kullanın.

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

İtalik

Kalınlaştırmaya benzer şekilde, sözcükleri italik yapmak, daha az ölçüde de olsa vurgu ekler.

Kalınlaştırmada olduğu gibi, italik metni kodlamanın birden çok yolu vardır. Ancak, WCAG uyumlu olan <em> etiketidir (<i> etiketi değil) ve ekran okuyuculara bir şeyin nasıl anlaşılması gerektiğine dair bir gösterge verebilir.

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

üstü çizili

Bu stili uygulamak, bir fiyat indirimi veya bilgi güncellemesine dikkat çekebilir.

Ancak, e-posta istemcileri arasında tutarlı bir şekilde oluşturulmaz.

<strike> HTML etiketi Hey tarafından desteklenmez ve Gmail uygulamaları tarafından yalnızca kısmen desteklenir. Ve bu stili CSS satır geçişi ile ele almak, bazı e-posta istemcilerinin satırı o kadar ince hale getirmesiyle sınırlı desteğe sahiptir, bunu görmek oldukça zordur.

Ekran okuyucular üstü çizili bir kelimeyi vurgulamadığından, bu tarzla ilgili bir erişilebilirlik sorunu olduğunu da belirtmekte fayda var; bu da yardımcı teknolojiye güvenenlerin deneyimini olumsuz etkileyebilir. Her miktarın önüne 'eski' ve 'şimdi' gibi bağlam eklemek, bunu herkes için değerli bir deneyim haline getirecektir.

Üstü çizili kodlamanın en iyi yolu, HTML <strike> etiketini kullanmaktır, örneğin:

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

büyük harf

Büyük harf kullanmak, anahtar kelimelere dikkat çekebilir ve hiyerarşi gösterebilir. Bununla birlikte, bağırmak olarak da görülebilir, bu nedenle dikkatli kullanmak en iyisidir.

Büyük harflerle kolay gitmenin bir başka nedeni de okunabilirliği etkilemesidir. Kelimeleri şekillerine göre tanımlamaya aşinayız. Büyük harfli metnin tek tip dikdörtgen şekli bizi yavaşlatır ve taranabilirliği azaltır.

Büyük harflerle yazmak ekran okuyucuları olumsuz yönde etkileyebileceğinden, CSS stilini kullanarak büyük harfli metinler oluşturmanızı da tavsiye ederim. Bazı durumlarda, ekran okuyucu büyük harflerle karşılaştığında ses seviyesini artırabilir veya kısaltmalar olarak tanımladığı için sözcükleri harf harf okuyabilir.

CSS stili, ekran okuyucular tarafından tanımlanmaz, bu nedenle CSS kullanılarak stillendirilen büyük harfli metne normal metinle aynı şekilde davranır.

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

Harf boşluğu

Harf aralığı eklemek, yazı tiplerinize biraz fazladan karakter ve kimlik kazandırabilir ve ayrıca bazı yazı tipi stillerini daha okunaklı hale getirebilir.

Örneğin, metninize biraz büyük harf stili uygulamanız gerekiyorsa, biraz harf aralığı eklemek de okunabilirliği artırabilir. Ancak, çok fazla harf aralığı okunabilirliğe zarar vereceğinden, bu iyi bir dengedir.

Harf aralığının yapılması ve yapılmaması gerekenler hakkında daha fazla bilgi için bu faydalı gönderiye göz atın.

Yalnızca Outlook'un kısmi destek sunduğu e-posta istemcilerinde destek iyidir. Harf aralığı eklemek için CSS kullanarak stil vermek istiyorsunuz:

<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>

Metin hizalama

Metin hizalama ile birkaç açık ve kapalı hayır vardır.

Her şeyden önce, haklı stil: Bu, metni kabının soluna ve sağına tutturur. Bunu başarmak için kelimeler arasına eşit olmayan boşluklar ekleyerek okunabilirliği büyük ölçüde etkiler.

Sağa hizalanmış gövde metni yalnızca sağdan sola okunan diller için kullanılmalıdır. Soldan sağa dillerin sağa hizalandığında okunması çok doğal değildir ve okunabilirliği de olumsuz etkiler.

Ortaya hizalanmış metin, 3 satırı geçmeyen başlıklar veya kısa paragraflar için ayrılmalıdır.

Optimum hizalama, soldan sağa diller için sola hizalanmıştır . Bu, her satır okunduğunda geri dönülecek bir bağlantı noktası oluşturur ve erişilebilir okuma deneyimleri için önemli bir husustur.

Metin hizalamasını kodlamak için HTML hizalama özelliğini kullanabilirsiniz. Ancak bu, hücre içinde sahip olduğunuz diğer öğeleri de hizalayacaktır. Başlıklar veya paragraflar gibi anlamsal etiketlerde CSS kullanmak, kopyanızı hizalamanın en etkili yoludur:

<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>

Renk

Renk ile hatırlanması gereken şey kontrasttır.

Metin renklerini seçtiğinizde, arka plan renklerinizde veya arka plan resimlerinizde öne çıkacaklarından emin olmanız gerekir. Bu, içeriğinizi bir dizi görme bozukluğu olan aboneler için okunabilir hale getirmeye yardımcı olacaktır. İyi bir kontrast oranına sahip olup olmadığınızı öğrenmenin en iyi yolu, renklerinizi WebAim kontrast denetleyicisinde test etmektir.

E-posta için erişilebilir içerik oluşturmaya, tasarlamaya ve kodlamaya ilişkin daha derin bir dalış için Salesforce Yazılım Mühendisi Mark Robbins ile kaydettiğim Salesforce Trailhead oturumlarına göz atın.

Boy

Metninizi ne kadar büyük şekillendireceğinizin gerçekten bir üst sınırı yoktur. Ancak, okunabilir olmaları ve e-postanızı bozmamaları için kelimeleri bir satırda tutmak istersiniz.

Yine de , metnin ne kadar küçük olması gerektiğine dair bir sınır vardır. 14 pikselin altındaki her şey birçok kişi için okunması zor hale gelir ve iOS Apple Mail'in otomatik metin ayarlama özelliği metninizi başlatır ve büyütür.

Litmus'ta nadiren 18 pikselin altına düşeriz. Bunu yaparsak, uyarılar, dipnotlar ve altbilgi içeriği gibi üçüncül bilgilerle sınırlandırırız. Bu, birincil içeriğin baskın olmasını sağlar.

Satır yüksekliği

İyi okunabilirlik aynı zamanda metnin her satırı arasındaki yeterli boşluğa da bağlıdır. Çok az ve gözleriniz başka bir satıra kaymadan tek bir metin satırını takip etmek zor olabilir. Çok fazla ve her satır bir diğerinden bağımsızmış gibi hissedebilir, bu da okumayı ve taramayı zorlaştırır.

Bunun için satır yükseklikleri metnin 1,5 ile 2 katı arasında olmalıdır. Örneğin, 20 piksellik bir yazı tipi boyutunun satır yüksekliği 30-40 piksel olmalıdır.

E-posta tasarımında tipografi kullanmak için ipuçları

Yazılı içeriği şekillendirerek çok şey başarılabilir. Etki yaratmak ve okuyucuları yönlendirmek için e-postalarınızda tipografiyi etkili bir şekilde kullanmanın dört yolunu açıklayacağım.

Abonelerin markanızı tanımlamasına yardımcı olun

Her şeyden önce, abonelerin e-postanızı açtıklarında markanızı tanımalarına yardımcı olmak için marka yazı tiplerini uygulayabilirsiniz. Bazı yazı tipleri bağlam dışında bile çok belirgindir. Walt Disney ve Coca-Cola'yı düşünün.

Farklı iletişim türleri

Farklı yazı tipi stillerini kullanarak işlem e-postaları ve haber bültenleri gibi farklı iletişim türlerini şekillendirebilirsiniz. Bu, hedef kitlenizin aldıkları iletişim türünü hızlı bir şekilde tanımlamasına yardımcı olur.

Marka kişiliğini yükseltin

Marka kişiliği, kahraman alanında önemli mesajları çağıran ekran yazı tiplerinin kullanılması gibi yaratıcı tipografi ile de yükseltilebilir.

Mesajınız doğru mu geliyor? Hataları uzak tutun ve e-postalarınızın bir etki yaratmasını sağlayın. 100'den fazla uygulama ve cihazda önizleme yapın, bağlantıları ve görüntüleri doğrulayın, erişilebilirliği test edin ve daha fazlasını yapın. Hata yapma

Hiyerarşi oluştur

Tipografi ile yapabileceğiniz en faydalı şeylerden biri, okuyucuyu e-postanız aracılığıyla yönlendirmeye yardımcı olan hiyerarşi oluşturmaktır. Bu yüzden burada biraz daha zaman geçireceğim.

Bugün, çoğu abone tarafından alınan e-postaların hacmi oldukça fazladır. Alınan tüm mesajların üstesinden gelmek ve sindirmek mümkün değildir. Bu nedenle, okuyucu, değeri anlamak için e-postanızdaki bağlantı noktalarını ararken, açılan e-postalar genellikle taranır.

Yazı tipi stillerine, boyutlarına, ağırlıklarına ve renklerine eğilerek e-postanızın hangi bölümlerinin en önemli olduğunu gösterebilirsiniz. 'Katlama'ya inanmamama rağmen, abonelere e-postanın amacını anlama fırsatı vermenin ve çok sayıda metin okumak zorunda kalmadan harekete geçmenin önemli olduğunu düşünüyorum.

Bu örnekle sizin için parçalayayım:

E-postanın değerini veya amacını özetleyen bir başlığa dikkat çekmek için kahraman alanında büyük ve cesur tipografi kullanır.

Kampanyanızın amacı tıklamalar ve dönüşümlerse, bir harekete geçirici mesaj ile takip etmek, okuyucunun tüm e-postayı tüketmek zorunda kalmadan eylemi gerçekleştirmesine yardımcı olabilir.

Ardından, okuyucu her kelimeyi okumayı taahhüt edemezse bu içeriğin kolayca taranabilmesi için gövde metnini bölen daha az baskın başlıklar ekleyin.

Markalar e-posta tipografisiyle yaratıcı oluyor

Şimdi e-posta tasarımlarında tipografiyi çok iyi kullanan bazı marka örneklerine bakalım. Onları öne çıkaran ve okuyucuları çeken nedir?

NEMLİ

Doğal şaraplar üretmeye ve satmaya odaklanan şarap üreticileri ve perakendecileri vurgulayan bir haber bülteni olan DAMP, içerik hiyerarşisini düzenlemek için serif ve sans-serif yazı tipleriyle çalışarak tipografiye ağırlık veriyor.

Yazı tipleri kullanılır: Helvetica neue Arial yedeği ve serif sistem yazı Times New Roman ile.

Kahraman alanı, açık e-postanın tonunu belirleyen kalın tipografi ile bu uzun bültendeki tek resmi görüntüler. Cesur tipografinin bu e-posta tasarım trendi bir açıklama yapıyor. Pek çok markanın bu tarzı benimsemesine şaşmamalı.

Bu e-postayla ilgili gerçekten ilginç olan şey, bu modern ve temiz stili web yazı tipleri yerine sistem yazı tiplerini kullanarak elde etmeleridir; bu, yazı tiplerinin tüm e-posta istemcilerinde benzer şekilde işleneceği anlamına gelir.

Hazır Mag

Tarayıcı içi bir grafik düzenleyici olan Ready Mag, Mac sistem yazı tiplerini ve ardından bir dizi Helveticas'ı takip eden sistem yazı tiplerine de eğilir. Bu muhtemelen e-postadaki bir yazı tipi yığını için gerekenin ötesindedir.

Kullanılan yazı tipleri: Apple sistem yazı tipleri, Helvetica ve Arial'e geri dönüyor.

Bu e-postanın sevdiğim yanı, cesur tipografinin içeriği bu kadar ayırması. E-postanın taranmasını kolaylaştırır. Ve minimum gövde kopyasıyla, acele eden okuyucular her bölümün değerini alabilir ve hızlı bir şekilde harekete geçebilir.

bulanık

Kendi kendini yayınlayan platform Blurb, hiyerarşi ve eylem alanlarını ana hatlarıyla belirtmek için hafif ve kalın ağırlıkların yanı sıra büyük harfler kullanarak marka kimliklerini e-postalara getirmek için web yazı tiplerini kullanır.

Kullanılan yazı tipleri : Futura ve Proxima Nova (web yazı tipleri), Helvetica ve Arial'e geri dönüyor.

Adımları oluşturan sayıların, görseller yerine canlı metin kullanılarak şekillendirildiğini görmek harika. Bu, ekran okuyuculara güvenen aboneler için çok daha sorunsuz bir deneyim yaratır ve aynı zamanda bunların, resimler yüklenmediğinde oluşturulacağı anlamına gelir.

Tripadvisor

Birçok marka gibi, seyahat platformu Tripadvisor da COVID-19 mesajlarını mektup stili bir şablon kullanarak gönderdi. Bu, müşterilerle iletişim kurmanın daha kişisel ve doğrudan bir yoludur, görsellerin dikkatini dağıtmadan veya bir pazarlama e-postası ile karıştırılma olasılığı olmadan önemli bilgiler sunar.

Kullanılan yazı tipleri : Arial.

Büyük, cesur tipografi, e-postanın kapsayıcı mesajını vurgularken, gövde kopya bloklarına karşı öne çıkacak şekilde tasarlanmış başlıklar, içeriği bölerek okuyucunun bir bölümün değerini anlaması için bağlantı noktaları sağlar.

Bu son derece taranabilir e-posta ayrıca, büyük kopya bloklarının okuyucuyu bunaltmasını önlemek için harika bir teknik olan ana kabın solunda ve sağında geniş bir dolguya sahiptir.

tatlı

Geçici dövme perakendecisi Tattly, genellikle heyecan verici tasarım teknikleri ve trendlerinden yararlanan promosyon e-postaları ile e-posta tasarımına çok yaratıcı bir yaklaşıma sahiptir. E-postada yer alan yeni ürünlere dikkat çekmek için bu e-postanın kahramanında cesur tipografi kullanıyorlar.

Kullanılan yazı tipleri : Açık Sans (web yazı tipi), Helvetica ve Arial'e geri döner.

Tipografinin canlı metin yerine görüntü tabanlı olması, bunun gibi yüksek düzeyde tasarlanmış e-postalarda yaygındır.

Metin için görüntüleri kullanırken, kopyayı yansıtan ALT metni uygulamak ve bir görsel nedeniyle e-postayı büyütmesi gereken kişiler için metnin nasıl görüneceğini hesaba katmak gibi, yapılması gereken bir dizi erişilebilirlik hususu vardır. bozulma. Metin pikselleşecek ve okunamaz hale gelecek mi? Ayrıca, e-posta mobil cihazlarda küçüldüğünde görüntü tabanlı metin ne kadar okunabilir?

Canlı metin, e-postalarınızı erişilebilir ve okunabilir tutmanın en iyi yolu olsa da, kahraman resminizi bir H1 etiketine sararak ve resim metnini ALT etiketinize ekleyerek resim tabanlı kahraman alanlarını daha geniş bir kitle için değerli hale getirmenin bir yolu vardır. bunun gibi:

<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>

Bu yaklaşım, başlıklar arasında gezinmek için kısayol işlevini kullanabildikleri için, aboneler için e-postayı ekran okuyuculara bağımlı hale getirir.

"H1 etiketi içinde bir görüntüyü sarmak geçerli bir anlamsal koddur ve ekran okuyucu başlıklarının kısayol menülerine dahil edilecektir. Ancak, ALT metninin tüm metin okuma araçları tarafından okunmayabileceğini unutmamak önemlidir.” – Mark Robbins, Yazılım Mühendisi, Salesforce

E-posta tipografisi yumruk atıyor

Abonelerinizin dikkatini çekmek için yarışan mesaj sayısının hızla artmasıyla, öne çıkmanın ve buna rağmen güvenilir bir deneyim (hızlı) sunmanın yükü ağırlaşmaya devam ediyor. Tipografi, sizi yavaşlatmadan e-postalarınızı güzel, etkili ve erişilebilir hale getirmenin harika bir yoludur.

Bu kılavuzu aklınızda bulundurun ve e-postalarınızda tipografiyi nasıl kullandığınızı paylaşın. Onları görmeyi çok isterim!

Litmus ile markaya özel, hatasız e-postalar oluşturun Artık bozuk e-posta yok. Her gelen kutusunda harika bir abone deneyimi sağlamak için e-postalarınızı Litmus ile oluşturun ve test edin. ÜCRETSİZ deneme sürümünü başlat