Kerning, Tracking, dan Leading: Panduan Sederhana untuk Mengetik Huruf yang Efektif

Saat mendesain untuk web, Anda harus selalu mengingat satu hal: keterbacaan. Tidak masalah seberapa bagus desainnya, betapa cantiknya tata letak Anda, atau seberapa jenius penggunaan warna Anda. Jika orang tidak dapat membaca kata-kata di layar (dan ini dengan asumsi ada kata-kata di layar, tentu saja), situs web tidak dapat menjalankan fungsinya. Tiga elemen terpenting dari keterbacaan teks adalah kerning, tracking, dan leading, meskipun banyak orang yang membuat mereka bingung atau tidak mengerti bagaimana menggunakannya secara efektif. Kami berniat untuk memperbaikinya hari ini.

Kerning, Pelacakan, dan Memimpin

Jika Anda menggabungkan ketiganya ke dasar-dasar absolut, Anda sedang melihat jarak antar karakter pada sumbu X dan Y. Menggali, Anda akan melihat ada lebih dari itu, tetapi pada dasarnya, Anda sedang melihat hubungan antara karakter teks. Penting untuk memahami hubungan antara ketiga atribut ini karena desain dan keterbacaan yang baik bergantung pada penggunaan Anda sebaik mungkin.

Dan itu datang dengan waktu dan latihan. Tetapi begitu Anda mulai memperhatikannya, Anda akan melihat bagaimana kerning, tracking, dan leading digunakan secara efektif dan buruk pada semua yang Anda baca dan lihat setiap hari. Mari kita menggali.

Menyesuaikan Kerning, Leading, dan Tracking (dan Lainnya!)

Sebenarnya, sebelum kita menggali lebih dalam, mari kita bahas bagaimana Anda mengubah dan menyesuaikan pengaturan ini. Sementara sebagian besar program pengolah kata memiliki opsi untuk menyesuaikannya, kebanyakan orang tidak perlu melakukannya saat menulis salinan atau teks biasa. Saat Anda mendesain teks, hal itu menjadi lebih menjadi masalah, jadi program seperti Photoshop, Illustrator, dll. akan memiliki opsi yang paling Anda butuhkan.

Dalam produk Adobe, Anda hanya perlu membuka Panel Karakter Lapisan Teks, dan Anda memiliki semua yang Anda butuhkan. V/A adalah kerning, VA dalam kotak adalah pelacakan, dan A vertikal yang digarisbawahi adalah Leading. Anda juga dapat menyesuaikan coretan, berat, ukuran, super/subskrip, dan banyak lagi lainnya di panel ini. Ada baiknya membiasakan diri untuk menjaga ini tetap terbuka.

Cukup tempatkan kursor Anda di tempat Anda perlu menyesuaikan jarak dan pergi.

Apa itu Kerning?

Mari kita mulai dengan kerning . Kerning adalah yang paling sederhana dari ketiganya, sungguh. Ini adalah ruang antara dua karakter yang berdampingan. Singkatnya, Anda dapat memiliki variabel kerning karena spasi antara dua huruf pertama mungkin berbeda dari antara dua huruf terakhir (dan seterusnya).

Dalam font monospace, setiap karakter mengambil jumlah ruang horizontal yang sama persis tanpa tumpang tindih. A memiliki lebar yang sama dengan B seperti J sebagai K. Menyesuaikan kerning antara huruf-huruf ini cenderung lebih mudah daripada font spasi variabel, di mana huruf mungkin tumpang tindih serta dicetak pada lebar yang berbeda.

Pada contoh di atas, kami memiliki tiga baris yang disalin dan ditempel menggunakan font monospace Courier New . Kerning baris atas diatur pada 0, yang merupakan default dan menggunakan spasi apa pun yang dipilih perancang font. Baris kedua diatur sama antara huruf (dan spasi) pada 200. Seperti yang Anda lihat, spasi seragam antar karakter di sepanjang baris. Akhirnya, baris ketiga di-kerned secara acak dengan spasi positif dan negatif dalam setiap kata. Seperti yang Anda lihat, setiap karakter dapat memiliki kerning yang berbeda di setiap sisi.

Apa itu Pelacakan?

Pelacakan mirip dengan kerning, tapi itu bukan kerning. Di mana kerning adalah ruang antara dua karakter individu, pelacakan adalah ruang seragam antara setiap kata atau baris individu. Alih-alih mengkhawatirkan bagaimana hal-hal disatukan berdasarkan huruf demi huruf seperti pada kerning, Anda memastikan seluruh baris memiliki jarak yang seragam. Melihat kembali contoh gambar sebelumnya, baris kedua bisa dilakukan dengan cara yang jauh lebih mudah.

