CSS font-weight: Kalın Yazı ve 100 ile 900 Arası De…

Q: CSS'te yazı nasıl kalın yapılır?

Elemente font-weight: bold; ya da eşdeğeri olan font-weight: 700; ver. Bir başlıktan ya da 'dan kalınlığı kaldırmak için font-weight: normal; (400) ver.

Q: font-weight bold ile 700 aynı mı?

Evet. bold 700 olarak, normal ise 400 olarak hesaplanır, bu yüzden iki biçim de aynı şekilde çizilir.

Q: CSS font-weight mı yoksa etiketi mi kullanmalıyım?

Kelimeler önemliyse , yalnızca farklı stillenen metin için , butonlar, etiketler ve başlıklar gibi görsel tasarım için font-weight kullan. Etiketler anlam taşır; özellik ise yalnızca görünümdür.

CSS'te yazı nasıl kalın yapılır

font-weight harflerin ne kadar kalın olacağını ayarlar. bold (700 ile aynı) metni kalın yapar, normal (400 ile aynı) ise normal metindir.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font weight</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    p { margin: 6px 0; }
    .normal { font-weight: normal; }
    .bold { font-weight: bold; }
    .heavy { font-weight: 900; }
    h2.plain { font-weight: normal; }
  </style>
</head>
<body>
  <p class="normal">font-weight: normal (400)</p>
  <p class="bold">font-weight: bold (700)</p>
  <p class="heavy">font-weight: 900</p>
  <h2 class="plain">A heading with font-weight: normal</h2>
</body>
</html>

Başlıklar, <th>,  ve  tarayıcının kendi stil dosyası yüzünden varsayılan olarak kalındır, bu yüzden kalınlığı kaldırmanın yolu font-weight: normal'dır. HTML'in içinde  ya da 'un ne zaman kullanılacağı için HTML kalın yazı sayfasına bak.

Sayısal ölçek: 100 ile 900

Sayıların font ailelerinin uyduğu standart adları vardır:

Değer	Yaygın adı
`100`	Thin
`200`	Extra Light
`300`	Light
`400`	Normal (Regular)
`500`	Medium
`600`	Semi Bold
`700`	Bold
`800`	Extra Bold
`900`	Black (Heavy)

1'den 1000'e her sayı geçerlidir, yani 450 ve 650 de kullanılabilir. Bir fark görüp görmeyeceğin fonta bağlıdır: tarayıcı yalnızca fontun gerçekten sahip olduğu kalınlıkları çizebilir.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Weight scale</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <p style="font-weight: 100;">100 Thin</p>
  <p style="font-weight: 200;">200 Extra Light</p>
  <p style="font-weight: 300;">300 Light</p>
  <p style="font-weight: 400;">400 Normal</p>
  <p style="font-weight: 500;">500 Medium</p>
  <p style="font-weight: 600;">600 Semi Bold</p>
  <p style="font-weight: 700;">700 Bold</p>
  <p style="font-weight: 800;">800 Extra Bold</p>
  <p style="font-weight: 900;">900 Black</p>
</body>
</html>

system-ui, işletim sisteminin arayüz fontudur ve genellikle birçok kalınlıkla gelir. Yukarıdaki her satır iki kalınlıktan birine benziyorsa sistem fontunda yalnızca normal ve kalın vardır.

Bir kalınlık neden hiçbir değişiklik göstermez

Bir font bir dosyalar kümesidir, çoğunlukla her kalınlık için bir dosya. Tam kalınlık eksik olduğunda tarayıcı sahip olduğu en yakın kalınlığı seçer:

500 için önce 500'ü, sonra daha ince kalınlıkları, sonra daha kalın olanları dener.
600 ve üstü için önce daha kalın kalınlıkları, sonra daha ince olanları dener.
Hiç kalın dosya yoksa çoğu tarayıcı normal harfleri kalınlaştırarak sahte bir kalın üretir (sentetik bold).

