Karakter Aralığı, İzleme ve Liderlik: Etkili Yazı Biçimi İçin Basit Bir Kılavuz

Web için tasarım yaparken her zaman bir şeyi aklınızda tutmanız gerekir: okunabilirlik. Tasarımın ne kadar harika olduğu, mizanpajınızın ne kadar muhteşem olduğu veya renk kullanımınızın ne kadar dahice olduğu önemli değil. Kişiler ekrandaki kelimeleri okuyamıyorsa (ve tabii bu ekranda kelimeler olduğunu varsayarsak), web sitesi işlevini yerine getiremez. Metin için okunabilirliğin en önemli üç unsuru karakter aralığı, izleme ve yönlendirmedir, ancak birçok kişi bunları ya karıştırır ya da onları etkili bir şekilde nasıl kullanacaklarını anlamaz. Bugün bunu düzeltmeyi düşünüyoruz.

Karakter Aralığı, İzleme ve Liderlik

Bu üçünü mutlak temellere indirirseniz, hem X hem de Y eksenlerindeki karakterler arasındaki boşluğa bakıyorsunuz demektir. Araştırdığınızda bundan daha fazlasının olduğunu göreceksiniz ama özünde metin karakterleri arasındaki ilişkiye bakıyorsunuz. Bu üç özellik arasındaki ilişkiyi anlamak önemlidir çünkü iyi tasarım ve okunabilirlik, bunları elinizden gelen en iyi şekilde kullanmanıza bağlıdır.

Ve bu zamanla ve pratikle gelir. Ancak bunlara dikkat etmeye başladığınızda, günlük olarak okuduğunuz ve gördüğünüz her şeyde karakter aralığı, izleme ve yönlendirmenin hem etkili hem de kötü kullanıldığını fark edeceksiniz. Hadi kazalım.

Karakter Aralığı, Satır Aralığı ve İzlemeyi Ayarlama (ve Daha Fazlası!)

Aslında, konuya girmeden önce, bu ayarları nasıl değiştirdiğinizi ve ayarladığınızı gözden geçirelim. Çoğu kelime işlemci programı bunları ayarlamak için seçeneklere sahip olsa da, çoğu insan kopya veya tipik metin yazarken buna ihtiyaç duymaz. Metin tasarlarken daha çok sorun haline gelir, bu nedenle Photoshop, Illustrator vb. gibi programlar en çok ihtiyacınız olan seçeneklere sahip olacaktır.

Adobe ürünlerinde, Metin Katmanı Karakter Panelini açmanız yeterlidir ve ihtiyacınız olan her şeye sahipsiniz. V/A karakter aralığı, bir kutudaki VA takip ediyor ve altı çizili, dikey A'lar Önde geliyor. Ayrıca bu panelde üstü çizili, ağırlık, boyut, süper/abonelik ve çok daha fazlasını ayarlayabilirsiniz. Bunu açık tutmaya alışmaya değer.

Sadece imlecinizi aralığı ayarlamanız gereken yere getirin ve gidin.

Kerning nedir?

Karakter aralığı ile başlayalım. Kerning, gerçekten üçünün en basitidir. Yan yana iki karakter arasındaki boşluktur. Bir sözcükte, değişken karakter aralığına sahip olabilirsiniz çünkü ilk iki harf arasındaki boşluk, son iki harf arasındaki boşluktan farklı olabilir (vb.).

Tek aralıklı yazı tiplerinde, her karakter örtüşme olmaksızın tam olarak aynı miktarda yatay alan kaplar. A, B ile K ile aynı genişliktedir. Bu harfler arasındaki karakter aralığını ayarlamak, harflerin üst üste gelebileceği ve farklı genişliklerde yazdırılabileceği değişken aralıklı yazı tiplerinden daha kolay olma eğilimindedir.

Yukarıdaki örnekte, Courier New monospace fontu kullanılarak kopyalanıp yapıştırılan üç satırımız var. Üst satırın karakter aralığı, varsayılan olan ve yazı tipi tasarımcısının seçtiği aralığı kullanan 0'a ayarlanır. İkinci satır, harfler (ve boşluklar) arasında 200'de eşit olarak ayarlanır. Gördüğünüz gibi, satır boyunca karakterler arasındaki boşluklar aynıdır. Son olarak, üçüncü satır, her bir kelimenin içinde hem pozitif hem de negatif boşluk bırakılarak rastgele sıralandı. Gördüğünüz gibi, her karakterin her iki tarafında farklı karakter aralığı olabilir.

İzleme Nedir?

İzleme , karakter aralığına benzer, ancak karakter aralığı değildir. Karakter aralığı iki ayrı karakter arasındaki boşluk olduğunda, izleme her bir kelime veya satır arasındaki tek tip boşluktur. Karakter aralığıyla olduğu gibi harf harf bazında işlerin nasıl bir araya getirileceği konusunda endişelenmek yerine, tüm satırın eşit aralıklarla yerleştirildiğinden emin olun. Daha önceki örnek resme bakıldığında, ikinci satır çok daha kolay bir şekilde yapılabilirdi.

