Lebih dari Kata-kata: Cara Menggunakan Tipografi Email yang Berbicara Banyak

Serif dan sans-serif adalah tipografi yang paling umum digunakan, terutama untuk body copy. Ini karena mereka paling mudah dibaca dan karenanya dapat diakses. Mereka menghasilkan dengan baik saat diperkecil dan pada bobot yang lebih rendah.

Skrip dan tipografi tampilan seringkali terlalu rumit untuk body copy. Artinya, mereka bisa sulit dibaca dan bahkan lebih sulit untuk dipindai. Jadi mereka biasanya dicadangkan untuk berita utama.

Tipografi monospace juga jarang digunakan sebagai body copy. Sebaliknya, mereka disukai dalam sumber daya teknis untuk bahasa pemrograman untuk membedakan kode dari bahasa alami.

Tipografi web

Untuk menggunakan jenis huruf dalam email, itu harus berupa font web.

Ini adalah jenis huruf digital yang dapat dipanggil ke dalam kode Anda. Ada banyak font web gratis yang tersedia serta yang dapat dibeli. Namun, pertama-tama, mari kita lihat dua jenis font digital yang dapat Anda panggil ke email Anda: font web safe dan font web.

Font aman web

Ini adalah tipografi yang diinstal pada sebagian besar sistem operasi, artinya memanggil font ini ke dalam kode email Anda akan menghasilkan rendering yang konsisten di seluruh klien email, perangkat, dan sistem operasi.

Berikut adalah font aman web yang paling didukung di seluruh perangkat Windows dan Mac:

Font web

Ini adalah tipografi yang tidak tersedia di semua sistem operasi.

Oleh karena itu, Anda perlu menambahkan beberapa kode tambahan ke email Anda untuk menggunakannya. Anda juga harus memastikan bahwa Anda memiliki font aman web cadangan di tumpukan font Anda, karena tidak semua klien email akan merender font web.

Ada banyak tempat berbeda di mana Anda dapat menemukan font web, seperti Google Fonts yang merupakan sumber gratis dan Adobe Fonts yang memerlukan langganan.

Untuk panduan komprehensif tentang font web, lihat Panduan Utama kami untuk Font Web.

Idealnya, Anda tidak boleh menggunakan lebih dari dua gaya font sekaligus . Ini sebagian karena dapat menjadi bising dan membingungkan jika Anda menerapkan terlalu banyak, tetapi juga dapat meningkatkan waktu muat email Anda jika Anda memanggil beberapa font web.

Gaya font

Ada gaya font tambahan yang dapat kami desain dan kode untuk membantu menarik perhatian pada kata dan kalimat dalam email kami. Tetapi bagaimana dan kapan kami menggunakan ini penting karena dapat memengaruhi keterbacaan dan aksesibilitas email kami.

Panduan Utama untuk Aksesibilitas Email Temukan wawasan dan saran langkah demi langkah yang Anda butuhkan untuk menulis, mendesain, dan membuat kode email yang dapat dinikmati oleh siapa saja—apa pun kemampuannya. DAPATKAN PANDUAN ANDA

Berani

Cobalah untuk membatasi teks yang dicetak tebal pada beberapa kata yang ingin Anda tampilkan di antara salinan lainnya di email Anda. Ini akan memastikan Anda tidak memiliki banyak kata kunci yang memperebutkan perhatian.

Sementara teks tebal dapat membantu pelanggan yang terlihat mengidentifikasi informasi penting, hanya melalui pengkodean semantik pembaca layar akan mengetahui perbedaannya.

Tag tebal <b> tidak semantik dan tidak akan menekankan kata yang Anda pilih kepada pengguna pembaca layar. Jadi untuk menggemakan pengalaman yang diperoleh pengguna awas Anda, selalu gunakan tag <strong>.

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

miring

Mirip dengan huruf tebal, kata-kata yang dicetak miring menambahkan penekanan, meskipun pada tingkat yang lebih rendah.

