Bir sitenin yazı tipi ve renk kodları nasıl bulunur? 5 yol
Bir sitenin yazı tipini ve renk kodlarını bulmanın yolları: Chrome geliştirici araçları, renk seçici, eklenti, görselden font bulma ve lisans uyarısı.
Bir sitenin yazı tipini ve renk kodlarını bulmak için ek bir programa gerek yok: tarayıcıda yazıya sağ tıklayıp İncele'yi seçersin, açılan panelin Hesaplanan (Computed) sekmesinde font-family satırı yazı tipini, color satırı yazının rengini gösterir. Tek tıkla bütün renkleri ve yazı tiplerini listelemek istersen bir tarayıcı eklentisi daha hızlıdır. Elinde site yerine yalnız bir görsel varsa görselden yazı tipi tanıyan araçlar kullanılır.
Bu yazıda beş yolu sırayla anlatıyoruz. En sonda, bulduğun yazı tipini kendi işinde kullanmadan önce bilmen gereken lisans konusunu ekledik. Marka için renk seçimini renk paleti ve renk psikolojisi yazılarımızda anlattık.
1. Tarayıcının geliştirici araçları
Chrome, Edge, Safari ve Firefox'ta aynı mantıkla çalışır. Chrome'da adımlar:
Neden iki ayrı yazı tipi adı görüyorum?
font-family satırında çoğu zaman birden fazla ad yazar: "Outfit", "Helvetica Neue", Arial, sans-serif gibi. Bu bir yedek listesidir. Tarayıcı ilk adı yükleyebilirse onu kullanır; yükleyemezse sıradakine geçer. Yani CSS'te ilk sırada yazan yazı tipi, ekranda göreceğin yazı tipi olmayabilir. Yazı tipi dosyası engellenmişse ya da bilgisayarında yoksa sayfa sessizce Arial'e düşer.
Bu yüzden asıl cevap Oluşturulan yazı tipleri satırındadır. Orada "Outfit" yazıyorsa ekrandaki yazı Outfit'tir; "Arial" yazıyorsa sayfa Outfit'i yükleyememiştir.
Firefox'ta bu bilgi daha da açıktır: İncele panelindeki Yazı Tipleri (Fonts) sekmesi, sayfada kullanılan yazı tiplerini ve dosyalarının nereden geldiğini listeler.
2. Renk seçiciyle sayfanın herhangi bir yerinden renk almak
Bir rengin kodunu, yazı ya da zemin olmayan bir yerden almak gerekebilir: bir düğmenin gölgesi, bir fotoğrafın içindeki ton, bir logodaki renk.
- Chrome renk seçicisi: İncele panelinde herhangi bir renk kutusuna tıkla, açılan pencerede damlalık simgesini seç ve sayfada istediğin noktaya bas. Kod anında gelir.
- Mac, Digital Color Meter: Uygulamalar > Yardımcı Programlar içinde hazır gelir. Ekranın her yerinde çalışır; Görünüm menüsünden değerleri onaltılık (HEX) gösterecek şekilde ayarlanır.
- Windows, PowerToys Renk Seçici: Microsoft'un ücretsiz PowerToys paketinin içinde. Win + Shift + C ile açılır, ekrandaki her rengi alır ve kodu panoya kopyalar.
Fotoğraftan renk alırken dikkat: fotoğraftaki her piksel farklı tondadır. Tek noktadan alınan kod, o noktanın rengidir; markanın rengi değildir. Logonun ya da düğmenin düz renkli bir yerinden almak daha doğru sonuç verir.
1. bölüm Tek tıkla
3. Tarayıcı eklentisiyle bütün renkleri ve yazı tiplerini listelemek
Geliştirici araçları tek bir öğeye bakar. Bir sitenin bütün renk paletini ve yazı tiplerini görmek istiyorsan eklenti daha hızlıdır.
Bu iş için kendi Chrome eklentimizi yaptık: Piktram: paylaşım önizleme, renk ve yazı tipi (yeni sekmede açılır). Ücretsiz ve hiçbir veri toplamıyor; yalnız simgesine bastığın sekmeyi okuyor, her şey tarayıcıda oluyor.
- Renkler: sayfanın kullandığı renkleri zemin, yazı ve kenar olarak ayırıp sayfadaki paylarıyla listeler. Renge basınca kodu kopyalanır; bütün paleti liste ya da CSS değişkeni olarak alabilirsin.
- Yazı tipleri: sayfadaki yazı tiplerini kalınlıkları ve boylarıyla gösterir; Google Fonts'ta aramayı tek tıka indirir.
- Paylaşım önizleme: sayfanın bağlantısı WhatsApp, LinkedIn ve X'te paylaşılınca çıkacak kartı gösterir; başlık, açıklama ve paylaşım görseli eksikse söyler.
Renklerin "sayfadaki payıyla" listelenmesi işe yarar: bir sitenin rengini öğrenmek isteyen çoğu kişi aslında ana rengi, ikincil rengi ve vurgu rengini arar. Payı en yüksek iki renk çoğu zaman zemin ve yazıdır; marka rengi genellikle düşük paylı ama düğmelerde ve bağlantılarda tekrar eden renktir.
4. Görselden yazı tipi bulmak
Elinde site yoksa, yalnız bir ekran görüntüsü, afiş ya da logo varsa yazı tipini görselden tanıyan araçlar kullanılır:
| Araç | Nasıl çalışır |
|---|---|
| WhatTheFont (MyFonts) | Görseli yüklersin, harfleri seçersin, benzer yazı tiplerini listeler. |
| Font Squirrel Matcherator | Aynı mantık; ücretsiz ve ticari kullanıma açık alternatifleri de gösterir. |
| Identifont | Görsel yerine harflerin özelliklerine dair soruları cevaplayarak arar. |
Bu araçlardan iyi sonuç almanın üç kuralı var: görseli düz ve net çek, en az birkaç farklı harf içeren bir kelime seç ve harflerin birbirine değmediği bir satır kullan. Logolarda sonuç çoğu zaman tam eşleşme çıkmaz; çünkü logo yazıları sıklıkla bir yazı tipinden başlayıp elle değiştirilir. Logonun nasıl çizildiğini logo tasarımı nasıl yapılır yazımızda anlattık.
5. Sayfanın kaynağında aramak
Teknik tarafa biraz daha yakınsan sayfanın kaynağında da bakabilirsin. Sayfada sağ tıklayıp Sayfa kaynağını görüntüle'yi seç, Ctrl + F (Mac'te Cmd + F) ile şunları ara:
fonts.googleapis.com: site Google Fonts kullanıyor; bağlantının içinde yazı tipinin adı yazar.use.typekit.net: site Adobe Fonts kullanıyor.@font-face: site yazı tipi dosyasını kendisi barındırıyor; dosya adı çoğu zaman yazı tipinin adıdır.--colorya da--brand: sitenin renk değişkenleri. İyi kurulmuş sitelerde bütün palet burada tek yerde tanımlıdır.
Renk kodlarında böyle bir kısıtlama yoktur; bir HEX kodu kimsenin malı değildir. Ama bir markanın bütün renk paletini, yazı tipini ve görsel dilini birlikte kopyalamak, markanın tanınırlığından yararlanmak anlamına gelebilir ve marka hukuku açısından risklidir. Referans almak başka, aynısını yapmak başka.
Bulduğun renkleri ve yazı tiplerini nasıl kullanmalı?
Başka bir sitenin renk ve yazı tipini bulmak, kendi markan için başlangıç noktası olarak işe yarar. Ama bir paleti doğrudan almak yerine şu soruları sor:
- Bu renk bizim sektörümüzde zaten herkesin kullandığı renk mi?
- Bu yazı tipi küçük boyda, telefonda ve Türkçe karakterlerde (ğ, ş, ı, İ) okunuyor mu?
- Ana renk zemin üstünde yeterli kontrast veriyor mu? Erişilebilirlik için normal metinde en az 4,5:1 oran gerekir.
Kendi paletini kurarken rollere ayırmayı, kontrastı ve 60-30-10 kuralını renk paleti rehberimizde anlattık; orada indirebileceğin bir çalışma sayfası da var.
Sık sorulanlar
Bir sitenin yazı tipi nasıl bulunur?
Yazıya sağ tıklayıp İncele'yi seç, açılan panelde Hesaplanan sekmesine geç ve font-family satırına bak. Ekranda gerçekten kullanılan yazı tipini aynı sekmenin altındaki Oluşturulan yazı tipleri satırı gösterir.
Bir sitenin renk kodu nasıl bulunur?
İncele panelinde color ve background-color satırları yazı ve zemin rengini verir. Sayfanın herhangi bir noktasındaki rengi almak için Chrome'un renk seçicisindeki damlalığı, Mac'te Digital Color Meter'ı ya da Windows'ta PowerToys Renk Seçici'yi kullanabilirsin.
Görseldeki yazı tipi nasıl bulunur?
Görseli WhatTheFont ya da Font Squirrel Matcherator gibi bir araca yükle, harfleri seç; araç benzer yazı tiplerini listeler. Net, düz ve birkaç farklı harf içeren bir kelime en iyi sonucu verir.
Bir sitede gördüğüm yazı tipini kullanabilir miyim?
Lisansına bağlı. Google Fonts'taki yazı tiplerinin çoğu ticari işte de ücretsiz kullanılabilir; ücretli yazı tipleri ise lisans gerektirir. Siteden yazı tipi dosyasını indirip kullanmak lisans ihlalidir.
HEX kodu nedir?
HEX kodu, bir rengin # ile başlayan altı haneli onaltılık gösterimidir. İlk iki hane kırmızıyı, ortadaki iki hane yeşili, son iki hane maviyi verir; #FFFFFF beyaz, #000000 siyahtır.
CSS'teki yazı tipi neden ekranda farklı görünüyor?
font-family satırı bir yedek listesidir. Tarayıcı ilk yazı tipini yükleyemezse sıradakine geçer. Ekranda görünen yazı tipini öğrenmek için Oluşturulan yazı tipleri satırına bak.
Markan için kendine ait bir renk paleti ve yazı tipi düzeni kurmak istersen marka kimliği hizmetimize göz at.
