Sitenize Yazı Tipi ile Çekidüzen Verme

İnternette gezinirken karşınıza çıkan sitelerde çok dikkat etmezsiniz ama hepsinde olan ortak bir şey vardır: Yazı Tipi (Font)

Evet, her sitenin kendine özgü kullandığı yazı tipi ailesi veya aileleri vardır. Yani bir sitede birden fazla yazı tipi de kullanılmış olabilir. Çoğu kişi bunun farkına varmaz ama sitenin görünümünde çok büyük bir etkiye sahiptir yazı tipi. Öyle ki, logonuz üzerinde nasıl uzun süre çalışıyorsanız, sitenizin yazı tipi üzerinde de o kadar çalışmalısınız.

Bunun dışında, eğer WordPress gibi bir alt yapı kullanıyorsanız zaten genelde temanızın yazı tipi sizi memnun eder. Çünkü, temanızı seçerken her ne kadar renklere ve tasarıma bakmış olsanız da, aslında farkında olmadan veya olarak yazı tipine de dikkat etmişsinizdir.

Buna rağmen bazen sitenizdeki yazı tipi, boyutu veya rengi hoşunuza gitmeyebilir. Belki de sitenizin renklerine yakışmıyordur. Belki de sitenizde yaptığınız değişiklikler yazı tipinden dolayı gerekli etkiyi uyandırmıyordur. Bunların hepsi olağan şeyler ve bu gibi durumlarda yazı tipinde düzenlemeler yapmak gerekebilir.

1. Sitenizde kullandığınız yazı tipini öğrenin.

Öncelikle bilmelisiniz ki genelde sitelerde tek bir yazı tipi kullanılmaz. Öyle ki, her başlık tipi için veya paragraf yazıları için farklı farklı yazı tipleri seçilmiş olabilir. Örneğin; en büyük başlık için Lato yazı tipi ailesi seçilmişken, paragraf yazıları için Ubuntu yazı tipi ailesi seçilmiş olabilir. Doğal olarak bunları tek tek öğrenmeniz gerekecek. 

Hangi yazı tipini kullandığımı nasıl öğrenebilirim?

Bunun için aslında bir çok yöntem var aslında. Kimi temalarda temanın ayarlarının olduğu kısımda yazı tiplerini belirleyebiliyorsunuz. Örneğin; benim sitemde kullandığım temanın ayarlarının olduğu kısımda “Font” şeklinde bir sekme bulunuyor. Buraya geldiğim zaman sitemde kullandığım yazı tiplerini rahat bir şekilde değiştirebiliyorum.

Eğer temanızda böyle bir özellik varsa ki bu özellik bazen oluyor bazen olmuyor, bu yöntemle sitenizde kullandığınız yazı tiplerini öğrenebilir ve değiştirebilirsiniz.

Eğer temanızda böyle bir özellik yoksa biraz kodlarla uğraşmanız gerekecek. Yazı tipleri genelde CSS ile ayarlandığı için sitenin CSS kodlarına bakmamız gerekecek. İlk işlem değiştirmek istediğimiz yazı tipinin üstüne gelip sağ tıklamak olacak. Bunu yaptıktan sonra “İncele” yazısına tıklayacağız.

Karşınıza sitenizin kodlarının göründüğü bir ekran çıkacak. Ekranda düzenlemek istediğiniz yazının olduğu kod görünecek. Daha doğrusu sağ tıklayıp “İncele” yazısına tıkladığınız sırada hangi bölgeye sağ tıkladıysanız oranın kodu seçilmiş olacak. Ben tesadüfen “h2” yani ikinci başlığın olduğu kısmı seçmişim ve aşağıdaki resme bakarsanız sağ tarafta onun olduğu kodu göreceksiniz. Bu kodun hemen altında da “font-family:” yazısını göreceksiniz. Bu yazının yanında hangi yazı tipi ailesini kullandığımızı görmüş olacağız. Örneğin; aşağıdaki resimde “Playfair Display” yazı tipi ailesini kullanmışım.