Seperti halnya dengan huruf tebal, ada beberapa cara untuk mengkodekan teks yang dicetak miring. Namun, tag <em>-lah yang sesuai dengan WCAG (bukan tag <i>) dan dapat memberikan indikasi kepada pembaca layar tentang bagaimana sesuatu harus dipahami.

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

dicoret

Menerapkan gaya ini dapat menarik perhatian pada pengurangan harga atau pembaruan informasi.

Namun, itu tidak ditampilkan secara konsisten di seluruh klien email.

Tag HTML <strike> tidak didukung oleh Hey dan hanya didukung sebagian oleh aplikasi Gmail. Dan menangani gaya ini dengan CSS line-through juga memiliki dukungan terbatas dengan beberapa klien email yang membuat garis menjadi sangat tipis, cukup sulit untuk dilihat.

Perlu juga dicatat bahwa ada masalah aksesibilitas dengan gaya ini, karena pembaca layar tidak akan menekankan kata dengan coretan, yang dapat berdampak negatif pada pengalaman mereka yang bergantung pada teknologi bantu. Menambahkan konteks sebelum setiap jumlah, seperti 'dulu' dan 'sekarang' akan menjadikan ini pengalaman yang berharga bagi semua orang.

Cara terbaik untuk membuat kode coret adalah menggunakan tag <strike> HTML, seperti:

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

Huruf besar

Menggunakan huruf besar dapat menarik perhatian ke kata kunci dan menunjukkan hierarki. Namun, itu juga bisa dilihat sebagai teriakan, jadi sebaiknya gunakan dengan hemat.

Alasan lain untuk menggunakan huruf besar dengan mudah adalah karena hal itu memengaruhi keterbacaan. Kita akrab dengan mengidentifikasi kata-kata dengan bentuknya. Bentuk persegi panjang yang seragam dari teks huruf besar memperlambat kita dan mengurangi kemampuan pemindaian.

Saya juga merekomendasikan penataan teks huruf besar menggunakan gaya CSS, karena penulisan dalam huruf kapital dapat berdampak negatif pada pembaca layar. Dalam beberapa kasus, pembaca layar dapat meningkatkan volume saat menemukan huruf besar, atau dapat membacakan kata demi huruf karena mengidentifikasinya sebagai akronim.

Penataan gaya CSS tidak diidentifikasi oleh pembaca layar, sehingga akan memperlakukan teks huruf besar yang ditata menggunakan CSS dengan cara yang sama seperti teks biasa.

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

Spasi huruf

Menambahkan spasi huruf dapat memberikan sedikit karakter dan identitas ekstra pada font Anda, dan juga dapat membuat beberapa gaya font lebih mudah dibaca.

Misalnya, jika Anda perlu menerapkan beberapa gaya huruf besar ke teks Anda, menambahkan sedikit spasi huruf juga dapat meningkatkan keterbacaan. Namun, ini adalah keseimbangan yang baik, karena terlalu banyak spasi huruf akan merusak keterbacaan.

Untuk informasi lebih lanjut tentang apa yang harus dan tidak boleh dilakukan pada spasi huruf, lihat posting bermanfaat ini.

Dukungan baik di seluruh klien email hanya dengan Outlook yang menawarkan dukungan parsial. Untuk menambahkan beberapa spasi huruf, Anda ingin menata menggunakan 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>

Perataan teks

Ada beberapa larangan keluar-masuk dengan perataan teks.

Pertama-tama, gaya yang dibenarkan : Ini akan membuat jangkar teks ke kiri dan kanan wadahnya. Untuk mencapai ini, itu menambahkan jarak yang tidak sama antara kata-kata, sangat mempengaruhi keterbacaan.

Teks isi rata kanan hanya boleh digunakan untuk bahasa yang dibaca dari kanan ke kiri. Sangat tidak wajar jika bahasa kiri-ke-kanan dibaca saat rata kanan dan juga akan berdampak negatif pada keterbacaan.

