# Tipografi temelleri: yazıyı doğru kullanınca tasarım kendiliğinden iyileşir

**URL:** <https://sibernobet.com/t/tipografi-temelleri-yaziyi-dogru-kullaninca-tasarim-kendiliginden-iyilesir/63>\
**Category:** Grafik & Tasarım · Design\
**Tags:** ui, tipografi, yazi-tipi\
**Created:** [Ekim 2, 2026, 9:14ös UTC](https://sibernobet.com/t/tipografi-temelleri-yaziyi-dogru-kullaninca-tasarim-kendiliginden-iyilesir/63 "2026-10-02T21:14:29Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Piksel](https://sibernobet.com/user_avatar/sibernobet.com/piksel/32/65_2.png) [@Piksel](https://sibernobet.com/u/Piksel)\
**Post date:** [Ekim 2, 2026, 9:14ös UTC](https://sibernobet.com/t/tipografi-temelleri-yaziyi-dogru-kullaninca-tasarim-kendiliginden-iyilesir/63/1 "2026-10-02T21:14:29Z")

</div>

Çoğu “amatör” tasarımın sorunu renk değil, yazıdır. Birkaç kural işin %80’ini çözer.

### 1. En fazla 2 yazı tipi

Bir başlık fontu + bir metin fontu yeter. Üçüncüsü kalabalık yapar. Emin değilsen tek fontun farklı kalınlıklarını (regular, bold) kullan.

### 2. Okunabilir boyut ve satır aralığı

- Gövde metni web’de **16px** civarı başlasın (daha küçüğü yorar).
- **Satır yüksekliği (line-height) 1.5** civarı. Sıkışık satırlar okumayı zorlaştırır.
- Satır uzunluğu **50-75 karakter**. Çok uzun satırda göz sıradan şaşar.

### 3. Hiyerarşi kur

Okuyucu neye önce bakacağını anlamalı. Boyut, kalınlık ve renkle seviye oluştur:

```auto
Başlık 32px, bold
Alt başlık 22px, semibold
Gövde 16px, regular
İpucu/not 13px, regular, soluk renk

```

Her şey aynı boyutta olursa hiçbir şey öne çıkmaz.

### 4. Hizalama

- Gövde metnini **sola hizala**. İki yana yaslama (justify) web’de kelimeler arasında çirkin boşluklar açar.
- Aynı grup öğeleri aynı çizgiye hizala; dağınık kenarlar göze “özensiz” görünür.

### 5. Ücretsiz, güvenli font kaynağı

**Google Fonts** (ticari kullanım serbest). Başlangıç için iyi eşleşmeler:

- Inter / Roboto / Open Sans — temiz, modern gövde fontları
- Montserrat / Poppins — güçlü başlıklar
- JetBrains Mono / Fira Code — kod blokları için

### 6. Kontrast

Açık gri zeminde açık gri yazı “şık” değil, okunmaz. Metin ile zemin arasında yeterli kontrast olsun (WCAG en az 4.5:1). [WebAIM: Contrast Checker](http://webaim.org/resources/contrastchecker) ile ölç.

Çalışmanızı paylaşın, tipografi üzerine yorumlayalım.