Web sitesi için renk ve yazı tipi seçerken iki hedefi birlikte gözetin: marka kimliğini yansıtmak ve metni herkes için kolay okunur kılmak. Pratik kural şudur: az sayıda renk, yeterli kontrast (normal metin için 4,5:1), bir ya da iki yazı tipi ailesi ve rahat bir metin boyutu. Güzel görünen ama okunmayan bir site müşteriyi kaybettirir.

Marka renkleri çoğu zaman logodan gelir; ama logoda iyi duran bir açık renk, gövde metni için kötü bir seçim olabilir. Aynı şekilde süslü bir yazı tipi başlıkta hoş durur, ama paragraf boyunca okumak zordur. Bu yazı, işletme siteniz için renk ve yazı tipi kararlarını nasıl vereceğinizi adım adım anlatıyor. Yeni site ya da yenileme için web tasarım hizmetimizi inceleyebilirsiniz.

Önce marka kimliğini netleştirin

Renk ve yazı tipi, markanın görünür sesidir. Seçimden önce üç soruyu cevaplayın:

  1. Marka nasıl hissettirmeli? Güvenilir ve ciddi mi, samimi ve sıcak mı, enerjik mi?
  2. Kime hitap ediyor? Hedef kitlenizin yaşı, alışkanlığı ve cihazı ne?
  3. Rakiplerden nasıl ayrışıyor? Aynı sektördeki sitelerin hepsi aynı renkteyse farklı bir seçim fark yaratabilir.

Bu cevaplar, rastgele beğenilen renklerin yerine gerekçeli bir seçim yapmanızı sağlar. Mevcut logonuz, tabelanız ve basılı malzemeleriniz varsa onlarla tutarlı kalın; müşteri sizi her yerde aynı biçimde tanımalı.

Renk paleti nasıl kurulur?

Küçük bir işletme sitesi için yeterli palet:

  • Zemin rengi: Sayfa arka planı (çoğu zaman beyaz, açık ya da koyu).
  • Metin rengi: Gövde yazısı; zeminle yüksek kontrast.
  • Ana vurgu rengi: Düğmeler ve önemli bağlantılar için marka rengi.
  • İkincil vurgu (isteğe bağlı): Etiket, çizgi, küçük ayrıntılar.
  • Durum renkleri: Başarı, uyarı ve hata mesajları için.

Her renge bir görev verin ve her yerde aynı görevi kullanın: ana düğmeler hep aynı renkte olsun. Çok sayıda renk dikkat dağıtır ve markayı belirsizleştirir.

Kontrast: okunurluğun sayısal ölçüsü

web.dev’e göre normal boyutlu metin (görsel içindeki metin dahil) WCAG minimumu için 4,5:1 kontrast oranına sahip olmalıdır; büyük metin ve temel simgeler için oran 3:1’dir. Büyük metin en az 18 punto/24 piksel ya da 14 punto/18,5 piksel kalın olarak tanımlanır; logolar ve dekoratif öğeler bu koşuldan muaftır (renk kontrastı).

Bunun pratik karşılığı:

  • Marka rengi açık turuncu ya da açık mavi ise bunu gövde metni için değil, büyük başlık ve düğme zemini için kullanın.
  • Düğme zemini ile düğme metni arasındaki oranı ayrıca ölçün.
  • Fotoğraf üstüne yazı koyuyorsanız arkaya koyu bir katman ekleyin.
  • Chrome Geliştirici Araçları’ndaki renk seçici, kontrast oranını gösterir; ayrıca Adobe Color gibi araçlar da bu iş için kullanılabilir.

Erişilebilirlik kurallarının tamamı için web sitesi erişilebilirliği: temel kurallar yazımıza bakın.

Hizmet almak için iletişime geçin. SEO’yu baştan düşünerek tasarlanmış, hızlı ve telefonda rahat bir site kuralım. Web tasarım hizmetimizi inceleyin ya da bize yazın.

Renkle tek başına bilgi vermeyin

