Yazı Tipi

Bu dersin sonunda bir yazının tipini, boyutunu, kalınlığını ve satır yüksekliğini ayarlayabileceksiniz.

font-family: Yazı tipi

font-family hangi yazı tipinin kullanılacağını söyler. Tek bir ad değil, virgülle ayrılmış bir liste yazılır. Tarayıcı listeyi soldan sağa okur ve kullanıcının cihazında bulduğu ilk yazı tipini kullanır.

<p style="font-family: Georgia, 'Times New Roman', serif;">Metin</p>

Adında boşluk olan yazı tiplerini tek tırnak içine alın. Listenin sonuna her zaman genel bir aile yazın, çünkü bunlardan biri her cihazda bulunur:

• serif Harflerin uçlarında küçük çıkıntılar olan yazı tipleri.
• sans-serif Çıkıntısız, sade yazı tipleri.
• monospace Bütün harflerin aynı genişlikte olduğu yazı tipleri.
• cursive El yazısına benzeyen yazı tipleri.
• system-ui Kullanıcının işletim sisteminin yazı tipi.

<p style="font-family: Georgia, serif;">serif: Pijamalı hasta yağız şoföre çabucak güvendi.</p>
<p style="font-family: Arial, sans-serif;">sans-serif: Pijamalı hasta yağız şoföre çabucak güvendi.</p>
<p style="font-family: 'Courier New', monospace;">monospace: Pijamalı hasta yağız şoföre çabucak güvendi.</p>
<p style="font-family: cursive;">cursive: Pijamalı hasta yağız şoföre çabucak güvendi.</p>
<p style="font-family: system-ui;">system-ui: Pijamalı hasta yağız şoföre çabucak güvendi.</p>

Sitenin genelinde tek bir yazı tipi kullanmak için font-family değerini body etiketine yazın. Kalıtım sayesinde bütün sayfaya geçer. Örneğin font-family: 'Segoe UI', sans-serif; yazabilirsiniz. Segoe UI, Windows’un yazı tipidir. Bulunmayan cihazlarda sans-serif devreye girer.

font-size: Boyut

Tarayıcıların varsayılan yazı boyutu genellikle 16px’tir. Bir önceki derste gördüğünüz gibi rem iyi bir seçimdir.

<p style="font-size: 0.875rem;">Küçük yazı (0.875rem)</p>
<p style="font-size: 1rem;">Normal yazı (1rem)</p>
<p style="font-size: 1.5rem;">Büyük yazı (1.5rem)</p>
<p style="font-size: 3rem;">Çok büyük yazı (3rem)</p>

Bir yazıyı büyütmek için başlık etiketi kullanmayın, font-size kullanın. Başlık etiketleri sayfanın yapısını anlatır.

font-weight: Kalınlık

Kalınlık, normal ve bold sözcükleriyle veya 100 ile 900 arasında yüzlük sayılarla yazılır. normal 400, bold 700 demektir.

<p style="font-weight: 300; font-family: system-ui;">300: İnce</p>
<p style="font-weight: 400; font-family: system-ui;">400: Normal</p>
<p style="font-weight: 600; font-family: system-ui;">600: Yarı kalın</p>
<p style="font-weight: 800; font-family: system-ui;">800: Çok kalın</p>
<h2 style="font-weight: normal;">Başlıkların kalınlığını kaldırabilirsiniz</h2>

Her yazı tipinde her kalınlık bulunmaz. İstenen kalınlık yoksa tarayıcı en yakınını kullanır, bu yüzden 300 ile 400 aynı görünebilir.

font-style ve font-variant

• font-style: italic yazıyı eğik yapar. font-style: normal eğikliği kaldırır.
• font-variant: small-caps küçük harfleri, küçük boyutlu büyük harflerle gösterir.

<p style="font-style: italic;">Eğik bir paragraf</p>
<p>Bu <em style="font-style: normal; background-color: khaki;">vurgu</em> eğik değil, sarı görünüyor.</p>
<p style="font-variant: small-caps;">Küçük Büyük Harfler</p>

em ve strong anlam taşır, font-style ve font-weight yalnızca görünümü değiştirir. Örnekteki em eğik görünmese bile hâlâ bir vurgudur. Vurgu yapıyorsanız etiket, süs yapıyorsanız CSS kullanın.

line-height: Satır yüksekliği

Uzun metinlerin rahat okunmasını sağlayan en önemli ayarlardan biri satırlar arasındaki mesafedir. Paragraflar için 1.5 ile 1.7 arası iyi bir başlangıçtır.

<p style="line-height: 1;">Bu paragrafın satırları birbirine çok yakın. Uzun bir metni böyle okumak yorucudur, çünkü gözünüz bir sonraki satırın başını bulmakta zorlanır. Pencereyi daraltırsanız farkı daha iyi görürsünüz.</p>
<p style="line-height: 1.6;">Bu paragrafın satırları arasında rahat bir mesafe var. Uzun bir metni böyle okumak çok daha kolaydır, çünkü gözünüz bir sonraki satırın başını hemen bulur. Pencereyi daraltırsanız farkı daha iyi görürsünüz.</p>

Değeri birimsiz yazın. 1.6, elemanın kendi yazı boyutunun 1.6 katı demektir ve içerideki elemanlar kendi boyutlarına göre hesaplar. 24px gibi sabit bir değer yazarsanız içerideki büyük yazılar sıkışabilir.

font: Hepsi bir arada

Yazıyla ilgili özellikleri tek satırda yazabilirsiniz. Sıra önemlidir:

font: [stil] [kalınlık] boyut/satır-yüksekliği aile;

<p style="font: italic bold 20px/1.5 Georgia, serif;">Eğik, kalın, 20px, satır yüksekliği 1.5, Georgia.</p>
<p style="font: 16px system-ui;">Yalnızca boyut ve aile zorunludur.</p>

font yazdığınızda belirtmediğiniz değerler varsayılanına döner. Önce yazdığınız bir font-weight: bold bildirimi, sonra yazılan font ile silinir.

<p style="font-family: Georgia, serif; font-size: 1.125rem; line-height: 1.6;">Bu yazı rahat okunur.</p>

<p style="font-weight: 700;">Kalın yazı</p>
<p style="font-style: italic;">Eğik yazı</p>

Bu derste öğrendikleriniz

• font-family bir listedir ve sonunda genel bir aile bulunmalıdır.
• font-size, font-weight, font-style ve font-variant yazının görünümünü değiştirir ama anlam katmaz.
• line-height birimsiz yazılır ve okunabilirliği çok etkiler.
• font kısayolunda boyut ile aile zorunludur.