CSS ile kodlama yapan herkes en azından bir kere düşünmüştür “ölçü birimi olarak px mi kullanmalıyım em mi?” diye. Ben de çok düşündüm ve araştırdım. Okuduklarımdan anladıklarımı paylaşmak istiyorum.

em nedir? px(pixel) nedir? pt(point ) nedir? %(percent) nedir?

em ve % bağıl ölçü birimleridir. Yani body elemanında varsayılan (default) font büyüklüğünüze (font-size) bağlı büyüme-küçülme gösteren ölçülerdir. em’in %’den ayrılan yanı varsayılan font büyüklüğünde ve font ailesinde (font-family) yer alan “M” harfinin genişliğini baz almasıdır. Yani varsayılan font-size değerini sabit tutup font-family’i değiştirdiğinizde bile görüntüde değişimi görebileceksiniz.

px ve pt ise sabit ölçülerdir. Tarayıcıdan tarayıcıya değişkenlik göstermezler. Ancak pt’de şöyle bir fark vardır. DPI tabanlı olduğundan, sayfa kağıda basıldığında monitörde göründüğünden farklı görünür. “E o zaman hangisini kullanmalı?” derseniz benim önerim
ekranda göstereceğiniz⁽¹⁾ font büyüklükleri için px’i kullanmak, sayfanızdan çıktı⁽²⁾ alacağınız sayfalar için pt kullanmak.
<link rel=”stylesheet” href=”screen-style.css” type=”text/css” media=”screen” /> (1)
<link rel=”stylesheet” href=”print-style.css” type=”text/css” media=”print” />  (2)

Peki em mi, px mi?

Bu seçim sizin tercihlerinize ve ihtiyacınıza bağlı aslında. Bu konuyla ilgili yazacağım kısım tamamen şahsi görüşüm ve deneyimimdir. Herkes kendince yorumlayabilir.

Sitenizi kullanan kişi bilerek ya da bilmeyerek tarayıcısındaki Metin Boyutu/Text Size ayarında varsayılanın haricinde bir boyut seçmiş olabilir. Bu durumda siz px seçtiyseniz kullanıcının seçimi bir işe yaramayacaktır. Yani siz ne göstermek isterseniz kullanıcı onu görür. Peki ya sizin için görünebilir olan font boyutu kullanıcı için karınca kadarsa? Kısacası px seçerek kullanıcının seçim şansını ortadan kaldırmış olursunuz. Bu durum, kullanıcı açısından erişilebilirlik sorunudur. Ama öyle tasarımlar vardır ki bu seçim şansını ortadan kaldırmak zorunda kalırsınız. Örnek verecek olursam çok beğendiğiniz bir görsel kullanmışsınızdır ve yazılar seçtiğinizin dışında bir boyutta kullanılırsa tasarımın bozulacağına ve sitenin etkisini yitireceğine inanıyorsunuz. O zaman hiç düşünmeyin, px kullanının:)
İkinci bir örnek, aynı sayfada çok fazla içerik bulundurduğunuz bir siteniz var (online gazete gibi). Bu durumda font boyutunu sabitlememek kullanıcı açısından sıkıntı yaratabilir. Bu durumda da yine hiç düşünmeyin, px kullanının:)

Bu noktada Hürriyet Gazetesi‘ni ve Fatih Hayrioğlu‘nun sitesini ele almayı uygun gördüm. (Görüntüler Internet Explorer7′den alınmıştır.)

Hürriyet Gazetesi’nin Text Size ayarı değiştirildiğinde gözlenen değişimler ve CSS dökümanı (Büyük hallerini görmek için resimlerin üzerine tıklayabilirsiniz):

Fatih Hayrioğlu’nun web sitesinde Text Size ayarı değiştirildiğinde gözlenen değişimler ve CSS dökümanı:

Hürriyet Gazetesi sabit px değerleri, Fatih Hayrioğlu em değerleri kullanmıştır.Text size ayarını değiştirdiğimde Hürriyet’te sadece bullet’ larda büyüyüp küçülme gözlenirken, Fatih Hayrioğlu’nda fontun değişimini göz önünde bulunduran tüm elemanlar orantılı olarak büyüyüp küçülüyor.

