Web Sitesi İçin Renk ve Yazı Tipi Seçimi

01Renk ve Yazı Tipi Neden Bu Kadar Önemli?

Ziyaretçi bir sayfadaki metni okumadan önce renkleri ve harflerin biçimini algılar. Bu ilk izlenim, firmanın ciddi, sıcak, yenilikçi ya da güvenilir olup olmadığına dair hızlı bir yargı oluşturur.

Renk ve tipografi yalnızca estetik bir tercih değildir; okunabilirlik, erişilebilirlik ve dönüşüm üzerinde doğrudan etkisi vardır. Soluk gri bir metin şık görünebilir ama okunmuyorsa ziyaretçi sayfayı terk eder. Belirsiz bir düğme rengi ise en önemli eylemi gözden kaçırtır.

Bu yüzden renk ve font kararları, sitenin geri kalanı tasarlanmadan önce verilmesi gereken temel kararlardır. Bu kararlar UI/UX tasarım sürecinin ilk adımlarından biridir.

02Kurumsal Renklerden Palet Kurmak

Logonuz ve basılı malzemeleriniz varsa, renk paletinin çıkış noktası onlardır. Özellikle bir kurumsal web sitesi markanın dijital yüzüdür; kartvizitte lacivert olan bir marka ekranda turuncu görünmemelidir. Kurumsal kimlik henüz netleşmediyse önce marka yönetimi çalışmasıyla bu temeli atmak daha sağlıklıdır.

Kurumsal renkler genellikle bir web paleti için yeterli değildir. Bir ana renge ek olarak arka plan, metin, kenarlık, uyarı ve başarı durumları için de tonlar gerekir. İyi bir web tasarım renk paleti şu katmanlardan oluşur:

• Ana renk: Marka rengi; başlıklarda, menüde ve vurgulu alanlarda.
• Vurgu rengi: Düğmeler ve bağlantılar gibi eylem çağrıları için, ana renkle uyumlu ama ondan ayrışan bir ton.
• Nötr tonlar: Beyazdan koyu griye uzanan, arka plan ve metin için dört beş ton.
• Durum renkleri: Hata için kırmızı, başarı için yeşil, uyarı için sarı tonları; formlarda ve bildirimlerde.

60-30-10 Kuralı

İç mimarlıktan gelen bu pratik kural web için de işe yarar: Yüzeylerin yaklaşık yüzde 60’ı nötr arka plan, yüzde 30’u ana renk ve ikincil alanlar, yüzde 10’u vurgu rengi. Bu oran bir zorunluluk değil, rengin sayfayı boğmasını engelleyen bir denge rehberidir.

Vurgu Rengini Koruyun

Vurgu rengi her yerde kullanılırsa değerini kaybeder. Teklif al ya da hemen ara gibi ana eylemler için ayırdığınız rengi dekoratif alanlarda kullanmamak, ziyaretçinin gözünü doğru yere yönlendirir.

03Kontrast ve Erişilebilirlik

Renk seçiminde en sık atlanan konu kontrasttır. WCAG yönergelerine göre normal metin ile arka plan arasında en az 4,5:1 kontrast oranı, büyük metinlerde ise en az 3:1 oran olmalıdır. Açık gri üzerine beyaz yazı ya da pastel bir zemine açık renk metin bu eşiğin altında kalır.

Kontrastı tahminle değil ölçerek kontrol edin. Tarayıcıların geliştirici araçları ve ücretsiz kontrast denetleyicileri, iki rengin oranını anında gösterir. Ayrıca bilgiyi yalnızca renkle vermeyin: Bir form alanındaki hatayı sadece kırmızı kenarlıkla değil, açıklayıcı bir metinle de belirtin.

04Renk Psikolojisi Ne Kadar Geçerli?

Mavinin güven, yeşilin doğa, kırmızının enerji çağrıştırdığı sıkça söylenir. Bu çağrışımlar kültürel olarak yaygındır ama evrensel kurallar değildir; aynı renk farklı sektörlerde ve farklı tonlarda bambaşka hisler uyandırabilir.