Teks pusat-blok harus disediakan untuk berita utama atau paragraf singkat tidak lebih dari 3 baris.

Perataan optimal adalah rata kiri untuk bahasa kiri-ke-kanan. Ini menciptakan titik jangkar untuk kembali ke setiap kali baris dibaca, dan merupakan pertimbangan utama untuk pengalaman membaca yang dapat diakses.

Untuk mengkodekan perataan teks, Anda dapat menggunakan atribut HTML align. Namun, ini juga akan menyelaraskan elemen lain yang Anda miliki di dalam sel. Menggunakan CSS pada tag semantik, seperti header atau paragraf, adalah cara paling efektif untuk menyelaraskan salinan Anda:

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

Warna

Hal yang perlu diingat dengan warna adalah kontras.

Saat Anda memilih warna teks, Anda perlu memastikan bahwa warna tersebut akan menonjol dengan warna latar belakang atau gambar latar belakang Anda. Ini akan membantu membuat konten Anda dapat dibaca oleh pelanggan dengan berbagai gangguan penglihatan. Cara terbaik untuk mengetahui apakah Anda memiliki rasio kontras yang baik adalah dengan menguji warna Anda di pemeriksa kontras WebAim.

Untuk mempelajari lebih dalam dalam membuat, mendesain, dan mengkodekan konten yang dapat diakses untuk email, lihat sesi Salesforce Trailhead yang saya rekam dengan Mark Robbins, Software Engineer di Salesforce.

Ukuran

Sebenarnya tidak ada batas atas seberapa besar Anda menata teks Anda. Namun, Anda ingin menyimpan kata-kata dalam satu baris agar dapat dibaca dan tidak merusak email Anda.

Namun, ada batasan seberapa kecil teks seharusnya. Apa pun di bawah 14px menjadi sulit bagi banyak orang untuk membaca, dan fitur penyesuaian teks otomatis Apple Mail iOS akan membantu dan memperbesar teks Anda.

Di Litmus, kami jarang menyimpang di bawah 18px. Jika kami melakukannya, kami membatasinya pada informasi tersier seperti peringatan, catatan kaki, dan konten footer. Hal ini memungkinkan konten utama untuk mendominasi.

Tinggi garis

Keterbacaan yang baik juga bergantung pada ruang yang memadai di antara setiap baris teks. Terlalu sedikit, dan mungkin sulit untuk mengikuti satu baris teks tanpa mata Anda menyimpang ke baris lain. Terlalu banyak, dan setiap baris bisa terasa seperti independen dari yang berikutnya, membuat membaca dan memindai menjadi tantangan.

Untuk mencapai ini, tinggi garis harus antara 1,5 dan 2 kali ukuran teks. Misalnya, ukuran font 20px harus memiliki tinggi garis 30-40px.

Tips menggunakan tipografi dalam desain email

Banyak yang bisa dicapai dengan menata konten tertulis. Saya akan menjelaskan empat cara Anda dapat secara efektif menggunakan tipografi dalam email Anda untuk memberi dampak dan memandu pembaca.

Bantu pelanggan mengidentifikasi merek Anda

Pertama-tama, Anda dapat menerapkan font merek untuk membantu pelanggan mengidentifikasi merek Anda saat mereka membuka email Anda. Beberapa font sangat khas, bahkan di luar konteks. Pikirkan Walt Disney dan Coca-Cola.

Membedakan jenis komunikasi

Anda dapat menata berbagai jenis komunikasi seperti email transaksional dan buletin dengan menggunakan gaya font yang berbeda. Ini membantu audiens Anda dengan cepat mengidentifikasi jenis komunikasi yang mereka terima.

Tingkatkan kepribadian merek

Kepribadian merek juga dapat ditingkatkan dengan tipografi kreatif, seperti penggunaan font tampilan di area pahlawan yang memanggil pesan utama.