Renk körlüğü olanlar için ve parlak ışıkta ekranına bakanlar için renk tek başına bilgi taşımamalıdır. web.dev, bilgi aktarmak ya da bir öğeyi ayırt etmek için tek başına renk kullanılmamasını, desen, metin ya da simge gibi tanımlayıcı eklenmesini önerir. Örnekler: hata mesajında kırmızı yanında “Telefon numarası eksik” yazısı ve bir simge; grafikte renk yanında desen ya da doğrudan etiket; bağlantıyı yalnızca renkle değil altı çizgiyle de ayırt etmek.

Yazı tipi nasıl seçilir?

Yazı tipi seçiminde okunurluk ve tutarlılık önceliklidir. web.dev’e göre erişilebilir bir tasarımın en hızlı yolu yaygın bir yazı tipi seçmektir (Arial, Times New Roman, Calibri, Verdana gibi); engelli kullanıcılarla yapılan birçok çalışmada yaygın yazı tipleri daha hızlı okuma ve daha derin anlama sağlamıştır. Süslü ya da el yazısı biçimlerden ve yalnızca büyük harf karakterlerden kaçınılması önerilir (tipografi).

Uygulama:

  • Bir ya da iki yazı tipi ailesi kullanın: biri başlık, biri gövde için ya da tek bir aile.
  • Gövde metni için sade, okunaklı bir yazı tipi seçin.
  • Süslü yazı tipini yalnızca kısa başlık ya da logo için düşünün; paragrafta kullanmayın.
  • Türkçe karakter desteğini test edin: ğ, ş, ı, İ, ö, ü, ç harfleri doğru görünüyor mu?
  • Kalın ve ince ağırlıkları sınırlı tutun; çok ince ağırlıklar küçük boyutta okunmaz.

Türkçe karakter testi önemlidir: bazı yazı tipleri “İ” ve “ı” harflerini eksik ya da başka bir yazı tipinden alarak gösterebilir. Sitede gerçek içerikle (“Çalışma saatleri, İletişim, Öğle molası”) önizleyin.

Boyut, satır aralığı ve satır uzunluğu

Metnin okunur olması yalnızca yazı tipine değil, ölçüsüne de bağlıdır. web.dev, boyut, aralık ve karakter aralığı gibi öğelerin metni işlemeyi etkilediğini söyler. Genel iyi uygulamalar:

  • Gövde metni mobilde rahat okunacak boyutta olsun; çok küçük metin kullanmayın.
  • Satır aralığını sıkıştırmayın; paragraflar nefes alsın.
  • Çok uzun satırlardan kaçının; satır uzunluğunu makul tutun.
  • Başlık hiyerarşisi (H1, H2, H3) boyut ve ağırlıkla ayırt edilsin.
  • Metni dar sütunlara sıkıştırmak yerine bol boşluk bırakın.

Küçük punto kullanımı mobilde sık görülen hatalardandır; siteyi gerçek telefonunuzda açıp gözünüzü yormadan okuyup okuyamadığınıza bakın ve mümkünse farklı yaştaki birkaç kişiye de gösterin.

Koyu ve açık tema

Bazı kullanıcılar koyu tema ister; bazıları ışık hassasiyeti nedeniyle gerekli bulur. web.dev, @prefers-color-scheme medya sorgusuyla koyu tema, @prefers-contrast ile yüksek kontrastlı tema oluşturmayı anlatır. İkisini birden desteklemek zorunda değilsiniz; ama bir tema seçtiyseniz o temada kontrast koşullarını sağlayın. Hangi yolu seçerseniz seçin, metin ve zemin renklerini seçtiğiniz tema içinde ayrıca ölçün ve gerçek cihazda deneyin.

Yazı tipi dosyası ve hız

Özel yazı tipi dosyaları sayfa boyutuna ve yüklemeye etki eder. Gerekmedikçe çok sayıda ağırlık ve stil yüklemeyin; yalnızca kullandığınız ağırlıkları dahil edin. Yazı tipi dosyalarının hızlı yüklendiğinden emin olmak ve ölçümle doğrulamak iyi bir uygulamadır. Hız ölçümü için site hızı ölçümü yazımıza bakın.

