Geçtiğimiz günlerde Smashing Magazine’de “Typographic Patterns In HTML Email Newsletter Design” başlıklı bir yazı yayınlandı. Anna Yeaman’ın e-posta tasarımında tipografi konusunda ufak bir araştırmasının sonuçlarını değerlendirdiği yazıdan pratik bazı bilgileri aşağıda özetledik.
Web sayfalarında tipografi konusunu, daha önceki yazılarımızdan birinde işlemiştik.
Yazıtipi tercihleri
- Hem metin hem de başlıklar için genellikle serifsiz yazıtipleri tercih ediliyor.
- Serifsiz yazıtiplerinden en popüler olanları Helvetica ve Arial.
- Serifli yazıtiplerinden en çok kullanılanları Georgia, Merriweather ve Times New Roman (yalnızca metin kısmında).
Ana metin karakter boyutu tercihleri
- Hem mobil hem de masaüstü için en çok tercih edilen ana metin karakter boyutu 16px.
Başlık karakter boyutu tercihleri
- Başlık için en yaygın kullanılan karakter boyutu 30px.
- Genellikle başlık boyutunun metin boyutuna oranı 2.
Satır uzunluğu
- Masaüstünde en popüler e-posta genişliği 600px.
- Masaüstünde en çok kullanılan satır uzunluğu 540px. Aslında 16 piksel için 480px daha ideal bir karakter sayısı veriyor (66 karakter civarı).
- Masaüstünde bir satıra ortalama 78.5 karakter kullanılmış
- Mobilde çoğunluk 36-46 karakter arasında satır uzunluğu kullanmış.
Satır yüksekliği
- En çok kullanılan satır yüksekliği 24px (16 piksellik karakter boyutu için, metin boyutunun 1.5 katına denk geliyor).
- Satır yüksekliğini karakter boyutunun 1.5 katı yapmak genel bir kural olarak kabul ediliyor.
Renk seçimi
- Siyah (#000000) en popüler ana metin rengi. Bunu koyu bir gri olan #333333 takip ediyor.
- Genellikle başlıklar ve metin için aynı renk kullanılıyor.
- En çok kullanılan zemin rengi beyaz (#ffffff).
Hizalama
- Büyük çoğunluk metinlerini sola yaslı olarak kullanıyor.
- Kullanıcıların büyük çoğunluğu ortalanmış metnin okunmasının zor olduğunu söylüyor.
Başlık öncesi metni
E-postanın en başında yer alan metin. Mobil cihazlarda e-postaların listelendiği ekranlarda, e-postayı gönderen kişi ve konusu ile birlikte bu metin de gösteriliyor.
- Çoğunluk e-postada başlık öncesi metin kullanıyor.
- Başlık öncesi metin için masaüstünde en çok kullanılan karakter boyutu 11px.
Toparlarsak
Günümüz HTML e-posta tasarımında tipografi kullanımında en yaygın yaklaşıma göre:
- Serifsiz yazıtipi (
font-family: Sans-Serif;) - 16 piksel karakter boyutu (
font-size: 16px;) - Metnin iki katı boyutlarda başlık
(font-size: 2em;) - E-posta dış genişlik 600 piksel (
width: 600px;) - Masaüstü satır uzunluğu 540 piksel (
width: 540px;) - Mobil satır uzunluğu 36-46em (
width: 40em;) - Satır yüksekliği 1.5 (
line-height: 1.5;) - Metin rengi siyah (
color: #000000;) - Zemin rengi beyaz (
background-color: #ffffff;) - Sola yaslı (
text-align: left;) - Başlık öncesi metin kullanılıyor. Genelde 11 piksel (
font-size: 11px;)