Birçok kalınlığı olan bir fontu, çoğu sistemde yalnızca normal ve kalın hali olan serif ile karşılaştır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Missing weights</title>
  <style>
    body { font-size: 22px; color: #111827; }
    .col { display: inline-block; vertical-align: top; margin-inline-end: 32px; }
    .sans { font-family: system-ui, sans-serif; }
    .serif { font-family: Georgia, serif; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <div class="col sans">
    <p style="font-weight: 300;">300 sans</p>
    <p style="font-weight: 500;">500 sans</p>
    <p style="font-weight: 600;">600 sans</p>
  </div>
  <div class="col serif">
    <p style="font-weight: 300;">300 serif</p>
    <p style="font-weight: 500;">500 serif</p>
    <p style="font-weight: 600;">600 serif</p>
  </div>
</body>
</html>

Serif sütununda 300 ve 500 genellikle normal yüze, 600 ise kalın yüze düşer. "font-weight çalışmıyor" sorularının çoğunun cevabı budur: CSS doğrudur, fontta o kalınlık yoktur. Değişken bir font (kalınlık ekseni olan tek bir dosya) kalınlık aralığındaki her değeri akıcı şekilde çizer.

bolder ve lighter

bolder ve lighter, elementin miras aldığı kalınlığa göredir. Sabit bir miktar eklemek yerine bir sonraki kalınlık grubuna geçerler:

Ebeveyn kalınlığı	`bolder` sonucu	`lighter` sonucu
100 ile 349	400	100
350 ile 549	700	100
550 ile 749	900	400
750 ile 900	900	700

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>bolder and lighter</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; color: #111827; }
    .bolder { font-weight: bolder; }
    .lighter { font-weight: lighter; }
  </style>
</head>
<body>
  <p style="font-weight: 400;">400 with <span class="bolder" id="a">bolder</span> and <span class="lighter" id="b">lighter</span></p>
  <p style="font-weight: 700;">700 with <span class="bolder" id="c">bolder</span> and <span class="lighter" id="d">lighter</span></p>
  <p id="out"></p>
  <script>
    const w = (id) => getComputedStyle(document.getElementById(id)).fontWeight;
    document.getElementById('out').textContent =
      'computed: ' + w('a') + ', ' + w('b') + ', ' + w('c') + ', ' + w('d');
  </script>
</body>
</html>

Gerçek hayattan bir kalıp: değişkenlerde bir kalınlık ölçeği

Sayıları dağıtmak yerine bütün site için üç ya da dört kalınlık seç ve onlara ad ver:

:root {
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
}
body   { font-weight: var(--weight-regular); }
button { font-weight: var(--weight-medium); }
h1, h2 { font-weight: var(--weight-bold); }

Sık yapılan hatalar

Her sayının farklı görünmesini beklemek. Yalnızca fontun içerdiği kalınlıklar ayrı ayrı çizilir.
Bir buton etiketi için  kullanmak. Butona font-weight ile stil ver;  ve 'u metin için sakla.
Sayıyı tırnak içine almak. font-weight: "700" geçersizdir ve yok sayılır. font-weight: 700 yaz.
Her yerde vurgu için kalın yazı. Her şey kalın olduğunda hiçbir şey öne çıkmaz. Gövde metnini 400'de tut.
Küçük metinde ince kalınlıklar. Küçük boyutlarda 100 ile 300 arası kalınlıklar, özellikle düşük kontrastlı arka planlarda zor okunur.

Sıkça Sorulan Sorular

CSS'te yazı nasıl kalın yapılır?

Elemente font-weight: bold; ya da eşdeğeri olan font-weight: 700; ver. Bir başlıktan ya da 'dan kalınlığı kaldırmak için font-weight: normal; (400) ver.

font-weight değerleri nelerdir?

1'den 1000'e sayılar, genellikle yüzlük olarak yazılır: 100 thin, 200 extra light, 300 light, 400 normal, 500 medium, 600 semibold, 700 bold, 800 extra bold, 900 black. normal ve bold anahtar kelimeleri 400 ve 700'dür; bolder ve lighter ebeveyne göredir.

font-weight bold ile 700 aynı mı?

Evet. bold 700 olarak, normal ise 400 olarak hesaplanır, bu yüzden iki biçim de aynı şekilde çizilir.

font-weight 500 ya da 600 neden normal ya da bold ile aynı görünüyor?

Fontun o kalınlığı yok. Bir font yalnızca 400 ve 700 ile geliyorsa tarayıcı en yakın mevcut dosyayı seçer, bu yüzden 500 400 gibi, 600 de 700 gibi çizilir. Daha fazla kalınlığı olan bir font ya da değişken bir font yükle.

CSS font-weight mı yoksa etiketi mi kullanmalıyım?

Kelimeler önemliyse , yalnızca farklı stillenen metin için , butonlar, etiketler ve başlıklar gibi görsel tasarım için font-weight kullan. Etiketler anlam taşır; özellik ise yalnızca görünümdür.

İlgili kavramlar