Renk ve yazı tipini karar defterine yazın

Seçtiğiniz renklerin kodlarını (ör. HEX), yazı tiplerini, boyut ve ağırlıklarını, hangi öğede nerede kullanılacağını kısa bir belgede toplayın. Düğme, bağlantı, başlık, gövde ve uyarı renklerinin her biri için ölçülmüş kontrast oranını yanına yazın. Böylece siteyi yenilerken, yeni bir sayfa eklerken ya da başka biri çalışırken aynı kararlar korunur; basılı malzeme, sosyal medya ve tabela tasarımlarında da aynı paletle devam edersiniz. Belge bir sayfayı geçmesin; amacı kısıtlamak değil, tutarlılığı kolaylaştırmaktır.

Denizli’den bir örnek

Örnek (hayalî bir işletme için): Denizli’de bir pastane, logosundaki açık pembe rengi gövde metni ve düğmelerde kullanıyor; sitede üç farklı süslü yazı tipi var.

  • Palet: Pembe yalnızca büyük başlıklarda ve dekoratif öğelerde kalıyor; gövde metni koyu griye, düğme zemini koyulaştırılmış bir tona çekiliyor.
  • Kontrast: Metin ve düğme renkleri 4,5:1 oranına göre ölçülüp ayarlanıyor.
  • Yazı tipi: Gövde için sade bir yazı tipi, başlık için tek bir ikinci aile seçiliyor; Türkçe karakterler test ediliyor.
  • Kontrol: Sayfa gerçek telefonda ve dış mekânda parlak ışıkta okunuyor mu diye deneniyor.

Bu örnek bir sonuç vaadi değildir.

Sık yapılan altı hata

  1. Marka rengini körlemesine gövde metnine uygulamak.
  2. Üçten fazla yazı tipi ailesi kullanmak.
  3. Süslü yazı tipini paragrafta kullanmak.
  4. Türkçe karakterleri test etmemek.
  5. Renkle tek başına bilgi vermek.
  6. Siteyi yalnızca bilgisayarda kontrol etmek.

Denizli SEO bu konuda nasıl yardımcı olur?

Renk ve yazı tipi, markanızın ilk izlenimidir. Web tasarım hizmetimizde:

  • marka kimliğinize uygun, sade ve tutarlı bir renk paleti ve tipografi sistemi kurarız,
  • metin ve düğme renklerini kontrast kurallarına göre ölçeriz,
  • Türkçe karakter ve mobil okunurluk testlerini yapar, yazı tipi dosyalarını hıza göre ayarlarız,
  • tasarım kararlarını yazılı bir rehberde toplarız.

Siteniz için tasarım yönü belirlemek isterseniz bize yazın.

Sizin için de yapalım mı? Mevcut sitenizi yenilemek ya da sıfırdan kurmak istiyorsanız ihtiyacınızı birlikte netleştirelim. Hizmet almak için iletişime geçin; ayrıntı web tasarım sayfamızda.

Sık sorulan sorular

Marka renklerim açık, ne yapmalıyım?

Açık rengi büyük başlık ve dekoratif öğelerde kullanın; gövde metni ve düğme metni için daha koyu bir ton seçin ve kontrast oranını ölçün.

Kaç yazı tipi kullanmalıyım?

Bir ya da iki yazı tipi ailesi çoğu site için yeterlidir.

Süslü yazı tipi kullanabilir miyim?

Kısa başlık ya da logo için olabilir; paragraf metninde okunurluğu düşürdüğü için kaçının.

Kontrast oranı kaç olmalı?

Normal metin için 4,5:1, büyük metin ve temel simgeler için 3:1 (WCAG minimumu).

Koyu tema zorunlu mu?

Hayır. Hangi temayı seçerseniz seçin kontrast koşullarını sağlayın.

Kaynaklar