Bu arada koda dikkat ederseniz sadece “h2” başlık etiketi değil aynı zamanda “h1, h3, h4, h5, h6” etiketleri için de aynı yazı tipi kullanılıyormuş. Yani tüm başlıklar için kullandığım yazı tipleri aynı.

Yazı tipinin koduna nasıl erişebilirim?

Resme tekrar bakarsanız sağ tarafta ok ile gösterdiğim kısımda “css-skin.css?ver=4.7.2:1” yazdığını görürsünüz. Bunun anlamı bizim düzenlememiz gereken dosyanın adı “css-skin.css” dosyası. Bu dosyanın nerede olduğunu öğrenmek için de yazının üstüne gelmeniz yeterli olacaktır. Benim örneğimde dosyanın bulunduğu yer “wp-content/themes/carrie/css/css-skin.css” konumu. Yani sitemin dosyalarına girip bu dosyayı bulmam gerekiyor.

Dosyayı bulduktan sonra Notepad++ gibi bir yazı editörüyle dosyayı açın. Dosyayı açtığınızda bir çok kod göreceksiniz. Sizin bilmeniz gereken yer, aradığınız kodun kaçıncı satırda olduğu. Şansımıza tarayıcımız aslında bunu da bize söylüyor. Fark ettiyseniz dosyanın adının yanında “ver=4.7.2:1” yazıyordu. İşte iki noktadan hemen sonraki “1” sayısı bize kodun ilk satırda olduğunu söylüyor. Eğer orada “55” yazsaydı, kodumuz 55. satırda olacaktır. Yani örneğin; “ver=4.7.2:45” gibi bir yazı olsaydı kodumuz 45. satırda olacaktır. Doğal olarak bizim değiştirmemiz gereken kısım şu an için ilk satırdaki kod. Ben örnek olarak dosyayı Notepad++ ile açtım ve ilk satıra baktım. Şansımıza dosyamız küçültülmüş. Yani CSS kodlarının hepsi tek bir satırda yazılmış. Doğal olarak kodumuzu bulmak sandığımız kadar kolay olmayacak. Klavyemizden CTRL + F komutuyla arama özelliğini açıyoruz. Arama kısmına yazı tipimizin kullanıldığı sınıfları yazıyoruz. Yani;

h1, h2, h3, h4, h5, h6

yazacağız. Boşluklara da dikkat etmeniz gerekiyor.

Şimdi, aradığımız şeyi bulduk. Biraz daha sağa gidersek aradığımız kodu da bulmuş olacağız. 

Yazı tipinin koduna da ulaşmış olduk. Ama koduna ulaşmış olmamız artık istediğimiz yazı tipini kullanabileceğimiz anlamına gelmiyor. Daha öncesinde kullanmamız gereken yazı tipini CSS dosyasında çekmemiz gerekiyor. Aksi halde tarayıcımız bu yazı tipini tanımayabilir.

Tabii, her şeyden önce yazı tiplerine nereden ulaşabileceğimize bakmamız gerekiyor.

Yazı tiplerini nereden bulabilirim?

Bunun için size önerebileceğim en iyi site Google’ın yazı tipleri için hazırlamış olduğu sitedir. Yani:

https://fonts.google.com

İstediğimiz yazı tipini nasıl çekeceğiz?

Buraya girerek bir çok yazı tipinden istediğinizi seçebilirsiniz. Ben örnek olarak “Ubuntu” yazı tipini seçtim. Hemen sağdaki “artı (+)” ikonuna tıklayın.

Bunu yaptıktan sonra sağ alt tarafta küçük bir panel çıkacak. Bu panele tıkladığınızda panel açılacak ve karşınıza aşağıdaki gibi bir ekran çıkacak.

Buraya kadar geldikten sonra yapacak çok az şey kalıyor. “Customize” sekmesine geliyoruz ve aşağıya kaydırıp “Latin Extended” seçeneğine tıklıyoruz.

Daha sonra tekrar “Embed” sekmesine dönüp “@Import” yazısına tıklıyoruz. Daha sonra da “style” etiketlerinin arasındaki kodu kopyalıyoruz.

