Çalıştırılabilir CSS Dokümanları: Yazı boyutu

Q: CSS'te yazı boyutu nasıl değiştirilir?

Elemente font-size özelliğini ver: p { font-size: 18px; }. Uzunluklar (px, rem, em), yüzdeler ve large gibi anahtar kelimeler kabul eder.

Q: HTML'de yazı boyutu nasıl değiştirilir?

CSS ile, ya bir stil dosyasında ya da bir style özniteliğinde: . Eski etiketi HTML5'te kullanımdan kalkmıştır ve kullanılmamalıdır.

Q: Yazı boyutu için px mi, em mi, rem mi kullanmalıyım?

Metnin çoğu için rem kullan: kullanıcının tarayıcıdaki yazı tipi ayarıyla ölçeklenir ve katlanmaz. Bir boyutun ebeveynini takip etmesi gerektiğinde, örneğin bir butonun içindeki ikon için em kullan. px, okuyucunun tarayıcıda ayarladığı varsayılan yazı boyutunu takip etmez, bu yüzden gövde metninde ondan kaçın.

Q: em yazı boyutum neden sürekli büyüyor?

Çünkü em ebeveynin yazı boyutuna göredir, bu yüzden iç içe elementler çarpılır: 1.2em içindeki 1.2em, tabanın 1,44 katıdır. Her zaman kök elemente göre olan rem'e geç.

CSS'te yazı boyutu nasıl ayarlanır

font-size özelliği metnin boyutunu ayarlar. Onu herhangi bir elemente ver, içindeki her metin parçası, bir çocuk kendi boyutunu ayarlamadıkça bu boyutu miras alır.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .small { font-size: 12px; }
    .normal { font-size: 16px; }
    .big { font-size: 1.5rem; }
    .huge { font-size: 48px; }
  </style>
</head>
<body>
  <p class="small">12px</p>
  <p class="normal">16px (the browser default)</p>
  <p class="big">1.5rem (24px)</p>
  <p class="huge">48px</p>
</body>
</html>

HTML'de yazı boyutunu değiştirmek için de CSS kullanırsın. Bir style özniteliği () ya da stil dosyasına bir kural ekle. 1990'lardan kalma  etiketi kullanımdan kalkmıştır ve modern bir sayfada yeri yoktur.

font-size'ın kabul ettiği birimler