Apa yang saya lakukan untuk kerning adalah menempatkan kursor saya di antara setiap karakter individu dan menyesuaikan ke 200. Saya pada dasarnya melacak seluruh baris. Itulah yang harus Anda lakukan. Cukup sorot apa yang perlu Anda lacak dan sesuaikan di Panel Karakter.

Namun, perhatikan bahwa beberapa font dan skrip mungkin menjadi tidak terbaca saat pelacakan disesuaikan.

Font tulisan tangan dan tipografi kursif diatur dengan kerning tertentu, dan jika Anda menyesuaikan pelacakan, Anda akan mendapatkan celah dalam garis yang tidak terputus. Atau pergi ke arah lain untuk mengompresi garis, Anda mungkin membuat skrip tidak dapat dibaca.

Apa itu Memimpin?

Dengan Leading, Anda tidak lagi berurusan dengan jarak antar karakter. Leading adalah ruang antar baris.

Secara efektif memanfaatkan terkemuka memungkinkan Anda secara efektif memanfaatkan spasi dalam desain Anda. Garis yang sempit — bahkan dengan kerning/tracking yang benar dan dilakukan dengan baik — dapat membuat pengalaman yang menyedihkan bagi pembaca.

Di beberapa tempat, Anda mungkin melihat awalan yang disebut line height , tetapi itu kira-kira sama. Satu aturan praktis yang baik adalah memastikan bahwa Anda meninggalkan setidaknya sedikit ruang di atas dan di bawah karakter Anda. Seperti yang Anda lihat di contoh atas, font 40px memiliki tinggi garis 48px. Artinya, apapun yang terjadi, akan ada jarak antar huruf. Jika Anda mengaturnya pada atau lebih rendah dari ukuran font, Anda akan mendapatkan karakter yang tumpang tindih.

Selain itu, ini adalah ketinggian garis tempat karakter duduk. Ini bukan ketinggian karakter . Sama seperti kerning dan pelacakan tidak membuat karakter lebih gemuk atau kurus, pelacakan tidak membuat mereka lebih pendek atau lebih tinggi. Ini hanyalah ruang di sekitar mereka.

Namun, seperti yang Anda lihat, opsi di bawah kerning/tracking di Panel Karakter Photoshop menyesuaikan lebar/tinggi karakter secara independen dari kerning, tracking, dan leading.

Pintasan Keyboard Photoshop/Ilustrator

Satu-satunya kelemahan Panel Karakter adalah cukup mengganggu saat Anda membutuhkan penyesuaian yang baik. Untungnya, ada pintasan keyboard yang membuat kerning, pelacakan, dan memimpin sangat mudah untuk digunakan.

Pintasan ini untuk suite Adobe Creative Cloud, jadi mungkin berbeda di Gimp atau Paint.NET atau program lain.

• Kerning – Dengan kursor di antara dua karakter, tahan ALT (atau Option di Mac) dan gunakan panah kiri/kanan untuk menyesuaikan kerning
• Pelacakan – Dengan kata/baris yang disorot, tahan ALT (atau Option di Mac) dan gunakan panah kanan/kiri untuk menyesuaikan pelacakan teks yang disorot
• Leading – Sorot garis yang ingin Anda sesuaikan, tahan ALT (atau Option di Mac) dan gunakan panah atas/bawah untuk mengatur jarak antar baris

Meskipun Anda dapat menempatkan kursor atau menyorot teks dan mengetikkan nilai ke dalam Panel Karakter, pintasan keyboard membuat keseluruhan proses tidak terlalu membosankan dan memakan waktu. Plus, Anda mendapatkan kontrol yang lebih terperinci, sehingga Anda juga dapat membuat desain yang lebih baik dengan cara itu.

(Sebagai tambahan, jika Anda tidak menggunakan Photoshop/Illustrator/Premier, dll. pintasan keyboard secara teratur, kami sangat menyarankan untuk belajar, karena membuat alur kerja Anda lebih lancar, lebih menyenangkan, dan juga lebih produktif.)

Membungkus

Kerning, tracking, dan leading adalah dasar dari teks yang dapat dibaca dalam desain web (dan desain secara umum). Mempelajari perbedaan dan cara menggunakan masing-masing secara efektif akan membuat Anda menjadi desainer yang jauh lebih baik. Mungkin tampak sedikit aneh bahwa sesuatu yang sederhana seperti jarak antara huruf dan garis dapat memiliki dampak yang begitu besar, tetapi begitu Anda menanganinya bahkan untuk beberapa saat, Anda tidak akan pernah melihat situs web, iklan, logo, atau papan reklame. dengan cara yang sama lagi.

Apa tips dan trik Anda untuk mendapatkan tracking, kerning, atau leading dalam sebuah desain yang sempurna?

Gambar unggulan artikel oleh BarsRsind / shutterstock.com