CSS Renkler ve Tipografi

Bir web sitesini inşa etmeyi bir ev yapmaya benzetirsek, HTML o evin sağlam tuğlaları, duvarları ve taşıyıcı kolonlarıdır. CSS (Cascading Style Sheets – Basamaklı Stil Şablonları) ise bu evin iç mimarisi, boyası, mobilyalarının tasarımı ve genel atmosferidir. İnternette gezindiğinizde düz, siyah-beyaz metin yığınları yerine modern, estetik ve göz yormayan web sayfaları görüyorsanız, bu tamamen CSS’in eseridir.

Web tasarımına ilk defa adım atıyorsanız, sayfanızın profesyonel ve kullanıcı dostu görünmesini sağlayacak en önemli iki CSS kavramı Renkler (Colors) ve Metin Biçimlendirme (Tipografi / Typography) özellikleridir. Bu rehberde, HTML iskeletinizi CSS ile nasıl renklendireceğinizi, yazı tiplerini nasıl yöneteceğinizi ve bu işlemleri yaparken SEO (Arama Motoru Optimizasyonu) ile Erişilebilirlik kurallarına nasıl uyacağınızı bol örneklerle öğreneceksiniz.

1. CSS’te Renkler (Colors): Dünyanızı Renklendirin

CSS’te renkler, kullanıcı deneyimini doğrudan etkiler. CSS bize renkleri tanımlamak ve kullanmak için çok çeşitli ve esnek yöntemler sunar.

Web sayfasında renkleri başlıca şu özelliklerle (properties) uygularız:

• color: Doğrudan metnin (yazının) kendi rengini değiştirir.
• background-color: Bir elemanın (örneğin bir div kutusunun, sayfanın tamamının veya bir butonun) arka plan rengini değiştirir.
• border-color: Elemanların etrafındaki kenarlıkların rengini belirler.

Peki bu renklere değer olarak ne yazıyoruz? CSS’te renk belirtmenin 4 temel yöntemi vardır:

A. İsimlendirilmiş Renkler (Named Colors)

CSS, İngilizce olarak tanımlanmış standart renk isimlerini doğrudan tanır. HTML ve CSS standartlarında red, blue, black, white, yellow, orange gibi 100’den fazla renk ismi doğrudan kullanılabilir. Örnek:

h1 {
  color: red; /* Başlık metnini kırmızı yapar */
  background-color: black; /* Arka planı siyah yapar */
}

B. HEX (Onaltılık) Renk Kodları