Daha güvenilir bir yaklaşım, sektörünüzdeki alışkanlıklara bakıp bilinçli bir fark yaratmaktır. Tüm rakipler lacivert kullanıyorsa, aynı tonu seçmek sizi kalabalıkta kaybettirebilir; tamamen alışılmadık bir renk ise güven sorununa yol açabilir. Ana rengin markanızla, vurgu renginin ise eylemle ilişkilendirilmesi çoğu zaman en dengeli sonucu verir.

Seçim sürecinde birkaç aday paleti aynı ana sayfa taslağına uygulayıp yan yana karşılaştırmak, soyut tartışmalardan çok daha hızlı sonuç verir. Karar verirken kişisel zevk yerine üç soruya bakın: Renk markayı hatırlatıyor mu, metin rahat okunuyor mu ve ana eylem düğmesi sayfada ilk bakışta fark ediliyor mu? Bu üç sorunun yanıtı evetse palet işini yapıyor demektir.

05Web Font Seçimi Nasıl Yapılır?

Web font seçimi, renkten daha az konuşulan ama okunabilirliği daha çok etkileyen bir karardır. İlk kural sınırlı kalmaktır: Başlıklar için bir, gövde metni için bir font, yani en fazla iki aile. Çoğu durumda tek bir ailenin farklı kalınlıkları da yeterlidir.

Türkçe Karakter Desteği

Türkçe bir site için fontun ğ, ş, ı, İ, ç, ö, ü harflerinin tamamını desteklemesi şarttır. Desteklemeyen fontlarda bu harfler başka bir yazı tipiyle gösterilir ve kelimelerin ortasında biçim farkı oluşur. Fontu seçmeden önce Ilgaz, Işık, Şişli gibi kelimelerle deneyin; büyük İ ve küçük ı özellikle sorunlu olabilir.

Serif mi, Sans-Serif mi?

Tırnaklı (serif) fontlar klasik ve zarif bir izlenim verir, başlıklarda etkilidir. Tırnaksız (sans-serif) fontlar ise ekranda, özellikle küçük boyutlarda daha temiz okunur ve gövde metni için yaygın tercihtir. Bir serif başlık ile bir sans-serif gövde metni sık kullanılan, dengeli bir eşleşmedir.

06Okunaklı Tipografinin Ölçüleri

İyi bir font bile yanlış ölçülerle kullanılınca yorucu olur. Tipografi ayarlarında şu değerler sağlam bir başlangıç noktasıdır:

07Fontlar Siteyi Yavaşlatmasın

Her font dosyası sayfanın yükleme süresine eklenir. Beş farklı kalınlık ve iki aile yüklemek, özellikle mobil bağlantılarda ilk görüntüyü geciktirir. Font dosyalarını WOFF2 biçiminde kullanmak, yalnızca ihtiyaç duyulan kalınlıkları yüklemek ve karakter setini Latin ile Türkçe harflerle sınırlamak dosya boyutunu belirgin biçimde azaltır.

Font yüklenene kadar metnin görünmez kalmaması için font-display ayarı kullanılır. Bu ayarlar, hız ve performans yönetimi çalışmalarında ilk bakılan kalemler arasındadır. Renk değerlerini de CSS değişkenleri olarak tanımlamak, paleti tek yerden yönetmeyi ve koyu tema gibi varyasyonları kolaylaştırır.

:root {
  --renk-ana: #1d3557;
  --renk-vurgu: #e76f51;
  --renk-metin: #1f2933;
  --renk-zemin: #ffffff;
}

@font-face {
  font-family: 'Gövde';
  src: url('/fontlar/govde.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

body {
  font-family: 'Gövde', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--renk-metin);
  background: var(--renk-zemin);
}

08Seçimi Test Etmek

Renk ve fontu bir tasarım dosyasında değil, gerçek içerikle ve gerçek cihazlarda test edin. Güneş altında bir telefonda, eski bir dizüstü ekranında ve geniş bir monitörde aynı sayfaya bakmak, kâğıt üzerinde görünmeyen sorunları ortaya çıkarır.

Tutarlılık da test kadar önemlidir. Bir kez belirlenen palet ve font, sitenin olması gereken sayfalarının hepsinde aynı kurallarla uygulanmalıdır. Hazır şablonlar bu esnekliği çoğu zaman sınırlar; farkı hazır tema mı özel tasarım mı yazımızda inceledik. Konuyla ilgili diğer yazılar için marka kimliği etiketine göz atabilirsiniz.