CSS Ölçü Birimleri ve Yazı Tipi Boyutu


p{font-size: 12px;}

Paragraf içindeki metinlerin boyutunu 12 piksel olarak ayarlamak için bu kural yeterli gözüküyor. Ancak CSS içinde kullanılabilecek birkaç ölçü birimi daha var. Ama hangisini kullanmak gerekiyor?

Metin boyutunu ayarlamak için dört farklı birimi kullanabiliriz: Bunlar, piksel (px), nokta (pt), Ems (em) ve yüzdelik oran (%). Pekiyi hangisi web sayfaları için en iyisi? Bunu cevaplamak biraz zor gibi görünüyor.

İşin kolayına kaçmak gerekirse “beğendiğinizi kullanın” diyebilirim ama o zaman bu yazıyı yazmanın bir anlamı olmaz.

Öncelikle birimlere ve aralarındaki ilişkilere bir göz atalım:

Em (em): “em” ölçeklenebilir bir birimdir. O an geçerli olan yazıtipi boyutuna eşittir. Örneğin, ilgili alandaki yazıtipinin boyu kadardır. Örneğin 12pt olarak ayarlanmış bir belgede, 1em 12pt kadardır.Mobil cihazlarla uyumlu gibi gözüküyor. Zira mobil cihazlarda ekran küçük olduğu için genellikle sayfaları okurken biraz yakınlaştırabiliyoruz.

Piksel (px): Piksel sabit boyutlu birimdir. Ekrana göre boyutlandırma yapar. Kusursuz tasarımlar için kullanışlıdır.
Nokta (pt): Nokta (point) daha çok yazdırma ortamları için kullanılır. 1pt, 1 inçin 72’de biri kadardır.
1" = 2,54 cm
Noktalar piksel gibi sabit boyuttadır ve orantısal olarak boyutlandırılamazlar.
Yüzde (%): Em gibi ölçeklenebilir bir birimdir. Geçerli font büyüklüğü 100% (Türkçe’de %100 ama bunu Amerikanlar 100% olarak yazarlar) olduğunda geçerli font büyüklüğü kadar demek oluyor. Yüzde birimini kullanırken metniniz görme kısıtı olan ziyaretçiler ve mobil cihazlar için tam ölçeklenebilir bir özelliktedir.

Fark ne Ocam?

Aslında farkı anlamak kolay. Genel olarak,

1em = 12pt = 16px = 100%
Bu font büyüklük boyutlarını kullanırken geçerli font büyüklüğünü 100%’den 150%’ye çıkaralım ve neler oluyor gözlemleyelim:
Fiddle1
Şimdi body takısının font büyüklüğünü 150% yapalım:
Fiddle2
Gördüğünüz gibi em ve yüzde birimleri, body’den tevarüs ettiği 12 point değerindeki yazı tipi boyutunu 1,5 kat arttırdığımızda kendi kapsamlarındaki metinleri aynı oranda büyütmüşlerdir. Font büyüklüğünü mutlak bir değer olarak belirlemek güzel olabilir. Ancak günümüzde ne VGA standardı kaldı ne Full HD. Hepsi karıştı gitti, Çeşit çeşit ekran çözünürlükleri mevcut. Dolayısıyla tüm cihazlara uyumlu bir web sayfası için em veya % birimlerini kullanmak daha mantıklı görünüyor.
Sadede gel Oca!
Teorik olarak em birimi yazıtipi büyüklükleri için yeni bir standart olsa da pratikte yüzdelik oran kullanılması daha sağlıklı bir görüntü elde etmede daha başarılı. Bugün Bootstrap’in CSS kodları incelendiğinde de bazı sabit font büyüklükleri için piksel kullanması dışında diğer göreceli yazıtipi büyüklüklerinde hep % kullanılmış. Ziyaretçi sayfayı sizin göstermek istediğiniz gibi görmek istemeyebilir. Bazen metni daha küçük, bazen de daha büyük görmek isteyebilir. Dolayısıyla oransal bir yaklaşım daha geçerli olacaktır.

2 thoughts on “CSS Ölçü Birimleri ve Yazı Tipi Boyutu

  1. merhabalar benim bu ları piksel olarak düzenlemem lazım alan css olduğu için normal font değeri verdiğimde örnk : style=”font-size:18pt; yazılar yukarıda kalıyo bi düzenleme gösterirseniz memnun olurum teşekkürler.

    <a href="”>

    <a href="”>

    <a href="”>

    <a href="”>

    <a href="”>

    <a href="”>

    <a href="”>

    1. gönderdiğiniz html kodları güvenlik gereği kaldırılmış. Lütfen JSFiddle veya benzer site bağlantısını gönderir misiniz?

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s