Karakter aralığı için yaptığım şey, imlecimi her bir karakterin arasına yerleştirip 200'e ayarlamaktı. Esasen tüm satırı izledim. Yapmanız gereken şey budur. İzlemeniz gerekenleri vurgulayın ve Karakter Panelinde ayarlayın.

Ancak, izleme ayarlandığında bazı yazı tiplerinin ve komut dosyalarının okunamaz hale gelebileceğini unutmayın.

El yazısı yazı tipleri ve bitişik el yazısı yazı tipleri belirli karakter aralığı ile ayarlanır ve izlemeyi ayarlarsanız, aksi takdirde kesintisiz bir satırda boşluklar elde edersiniz. Veya satırları sıkıştırmak için diğer yöne giderek, komut dosyasını okunamaz hale getirebilirsiniz.

Liderlik nedir?

Leading ile artık karakterler arasındaki boşluklarla uğraşmıyorsunuz. Öncü , satırlar arasındaki boşluktur.

Liderden etkin bir şekilde yararlanmak, tasarımlarınızda boşluktan etkili bir şekilde yararlanmanızı sağlar. Sıkışık satırlar - doğru ve iyi yapılmış karakter aralığı/izleme ile bile - okuyucular için sefil bir deneyim yaratabilir.

Bazı yerlerde satır yüksekliği olarak adlandırılan satır başı görebilirsiniz, ancak bunlar kabaca aynı şeydir. İyi bir kural, karakterlerinizin üstünde ve altında en azından biraz boşluk bıraktığınızdan emin olmaktır. En üstteki örnekte görebileceğiniz gibi, 40 piksellik bir yazı tipi 48 piksellik bir satır yüksekliğine sahiptir. Bu, ne olursa olsun, harfler arasında boşluk olacağı anlamına gelir. Bunu yazı tipi boyutunda veya daha düşük olarak ayarlarsanız, karakter çakışması elde edersiniz.

Ek olarak, bu, karakterlerin oturduğu satırın yüksekliğidir. Bu karakterin yüksekliği değil . Karakter aralığı ve izlemenin karakterleri daha şişman veya daha ince yapmaması gibi, izleme de onları daha kısa veya daha uzun yapmaz. Bu sadece etraflarındaki boşluktur.

Ancak görebileceğiniz gibi, Photoshop Karakter Panelinde karakter aralığı/izleme altındaki seçenekler karakter aralığı, izleme ve satır aralığı bağımsız olarak karakterlerin genişliğini/yüksekliğini ayarlar.

Photoshop/Illustrator Klavye Kısayolları

Karakter Panelinin tek dezavantajı, ince ayar yapmanız gerektiğinde oldukça can sıkıcı hale gelmesidir. Neyse ki, karakter aralığı, izleme ve yönlendirmeyi mutlak bir esinti haline getiren klavye kısayolları var.

Bu kısayollar Adobe Creative Cloud paketi içindir, dolayısıyla Gimp, Paint.NET veya başka bir programda farklı olabilir.

• Karakter aralığı – İmleç iki karakter arasındayken ALT (veya Mac'te Option) tuşunu basılı tutun ve karakter aralığını ayarlamak için sol/sağ okları kullanın
• İzleme – Sözcük/satır vurgulanmışken, ALT (veya Mac'te Option) tuşunu basılı tutun ve vurgulanan metnin izlemesini ayarlamak için sağ/sol okları kullanın
• Satır Aralığı – Ayarlamak istediğiniz satırları vurgulayın, ALT (veya Mac'te Option) tuşunu basılı tutun ve satırlar arasındaki boşluğu ayarlamak için yukarı/aşağı okları kullanın.

Karakter Paneline imlecinizi yerleştirebilir veya metni vurgulayabilir ve değerleri yazabilirsiniz, ancak klavye kısayolları tüm süreci çok daha az sıkıcı ve zaman alıcı hale getirir. Ayrıca, daha ayrıntılı kontrol elde edersiniz, böylece daha iyi tasarımlar da yapabilirsiniz.

(Bir kenara, Photoshop/Illustrator/Premier vb. klavye kısayollarını düzenli olarak kullanmıyorsanız, iş akışınızı çok daha akıcı, daha keyifli ve daha üretken hale getirdiği için öğrenmenizi şiddetle tavsiye ederiz.)

Toplama

Karakter aralığı, izleme ve yönlendirme, web tasarımında (ve genel olarak tasarımda) okunabilir metnin temelleridir. Farkı ve her birinin nasıl etkili bir şekilde kullanılacağını öğrenmek sizi çok daha iyi bir tasarımcı yapacaktır. Harfler ve satırlar arasındaki boşluk kadar basit bir şeyin bu kadar büyük bir etkiye sahip olması biraz garip görünebilir, ancak bununla kısa bir süre bile ilgilenirseniz, asla web sitelerine, reklamlara, logolara veya reklam panolarına bakmayacaksınız. yine aynı şekilde.

Bir tasarımda mükemmel izleme, karakter aralığı veya liderlik elde etmek için ipuçlarınız ve püf noktalarınız nelerdir?

Makale özellikli görsel BarsRsind / Shutterstock.com