Diyebilirsiniz ki “ben sitemde em değeri kullanmak istiyorum ama kullandığım görseller de bozulmasa?”. Sorun değil! Çünkü görsellerinize de em değeri tanımlayailirsiniz. Kısaca px kullandığınız her yere em tanımalayabilirsiniz. Böylece yazı boyutunuzla aynı oranda görselleriniz de büyüyüp küçülür.

Tasarımcı boyut olarak pt kullanmış ben bunu nasıl em’e/px’e/%’ye çevireceğim?

Bugünün tarayıcılarında body elemanında tanımlı varsayılan font büyüklüğü 16px’dir. Kullanılan oranlar da bu 16 px’e bağlıdır.
Varsayılan değerinizi 12 px yapmak isterseniz aşağıdaki hesaplarda 16 yerine 12 yazmanız yeterlidir.

Örneğin:
12px’lik bir fontu yazılarınızda kullanmak istiyorsunuz.
em hesabı:  12px / 16px = 0.75em
yüzde hesabı: 12px / 16px * 100 = 75%
punto hesabı: 16px * 72 / 96  = 12pt

Px (piksel) hakkında not : Piksel, monitörlerin çözünürlüğüne göre değişiklik gösterdiği için hesaplanan-bağlantılı bir değer birimidir. Örneğin, inç başına düşen nokta değerini temsil eden DPI (Dot Per Inch) birimine göre monitörler genelde 96 DPI‘dır.(Kaynak)

Tersi durum da söz konusu. Elinizde em tanımlı bir div vardır. Tasarımcıdan o alan için bir banner isteyeceksiniz. Ya bu alanın baskı için kaç pt olduğunu öğrenmeniz gerekiyor. O zaman da:

px hesabı: .75em * 16px = 12px
yüzde hesabı .75em * 100 = 75%
pt hesabı = 0.75em * 16 * 72 / 96 = 9pt

Ayrıca pt’den px’e dönüşüm gerekirse: 12pt * 96ppi / 72ppi = 16px

Bu hesapları çok karışık bulduysanız korkmayın! Her şeyin bir çözümü var. Bu hesabı bizim için yapan siteler var.
px to em, em to px benzeri aramalarla http://pxtoem.com/ gibi dönüştürücü sitelere erişebiliyorsunuz. Tek yapmanız gerek varsayılan font değerinizi yazmak.

Bu verdiğim bilgilere dayanarak örnek bir tipografi stili oluşturalım.

/* Varsayılan font değerlerini body elemanının içinde belirliyorum.
Bu değerin 10px olmasını yani aksini belirtmediğim sürece sayfa boyunca yazdığım tüm yazıların 10px olmasını istiyorum.
Bu durumda body nin içindeki ilk font boyutunu % ile 16px (tarayıcının varsayılanına göre oranlayarak) yazıyorum.
(10px / 16px = 62.5%) */

body { font-size: 62.5%; color: #222;background: #fff; font-family: Arial, Helvetica, sans-serif; }
h1,h2,h3,h4,h5,h6 { font-weight: normal;color: #111;} h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 2em; margin-bottom: 0.75em; }
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 1em; font-weight: bold; }

Bu örnekte varsayılan font büyüklüğüm 10px olduğu için, tarayıcımda da varsayılan text size ayarlıysa;  h1:30px, h:20px, h3:15px, h4:12px, h5:10px ve h6:10px olacaktır.

Örneği görmek için tıklayın.

Peki bunun nasıl bir faydası var?
Aradan biraz zaman geçti, sitenin tasarımı eskidi, yenisi yapıldı. Bu sefer kullanmak istediğimiz font büyüklüğünün 12px olması istendi. Tek yapmanız gereken body içindeki font-size değerini 75% olarak değiştirmek.

Örneği görmek için tıklayın.

Sözünü ettiğim 4 ölçü biriminin dışında cm, in, mm, ex ve pc de bulunmaktadır ama ben en çok kullanılanlara ve kafa karıştıranlara değinmek istedim.Bu konuyla ilgili Türkçe yazı çok az olduğu için de bunları yazma ihtiyacı hissettim. Fikriniz / eleştiriniz / ekleyecekleriniz olursa paylaşmanızdan çok memnun olurum.
Kullandığım kaynaklar:

px to em , The Sug , John Tangarine , Kyle Schaeffer