Yani kodumuz:

Bu kodu kopyalayıp, daha önce düzenleme yaptığımız CSS dosyasının en başına yapıştırıyoruz.

Bunu yaptıktan sonra artık “Ubuntu” yazı tipi ailesini rahatlıkla kullanabiliriz. Son olarak daha önce “h1, h2 …” şeklinde arattığımız koddaki “font-family:” yazısının hemen yanındaki ‘Playfair Display’ yazısı yerine ‘Ubuntu’ (tırnaklarla) yazacağız.

Bunu yaptıktan sonra dosyanın son halini sitenizdeki dosyayla değiştirmeyi unutmayın.

2. Yazı tipi seçerken nelere dikkat etmeliyiz?

Sitemizdeki yazı tipinin ne olduğunu öğrenmeyi ve bu yazı tipini değiştirmeyi öğrendik. Ama şimdi de seçeceğimiz yazı tipinde nelere dikkat etmemiz gerektiğini de bilmeliyiz. Çünkü, öylesine bir yazı tipi seçersek hem sitemizde iyilik yapmaya çalışırken sitemizi daha kötü bir hale getirebiliriz, hem de yanlış seçimlerden dolayı ziyaretçileri sitemizden uzaklaştırırız.

a. Yazı tipinin Türkçe karakter desteklemesine dikkat edin.

Karşınıza çıkacak en büyük sorunlardan biri Türkçe karakter sorunu. Bir çok yazı tipinde “ş, ğ, Ş, Ğ, İ” gibi harfler desteklenmiyordur ve bu da yazılarınızın çok kötü görünmesine sebep olacaktır. Örneğin;

Yukarıdaki resimde “ğ” ve “ş” harflerinin nasıl sırıttığını fark etmişsinizdir. Bunun sebebi kullanılan yazı tipinin bu harfleri desteklemiyor olmasıdır. Bu nedenle kullandığınız yazı tipinin bu harfleri desteklediğinden emin olmalısınız.

Açıkçası bunu anlamak kesin bir yöntem yok. Bazı yöntemler var ama onların da kesin olmadığını biliyorum. En iyi yöntem deneme-yanılma yöntemidir. Yani bir yazı tipini seçeceksiniz ve sitenizde deneyeceksiniz. Eğer bir problem çıkmıyorsa onu kullanabilirsiniz.

Not: Ubuntu yazı tipi kesinlikle tüm karakterleri destekliyor. Zaten Ubuntu yazı tipi, Apple ürünlerinde gördüğünüz yazı tipidir.

b. Sitenizin konusuna uygun bir yazı tipi seçin.

Eğer sitenizi bir blog sitesi olarak kuruyorsanız, kesinlikle seçtiğiniz yazı tipinin okunaklı olması gerekiyor. Eğer daha çok tasarım odaklı bir site hazırlıyorsanız, el yazılı veya daha yumuşak ve göze hitap eden, tasarım odaklı bir  yazı tipi seçmelisiniz. Sonuçta seçtiğiniz yazı tipinin sitenizin konusuna uygun olmasına özen gösterin.

c. Yazı tipinizin boyutuna dikkat edin.

Yazı tipini seçtikten sonra boyutuna da dikkat etmelisiniz. Çok küçük yazılar kullanmamaya özen gösterin. Ama çok büyük yazılar da kullanmayın. Özellikle blog siteleri için yazıların okunaklı olması gerekiyor. Doğal olarak biraz daha büyük boyutlarda bir yazı tipi belirlemeniz daha iyi olacaktır.

3. Bunların hepsinin daha kolay bir yolu yok mu?

Eğer WordPress alt yapısı kullanıyorsanız, Easy Google Fonts eklentisini kullanabilirsiniz. Aşağıdaki butona tıklayarak eklentinin sitesine gidebilirsiniz. Anlatacak hiçbir şey yok. Eklentide her şey gayet açık ve net bir şekilde görünüyor zaten.

Easy Google Fonts 

Kategoriler:   Genel, Nasıl yapılır?, Wordpress

Yorumlar

Bir Cevap Yazın