Yazı tipleri, herhangi bir web sitesinin tasarımının ayrılmaz bir parçasıdır. Bir web sitesinin imajını büyük ölçüde etkilerler ve tasarımın stilini tamamen değiştirebilirler. Yazı tipi stili, bir sitedeki atmosferi belirler ve iletmek istediğiniz mesajı şekillendirir. Web sitenizin tamamında aynı yazı tipini, aynı boyutta, yükseklikte, ağırlıkta ve aralıkta kullanmaya devam etmek ve değişken yazı tiplerinin getirebileceği tüm ince nüansları kaçırmak yazık olur. Sadece tek bir yazı tipi kullanmaya karar verdiğinizde bile, biraz kişiselleştirmenin ne kadar çeşitlilik sunabileceğine şaşıracaksınız.
Değişken yazı tipleri, en az dört dosya gerektiren tipik bir yazı tipinin aksine, tek bir dosyada birçok farklı yazı tipine sahip olmanızı sağlar. Bunlar sizi her stil, ağırlık veya genişlik için ayrı bir yazı tipi dosyası oluşturma zorunluluğundan kurtaran OpenType yazı tipi özelliğinin bir uzantısıdır.
Bu yazıda, WordPress’te değişken yazı tiplerini yalnızca birkaç adımda nasıl kullanacağınızı göstereceğiz. Öğrenmek için okumaya devam edin:
-
Değişken Yazı Tipleri Nasıl Çalışır?
-
Yazı Tipini Web Sitenize Yükleme
-
Değişken Yazı Tiplerini Bulma
-
Doğru Yazı Tipi Nasıl Seçilir?
Değişken Yazı Tipleri Nasıl Çalışır?
Değişken yazı tipi nasıl çalışır? Dik bir tasarım ve en yaygın ağırlık ve genişlik ile karakterize edilen, genellikle ‘Normal’ yazı tipi stili olan varsayılan bir stille başlar. Çoğu zaman düz metin için kullanılır. Bu varsayılan stil, sürekli bir aralıktaki diğer stillerle bağlantılıdır ve bu stillere eksen adı verilir. Beş ortak eksen vardır – eğim, genişlik, ağırlık, italik ve optik boyut.
Her bir stil bir eksen boyunca yerleştirilebilir ve buna değişken yazı tipinin ‘örnek’i denir. Örneğin Roboto Flex değişken yazı tipi, ağırlık eksenleri için üç farklı stil sunar. Eksenlerin zıt uçlarında iki stil vardır ve normal stil ortadadır. Aralarından seçim yapabileceğiniz 900 örnek var.
Dolayısıyla, değişken bir yazı tipi, beş farklı kriter veya eksende (ağırlık, eğik, italik, optik boyut ve genişlik) özelleştirilebilen tek bir yazı tipidir. Her değişiklik CSS ile yapılır ve her eksen, yazı tipinin görünümündeki yönlerden birini kontrol eder. Her özellik, karşılık gelen bir CSS etiketi içerir:
-
Ağırlık (CSS’de ağırlık)
-
Eğimli (CSS’de eğik)
-
İtalik (CSS’de ital)
-
Optik Boyut (CSS’de opsz)
-
Genişlik (CSS’de genişlik)
Yazı tipini değiştirmek ve yazı tipinizin görünüşünü tamamen değiştirmek için yazı tipinin tüm bu yönlerini karıştırıp birleştirebilirsiniz. SVG’ler gibi yazı tiplerini canlandırmak bile mümkündür.
Bu yüzden web sitenize birden fazla yazı tipi dahil etmek zorunda kalmak yerine, değişken bir yazı tipi, farklı amaçlar için tamamen farklı görünecek şekilde değiştirebileceğiniz tek bir yazı tipini kullanmanıza olanak tanır. Değişken yazı tiplerinin en büyük avantajlarından biri, animasyonlar için harika olabilmeleridir. Yalnızca CSS kullanarak farklı yazı tipi ağırlıkları arasındaki geçişleri canlandırmanın sorunsuz ve kolay bir yolunu sunarlar. Aynı yazı tipini web sitenizde çok fazla yerde kullandığınız ve mevcut tüm stillerini zaten tükettiğiniz durumlarda da ideal bir çözümdür.
Yazı Tipini Web Sitenize Yükleme
Web siteniz için doğru yazı tipini bulduktan sonra ilk adım onu yüklemektir. Özel Yazı Tipleri, Herhangi Bir Yazı Tipini Kullan ve benzeri gibi bu konuda size yardımcı olacak birçok eklenti vardır. Sitenize özel yazı tiplerini yüklemekle ilgili yardıma ihtiyacınız varsa, burada özel yazı tipi yükleme işleminin ayrıntılı bir açıklaması bulunmaktadır. Seçtiğiniz yazı tipini nasıl yüklemeyi seçerseniz seçin, sonuç aynıdır ve yazı tipinizi yönetme şekliniz de aynıdır.
Daha önce açıkladığımız gibi, değişken yazı tipleri CSS tabanlıdır, bu da onları özel CSS’nizi eklediğiniz tüm yerlerde bulabileceğiniz anlamına gelir. Bu durum değişken bir yazı tipinin bir custom.css dosyasında, bir stylesheet.css dosyasında ve benzer yerlerde olabileceği anlamına gelir. Yapmanız gereken, aşağıdaki kodu girmek ve kullanmayı seçtiğiniz değişken yazı tiplerinin adını eklemektir:
01 @font-face {
02 font-family:'Gingham';
03 src: url('Gingham.woff2') format('woff2'),
04 }
Bu şekilde, web sitenizde değişken yazı tipinin kullanılmasını sağlarsınız. Şimdi, yazı tipini biçimlendirmeye devam edebilirsiniz. Herhangi bir sınıfa veya kimliğe stil uygulayabilir ve yazı tipinizin tamamen farklı görünmesini sağlayabilirsiniz. Özelleştirmeyi yalnızca H1, H2, H3’e mi, tüm sayfaya mı yoksa gönderinin tamamına mı uygulamak istediğinize karar vermek size kalmış. Yazı tipini değiştirmenin iki yolu vardır – tüm değişiklikleri tek bir kod satırına girmek:
01 h2 {
02 font-family: 'Gingham',Helvetica,sans-serif;
03 font-size: 30px;
04 font-variation-settings: 'wght' 500, 'wdth' 55;
05 }
Daha uygun bulursanız, değişikliği birden çok kod satırına da bölebilirsiniz:
01 h2 {
02 font-family: 'Gingham',Helvetica,sans-serif;
03 font-size: 30px;
04 wdth: 750;
05 wght: 400;
06 }
Bu şekilde, temel olarak web sitenizin herhangi bir yerinde her türlü yazı tipi değişikliğini yapabilirsiniz.
Değişken Yazı Tiplerini Bulma
Google Yazı Tipleri, ücretsiz yazı tipleri için en popüler başvurulacak kaynaktır. Fakat çok çeşitli değişken yazı tipleri sunmazlar. Google yazı tiplerine bağlı kalmak istiyorsanız, Google Yazı Tiplerinden Recursive değişken yazı tipi ailesini kullanabilirsiniz. Bu açık kaynaklı bir OFL yazı tipidir ve özyinelemeli tasarımda bununla ilgili daha fazlasını görebilirsiniz. Diğer popüler ücretsiz değişken yazı tiplerinden bazıları Gingham ve League Mono’dur. 150’den fazla Ücretsiz Değişken Yazı Tipi › Fontesk’te çok çeşitli ücretsiz değişken yazı tipleri bulabilirsiniz.
Premium değişken yazı tiplerine gelince, seçim elbette daha zengindir. Adobe Typekit, V-fonts, Monotype ve daha birçok kaynağı keşfedebilirsiniz.
Doğru Yazı Tipi Nasıl Seçilir?
Web siteniz için doğru yazı tipini seçmek, web tasarımınızın birçok farklı yönünü göz önünde bulundurmanızı ve hangi stilin markanızı tam olarak güçlendireceğini ve iletmeyi amaçladığınız genel mesajı tehlikeye atmadığını tahmin etmenizi gerektirir. Yazı tipi stilinin marka özünüze nasıl uyduğu, web sitenizde hangi konumlarda hangi varyasyonların kullanılacağı ve tanıdık stillere bağlı kalmanız veya yeni bir şey denemeniz gerekip gerekmediği – bunların hepsi ciddi şekilde düşünülmesi gereken sorular.
Doğru yazı tipini seçmenin hem web sitenizin tasarımını hem de kullanıcı deneyimini önemli ölçüde iyileştirebileceğini unutmayın. Şans eseri, bir kez alıştığınızda, değişken bir yazı tipinin kullanımı genellikle kolaydır ve sizin için en uygun varyasyonları bulana kadar farklı stilleri deneyebilmeniz için ince ayarlar yapabilirsiniz.
Konu Özeti
Değişken yazı tipleri, kullanıcıyı çok karmaşık prosedürlerle zorlamadan birçok heyecan verici olasılık sunar. Kodla ilgili biraz deneyim gerektirebilirler. Fakat tamamen yeni başlayan biri bile kullanım talimatlarını dikkatli bir şekilde izleyerek bunları kullanmayı hızlı bir şekilde öğrenebilir. Değişken yazı tipleri nispeten yeni olduğundan, yakın gelecekte çok daha fazla iyileştirme ve olasılık bekleyebiliriz.