Web tasarımcılarının en çok kullandığı, profesyonel renk formatıdır. Diyez (#) işareti ile başlar ve RGB (Kırmızı, Yeşil, Mavi) renklerinin onaltılık (hexadecimal) sistemdeki oranlarını temsil eden 6 karakterden oluşur. Örnekler: #000000 tam siyahı, #FFFFFF tam beyazı, #FF0000 ise saf kırmızıyı temsil eder.

C. RGB ve RGBA Formatı

Renkleri, doğadaki ana ışık renkleri olan Red (Kırmızı), Green (Yeşil) ve Blue (Mavi) değerlerini 0 ile 255 arasında rakamlarla karıştırarak elde etme yöntemidir. RGBA ise buna mükemmel bir özellik olan “Alpha” (Saydamlık/Opaklık) değerini ekler. Alpha değeri 0 (tamamen saydam/görünmez) ile 1 (tamamen mat) arasında ondalıklı bir sayı alır. Örnek:

p {
  /* Yarı saydam (0.5), saf mavi renkli bir paragraf */
  color: rgba(0, 0, 255, 0.5);
}

D. HSL ve HSLA Formatı

Modern CSS’in sunduğu ve tasarımcılar tarafından çok sevilen bu format Hue (Ton), Saturation (Doygunluk) ve Lightness (Parlaklık) anlamına gelir. Ton değeri, renk çarkındaki 0 ile 360 derece arasındaki açıyı temsil eder (Örn: 0 kırmızı, 120 yeşil, 240 mavidir). Doygunluk ve Parlaklık ise yüzde (%) olarak verilir.

2. CSS Tipografi (Typography): Okunabilirliğin Sanatı

Bir web sitesinin içeriğinin %90’ından fazlası metinlerdir. Metinlerin nasıl göründüğü (Tipografi), sitenizin kalitesini ve profesyonelliğini belirler. CSS’te metinleri şekillendirmek için aşağıdaki altın özellikleri kullanırız:

A. Yazı Tipi Ailesi: font-family

Metninizin hangi yazı karakteriyle gösterileceğini belirler. Cihazdan cihaza yüklü olan fontlar değişebileceği için her zaman “yedek” (fallback) fontlar virgülle ayrılarak yazılır. CSS’te temel olarak tırnaklı (serif), tırnaksız (sans-serif) ve daktilo/kod tarzı eşit aralıklı (monospace) genel font aileleri vardır.

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

B. Yazı Boyutu: font-size

Metnin büyüklüğünü ayarlar. px (piksel), em veya rem gibi ölçü birimleri kullanılır. Erişilebilirlik (ekranı yakınlaştırma özellikleri) ve modern mobil uyumluluk için px yerine göreceli bir birim olan rem (root em) kullanmak sektör standardıdır.

C. Yazı Kalınlığı ve Stili: font-weight ve font-style

• font-weight: Metnin ne kadar kalın olacağını belirler. normal, bold (kalın), bolder veya 100’den 900’e kadar yüzlük dilimlerle rakamsal değerler alabilir.
• font-style: Metni eğik (italik) yapmak için italic değerini alır.

D. Satır Yüksekliği ve Yaslama: line-height ve text-align

• line-height: Uzun paragrafların rahat okunabilmesi için satırlar arasındaki dikey boşluğu ayarlar. Genellikle font boyutunun 1.5 veya 1.6 katı (Örn: line-height: 1.6;) olarak ayarlanması okunabilirliği kusursuz yapar.
• text-align: Metni sağa (right), sola (left), ortaya (center) veya gazete gibi iki yana (justify) yaslamak için kullanılır.

E. Metin Süslemeleri: text-decoration ve text-transform

• text-decoration: En sık kullanım amacı, linklerin (<a> etiketleri) altındaki varsayılan ve çirkin mavi çizgiyi kaldırmaktır (text-decoration: none;). Metnin üstünü veya altını çizmek için de kullanılır.
• text-transform: HTML’de nasıl yazıldığına bakılmaksızın metni CSS ile tamamen BÜYÜK HARF (uppercase), küçük harf (lowercase) veya Baş Harfleri Büyük (capitalize) yapmanızı sağlar.

3. Özel Web Fontları (Google Fonts Kullanımı)

Geçmişte web tasarımcıları, sadece kullanıcının bilgisayarında zaten yüklü olan “Arial” veya “Times New Roman” gibi kısıtlı “Güvenli Web Fontları”na (Browser-Safe Fonts) mahkumdu. Ancak günümüzde CSS’in @font-face özelliği sayesinde internet üzerinden sınırsız font yükleyebiliyoruz.

En popüler yöntem, Google Fonts kullanmaktır. Sitenize özel bir font eklemek için HTML’inizin <head> bölümüne Google’ın verdiği <link> etiketini yerleştirirsiniz. Ardından CSS dosyanızda bunu çağırırsınız:

/* Google fontunu HTML'e link ile ekledikten sonra CSS'te kullanım: */
h1 {
  font-family: 'Roboto', sans-serif;
}

4. SEO ve Erişilebilirlik (Accessibility) Altın Kuralları

Renkleri ve fontları seçerken sadece göz zevkinizi değil, Arama Motorlarını (Google SEO) ve özel gereksinimli bireyleri (Erişilebilirlik) de düşünmeniz zorunludur:

1. Renk Kontrastı (Color Contrast): Web İçeriği Erişilebilirlik Yönergeleri (WCAG), metin ile arka plan arasında en az 4.5:1 oranında bir kontrast olmasını kesin bir kuralla tavsiye eder. Koyu bir arka planda her zaman açık renkli (beyaz/krem) metinler veya tam tersi, açık arka planda koyu metinler kullanılmalıdır. Kontrastı düşük, “gri üzerine açık gri” gibi yazılar hem SEO puanınızı düşürür hem de görme zorluğu çeken veya yaşlı kullanıcıların sitenizi terk etmesine neden olur.
2. Sadece Renklere Güvenmeyin: Renk körü olan kullanıcılar (örneğin kırmızı-yeşil renk körlüğü) sitenizdeki renkleri ayırt edemeyebilir. Bu yüzden bir hata mesajını sadece kırmızı renkle belirtmek yerine, yanına bir “Uyarı/Ünlem” ikonu eklemeli veya kalın harflerle “HATA:” yazmalısınız.
3. Semantik (Anlamsal) Başlıklar Kullanın: Sırf kocaman ve kalın bir metin elde etmek için bir paragrafı (<p>) alıp CSS ile devasa boyutlara getirmeyin. Arama motorları o metnin sayfanın ana başlığı olduğunu sadece görsel büyüklüğünden değil, HTML’deki <h1> veya <h2> gibi “Semantik HTML” etiketlerinden anlar. Her zaman doğru yapısal HTML etiketlerini kullanın ve onların görünümünü CSS ile şekillendirin.

Özetle; CSS’te Renkler ve Tipografi, web sitenizin kullanıcılara hissettireceği duygunun, marka kimliğinizin ve okunabilirliğin temelidir. Yukarıda verilen color, background-color, font-family, font-size ve line-height gibi temel özellikleri kendi projelerinizde cesurca deneyerek, pürüzsüz ve erişilebilir web arayüzleri oluşturmaya hemen başlayabilirsiniz.