Apakah pesan Anda tersampaikan dengan benar? Jauhkan kesalahan—dan pastikan email Anda berdampak. Pratinjau di 100+ aplikasi dan perangkat, validasi tautan dan gambar, uji aksesibilitas, dan banyak lagi. Jangan salah

Buat hierarki

Salah satu hal paling berguna yang dapat Anda lakukan dengan tipografi adalah membuat hierarki, membantu memandu pembaca melalui email Anda. Jadi saya akan menghabiskan lebih banyak waktu di sini.

Saat ini, volume email yang diterima oleh sebagian besar pelanggan sangat besar. Untuk melewati dan mencerna semua pesan yang diterima saja tidak mungkin. Oleh karena itu, email yang dibuka sering dipindai saat pembaca mencari titik jangkar di dalam email Anda untuk memahami nilainya.

Dengan bersandar pada gaya font, ukuran, bobot, dan warna, Anda dapat menunjukkan bagian mana dari email Anda yang paling penting. Meskipun saya tidak percaya pada 'fold', saya pikir penting untuk memberikan kesempatan kepada pelanggan untuk memahami tujuan email, dan mengambil tindakan tanpa harus berkomitmen untuk membaca banyak salinan.

Biarkan saya memecahnya untuk Anda dengan contoh ini:

Ini menggunakan tipografi besar dan tebal di area pahlawan untuk menarik perhatian ke judul yang merangkum nilai atau tujuan email.

Jika klik dan konversi adalah tujuan kampanye Anda, menindaklanjuti dengan ajakan bertindak dapat membantu pembaca mengambil tindakan tanpa harus menghabiskan seluruh email.

Kemudian, tambahkan headline yang kurang dominan yang memecah body copy sehingga konten ini dapat dengan mudah dipindai jika pembaca tidak dapat berkomitmen untuk membaca setiap kata.

Merek menjadi kreatif dengan tipografi email

Sekarang untuk beberapa contoh merek dengan penggunaan tipografi yang hebat dalam desain email mereka. Apa yang membuat mereka menonjol dan menarik pembaca?

LEMBAP

DAMP, buletin yang menyoroti pembuat anggur dan pengecer yang berfokus pada pembuatan dan penjualan anggur alami, sangat condong ke tipografi, bekerja dengan font serif dan sans-serif untuk menyusun hierarki konten.

Font yang digunakan : Helvetica neue dengan Arial fallback , dan font sistem serif Times New Roman.

Area pahlawan menampilkan satu-satunya gambar dalam buletin bentuk panjang ini, dengan tipografi tebal yang mengatur nada untuk email saat terbuka. Tren desain email tipografi tebal ini membuat pernyataan. Tak heran jika banyak merek yang mengadopsi gaya ini.

Apa yang benar-benar menarik dari email ini, adalah bahwa mereka mencapai gaya modern dan bersih ini menggunakan font sistem daripada font web—artinya font akan ditampilkan dengan cara yang sama di semua klien email.

Siap Mag

Ready Mag, editor grafis dalam browser, juga bersandar pada font sistem, memimpin dengan font sistem Mac, diikuti oleh serangkaian Helveticas. Ini mungkin melampaui apa yang diperlukan dari tumpukan font di email.

Font yang digunakan : Font sistem Apple, kembali ke Helvetica dan Arial.

Apa yang saya sukai dari email ini adalah bagaimana tipografi yang berani memisahkan konten. Itu membuat email mudah dipindai. Dan dengan body copy yang minimal, pembaca yang terburu-buru bisa mendapatkan nilai dari setiap bagian dan mengambil tindakan dengan cepat.

mengaburkan

Platform penerbitan mandiri Blurb menggunakan font web untuk membawa identitas merek mereka ke email, menggunakan bobot yang ringan dan tebal serta huruf besar untuk menguraikan hierarki dan area tindakan.

Font yang digunakan : Futura dan Proxima Nova (font web), kembali ke Helvetica dan Arial.