Değer	Örnek	Neye göre
`px`	`16px`	Hiçbir şeye: sabit bir boyut
`rem`	`1.25rem`	Kök `<html>` elementinin yazı boyutuna (varsayılan 16px)
`em`	`1.2em`	Ebeveyn elementin yazı boyutuna
`%`	`120%`	`em` gibi ebeveynin yazı boyutuna (`120%`, `1.2em` demektir)
Anahtar kelime	`large`	Varsayılan `medium` çevresinde hazır bir ölçek
Göreli anahtar kelime	`smaller`, `larger`	Ebeveynin boyutundan bir adım
Viewport	`4vw`	Viewport genişliğine (onun %4'ü)
Fonksiyon	`clamp(1rem, 4vw, 2rem)`	Bir minimum ile bir maksimum arasında akışkan

Bir değer yaz ve tarayıcının hesapladığı boyutu gör:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { border: 1px dashed #9ca3af; padding: 8px; margin: 12px 0; }
  </style>
</head>
<body>
  <label>font-size: <input id="val" value="1.5rem" size="20"></label>
  <p id="sample">The quick brown fox</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.fontSize = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).fontSize;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

20px, 2em, 150%, x-large, smaller ve 5vw dene. big gibi geçersiz bir değer yok sayılır ve metin son geçerli boyutunu korur.

rem ve em: can yakan fark

rem her zaman kök elemente bakar, bu yüzden 1.2rem nerede görünürse görünsün aynı boyuttadır. em ise ebeveyne bakar, bu yüzden elementler iç içe olduğunda boyutlar çarpılır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>em compounds</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .em { font-size: 1.2em; }
    .rem { font-size: 1.2rem; }
    div { border-inline-start: 3px solid #2563eb; padding-inline-start: 8px; }
  </style>
</head>
<body>
  <div class="em">1.2em
    <div class="em">1.2em inside
      <div class="em" id="deep-em">1.2em inside again</div>
    </div>
  </div>
  <div class="rem">1.2rem
    <div class="rem">1.2rem inside
      <div class="rem" id="deep-rem">1.2rem inside again</div>
    </div>
  </div>
</body>
</html>

En içteki em kutusu 16 × 1,2 × 1,2 × 1,2 = 27,648px. En içteki rem kutusu hâlâ 19,2px. Bu katlanma, parçaları birlikte ölçeklenmesi gereken bir bileşen için kullanışlı, diğer her yerde ise sürprizdir. Birimler sayfası bütün uzunluk birimlerini karşılaştırıyor.

Anahtar kelimeler: xx-small'dan xx-large'a

Mutlak anahtar kelimeler, kullanıcının varsayılan boyutuna (değiştirmediyse 16px) eşit olan medium çevresinde sabit bir ölçeğe karşılık gelir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size keywords</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <p style="font-size: xx-small;">xx-small</p>
  <p style="font-size: x-small;">x-small</p>
  <p style="font-size: small;">small</p>
  <p style="font-size: medium;">medium</p>
  <p style="font-size: large;">large</p>
  <p style="font-size: x-large;">x-large</p>
  <p style="font-size: xx-large;">xx-large</p>
  <script>
    document.querySelectorAll('p').forEach((p) => {
      p.textContent += ': ' + getComputedStyle(p).fontSize;
    });
  </script>
</body>
</html>

Varsayılan 16px ile small 13px, large 18px, x-large 24px ve xx-large 32px'tir. Anahtar kelimeler hızlı işler için yeterli, ama bir tasarım sistemi genellikle rem cinsinden kendi ölçeğini ister.

clamp() ile akışkan yazı boyutu

Ekranla birlikte büyümesi ama asla çok küçük ya da çok büyük olmaması gereken bir başlık tek bir clamp() çağrısıdır: minimum, ölçeklenen tercih edilen boyut ve maksimum.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fluid heading</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 {
      /* never below 1.5rem, never above 3rem, 5vw in between */
      font-size: clamp(1.5rem, 5vw, 3rem);
      margin: 0;
    }
  </style>
</head>
<body>
  <h1 id="title">Fluid heading</h1>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'computed: ' + getComputedStyle(document.getElementById('title')).fontSize;
  </script>
</body>
</html>

800px genişliğindeki bir önizlemede 5vw 40px'tir; bu 24px ile 48px arasında kaldığı için kazanır. Akışkan yazı boyutunu clamp sayfası ayrıntılı anlatıyor.

Bütün sayfa için temel boyut ayarlamak

Boyutu bir kez body (ya da html) üzerinde ayarla ve diğer her şeyi ona göre boyutlandır:

html { font-size: 100%; }  /* respects the user's setting, usually 16px */
body { font-size: 1rem; }
h1   { font-size: 2.25rem; }
small, .caption { font-size: 0.875rem; }

Sayfadaki her boyut sonrasında rem ile verilmeyecekse html { font-size: 62.5%; } hilelerinden kaçın ve html üzerine asla sabit bir px boyutu verme: bu, okuyucunun tarayıcısında seçtiği yazı boyutunu ezer ve bazı insanlar okuyabilmek için buna güvenir.

Erişilebilirlik notları

Ekranda okumak için 16px ya da daha büyük gövde metni iyi bir alt sınırdır.
rem ve em cinsinden boyutlar kullanıcının varsayılan yazı tipi ayarını takip eder. px cinsinden boyutlar sayfa yakınlaştırmasını takip eder ama bu ayarı takip etmez.
iPhone'da Safari, yazı boyutu 16px'in altında olan bir input'a odaklandığında sayfayı yakınlaştırır. Bunu önlemek için form alanlarına font-size: 1rem ya da daha fazlasını ver.

Sık yapılan hatalar

 etiketini kullanmak. Kullanımdan kalkmıştır. font-size özelliğini kullan.
Kontrolden çıkarak büyüyen ya da küçülen iç içe em boyutları. Katlanma istemiyorsan rem kullan.
html üzerinde sabit bir px boyutu. Okuyucunun kendi yazı tipi ayarını ezer.
Başlıkların zaten bir boyutu olduğunu unutmak. <h1> varsayılan olarak 2em'dir, bu yüzden gövde metni boyutunda olmasını istiyorsan h1 { font-size: 1em; } gerekir.
Tek başına viewport birimleri. font-size: 3vw telefonda okunmaz, geniş bir monitörde ise devasa olur. Onu clamp() ile sar.

Sıkça Sorulan Sorular

CSS'te yazı boyutu nasıl değiştirilir?

Elemente font-size özelliğini ver: p { font-size: 18px; }. Uzunluklar (px, rem, em), yüzdeler ve large gibi anahtar kelimeler kabul eder.

HTML'de yazı boyutu nasıl değiştirilir?

CSS ile, ya bir stil dosyasında ya da bir style özniteliğinde: . Eski  etiketi HTML5'te kullanımdan kalkmıştır ve kullanılmamalıdır.

Tarayıcılarda varsayılan yazı boyutu nedir?

Kullanıcı tarayıcı ayarlarında değiştirmediyse gövde metni için 16px. 1rem ve medium anahtar kelimesi varsayılan olarak bu değere eşittir.

Yazı boyutu için px mi, em mi, rem mi kullanmalıyım?

Metnin çoğu için rem kullan: kullanıcının tarayıcıdaki yazı tipi ayarıyla ölçeklenir ve katlanmaz. Bir boyutun ebeveynini takip etmesi gerektiğinde, örneğin bir butonun içindeki ikon için em kullan. px, okuyucunun tarayıcıda ayarladığı varsayılan yazı boyutunu takip etmez, bu yüzden gövde metninde ondan kaçın.

em yazı boyutum neden sürekli büyüyor?

Çünkü em ebeveynin yazı boyutuna göredir, bu yüzden iç içe elementler çarpılır: 1.2em içindeki 1.2em, tabanın 1,44 katıdır. Her zaman kök elemente göre olan rem'e geç.

İlgili kavramlar