Web tasarımı her zaman grafik ve basılı tasarım dünyasından prensip ve tanımlar ödünç almıştır. Bu özellikle web tipografisi ve web sayfalarımızda mektup formları alma biçiminde doğrudur. Bu paralellikler her zaman 1 ila 1 çeviri değildir, ancak bir disiplinin diğerini nasıl etkilediğini kesinlikle görebilirsiniz. Bu, özellikle geleneksel "tipografi" terimi ile "satır yüksekliği" olarak bilinen CSS özelliği arasındaki ilişkiyi düşündüğünüzde belirgindir.
Liderliğin Amacı
Basılı bir sayfa için tipografiyi oluşturmak için insanlar elleriyle metal veya ahşap harfleri elleriyle kullandığında, bu çizgiler arasında boşluk oluşturmak için yatay çizgiler arasında ince kurşun parçaları yerleştirildi. Daha büyük bir alan isteseniz, daha büyük kurşun parçaları yerleştirirsiniz. "Lider" terimi bu şekilde işlenmiştir. Tipografik tasarım ve prensipler hakkında bir kitapta "önder" terimini incelediyseniz, "tipteki ardışık çizgilerin taban çizgileri arasındaki mesafenin" etkisine bir şeyler okuyacaktı.
Web Tasarımında Lider
Dijital tasarımda, önde gelen terim hala metin satırları arasındaki boşluklara başvurmak için kullanılır. Pek çok program, bu programda fiili kurşunun kullanılmamasına rağmen, bu kesin terimi kullanır. Bu prensiplerin tam olarak uygulanması değişmiş olsa bile, geleneksel olanlardan yeni tasarım ödünç alma fikirlerinin mükemmel bir örneğidir.
Web tasarımı söz konusu olduğunda, "lider" için CSS özelliği yoktur. Bunun yerine, bu görsel metin ekranını işleyebilecek CSS özelliği satır yüksekliği olarak adlandırılır. Metninizin yatay metin satırları arasında daha fazla yer olmasını istiyorsanız, bu özelliği kullanırsınız. Örneğin, sitenizin
Bu, sayfanın varsayılan yazı tipi boyutuna (normalde 16px olan) göre normal satır yüksekliğinin 1,5 katı olacaktır.
Line-Height ne zaman kullanılır?
Yukarıda belirtildiği gibi, satır yüksekliğinin paragraflarda veya diğer metin bloklarında metin satırlarını ayırmak için kullanılması uygundur. Satırlar arasında çok az boşluk varsa, metin sitenize görüntüleyenler için karışık ve zor okunabilir. Benzer şekilde, satırlar sayfada çok fazla boşluk bırakılmışsa, normal okuma akışı kesintiye uğrayacak ve okuyucular bu nedenle metninizle ilgili sorun yaşayacaktır. Bu yüzden kullanmak için uygun satır yüksekliği aralığı bulmak istersiniz. Ayrıca , sayfanın okunabilirliği hakkında geri bildirim almak için tasarımınızı gerçek kullanıcılarla da test edebilirsiniz.
Hat Yüksekliğini Kullanmamak İçin
Satır yüksekliğini, sayfanın tasarımına alt başlık veya paragraflar dahil olmak üzere boşluk eklemek için kullanacağınız dolgu veya kenar boşluklarıyla karıştırmayın. Bu aralık önde değil ve dolayısıyla satır yüksekliğiyle ele alınmıyor.
Belirli metin öğeleri altında alan eklemek isterseniz, kenar boşluklarını veya dolguyu kullanırsınız. Kullandığımız önceki CSS örneğine geri dönersek şunları ekleyebiliriz:
ana p {satır yüksekliği: 1,5; kenar boşluğu: 24px; } Bu, sayfamızın paragrafları (
Hemen hemen her durumda, bu önceki CSS ile aynı görüntüler.
"Hizmetler menüsü" sınıfı olan bir listenin içinde yer alan liste öğelerinin altında boşluk eklemek istediğinizi varsayalım, satır boyunu DEĞİL, bunu yapmak için kenar boşluklarını veya dolguyu kullanırsınız. Yani bu uygun olurdu.
.servisler menüsü li {