Sangat menyenangkan melihat angka–angka yang membentuk langkah–digayakan menggunakan teks langsung daripada gambar. Ini menciptakan pengalaman yang jauh lebih lancar bagi pelanggan yang bergantung pada pembaca layar, dan juga berarti bahwa ini akan dirender saat gambar tidak dimuat.

Tripadvisor

Seperti banyak merek, platform perjalanan Tripadvisor mengirimkan pesan COVID-19 mereka menggunakan template bergaya huruf. Ini adalah cara yang lebih pribadi dan langsung untuk berkomunikasi dengan pelanggan, menawarkan informasi penting tanpa gangguan citra, atau kemungkinan disalahartikan sebagai email pemasaran.

Font yang digunakan : Arial.

Tipografi besar dan tebal menyoroti pesan menyeluruh dari email, sementara tajuk utama ditata agar menonjol di antara blok-blok body copy memecah konten yang memberikan titik jangkar bagi pembaca untuk memahami nilai suatu bagian.

Email yang sangat dapat dipindai ini juga memiliki bantalan yang cukup di kiri dan kanan wadah utama, yang merupakan teknik hebat untuk mencegah blok besar salinan membanjiri pembaca.

Tatly

Peritel tato temporer Tattly memiliki pendekatan yang sangat kreatif terhadap desain email, dengan email promosi sering kali memanfaatkan teknik dan tren desain yang menarik. Mereka menggunakan tipografi tebal di pahlawan email ini untuk menarik perhatian ke produk baru yang ditampilkan dalam email.

Font yang digunakan : Open Sans (font web), kembali ke Helvetica dan Arial.

Adalah umum dengan email yang sangat dirancang, seperti ini, untuk tipografi berbasis gambar, bukan teks langsung.

Ada sejumlah pertimbangan aksesibilitas yang perlu dibuat saat menggunakan citra untuk teks, seperti menerapkan teks ALT yang menggemakan salinan, dan mempertimbangkan seperti apa teks itu bagi orang-orang yang perlu memperbesar email karena visual penurunan nilai. Apakah teks akan pixelate dan menjadi tidak terbaca? Juga, seberapa mudah dibaca teks berbasis gambar ketika email diperkecil pada perangkat seluler?

Meskipun teks langsung adalah cara terbaik untuk membuat email Anda dapat diakses dan dibaca, ada cara untuk membuat area pahlawan berbasis gambar berharga bagi khalayak yang lebih luas, dengan membungkus gambar pahlawan Anda dalam tag H1 dan menambahkan teks gambar ke tag ALT Anda, seperti ini:

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

Pendekatan ini membuat email dapat dipindai untuk pelanggan yang bergantung pada pembaca layar, karena mereka dapat menggunakan fungsionalitas pintasan untuk menavigasi berita utama.

“Membungkus gambar dalam tag H1 adalah kode semantik yang valid dan akan disertakan dalam menu pintasan judul pembaca layar. Namun, penting untuk dicatat bahwa teks ALT mungkin tidak dibaca oleh semua alat membaca teks.” – Mark Robbins, Insinyur Perangkat Lunak, Tenaga Penjualan

Tipografi email sangat menarik

Dengan meningkatnya jumlah pesan yang bersaing untuk mendapatkan perhatian pelanggan Anda, beban untuk menonjol dan tetap memberikan pengalaman yang andal—cepat—semakin berat. Tipografi adalah cara yang bagus untuk membuat email Anda indah, efektif, dan dapat diakses tanpa memperlambat Anda.

Ingatlah panduan ini, dan bagikan bagaimana Anda menggunakan tipografi di email Anda. Saya ingin sekali melihat mereka!

Buat email sesuai merek dan bebas kesalahan—dengan Litmus Tidak ada lagi email yang rusak. Bangun dan uji email Anda dengan Litmus untuk memastikan pengalaman pelanggan yang luar biasa di setiap kotak masuk. Mulai Uji coba Gratis Anda