Arayüz Tasarımında Doğru Ölçü Birimi Seçimi

Okuma Süresi: 5 dakika

Arayüz tasarımı ölçülü ve sayıların hakim olduğu bir alandır. Özen ve dikkat ister. Bu noktada, ölçü birimleri çok daha önemli hale gelir. Eskiden her şey piksel üzerinden hesaplanırken günümüzde farklı cihaz boyutları ve erişilebilirlik standartları bizi farklı niteliklerdeki ölçü birimlerine yönlendiriyor.

1. PX (Pixel): Mutlak ve Sabit Birim

Her türlü arayüz için kullanılan en evrensel ölçü birimidir. Piksel (px), web tasarımının en eski ve en bilinen birimidir. “Mutlak” bir ölçü birimi olarak kabul edilir, yani başka hiçbir faktöre (font boyutu, ekran çözünürlüğü vb.) bağlı olarak değişmez.

Nasıl Çalışır? Bir öğeye 20px değerini verirseniz, o öğe her zaman 20 piksel boyutunda görünür.
Ne Zaman Kullanılır? Genellikle kesinlik gerektiren durumlarda; örneğin ince bir kenarlık (border) tanımlarken veya boyutu asla değişmemesi gereken sabit görsellerde tercih edilir.
Dezavantajı: Esnek değildir. Kullanıcı tarayıcı ayarlarından font boyutunu büyütse bile, pikseller sabit kaldığı için sitenizin okunabilirliği ve erişilebilirliği zarar görebilir.

2. EM: Ebeveyne Bağlı Göreceli Birim

Web tasarımı için kullanılan bir ölçü birimidir. EM birimi, ismini “M” harfinin genişliğinden alır ve “göreceli” bir birimdir. En önemli özelliği, içinde bulunduğu ebeveyn (parent) öğenin font boyutuna göre hesaplanmasıdır.

Nasıl Çalışır? Eğer bir ebeveyn div’in font boyutu 16px ise ve siz içindeki alt öğeye 2em derseniz, o öğenin boyutu 32px olur.
Avantajı: Ölçeklenebilir tasarımlar oluşturmak için idealdir. Özellikle bir bileşen içindeki öğelerin birbirine oranını korumak istediğinizde çok kullanışlıdır.
Kritik Nokta: EM birimleri “katlanarak” artar. Eğer iç içe çok fazla EM kullanan öğe varsa, hesaplamalar karmaşıklaşabilir.

3. REM (Root EM): Kök Öğeye Bağlı Esneklik

Web tasarımı için kullanılan bir ölçü birimidir. REM, “Root EM” anlamına gelir. EM’den farkı, ebeveyn öğeye değil, doğrudan kök öğeye (genellikle <html> etiketi) bağlı olmasıdır.

Nasıl Çalışır? Çoğu tarayıcıda varsayılan kök font boyutu 16px’dir. Eğer 2rem değerini kullanırsanız, bu her zaman 32px’e karşılık gelir (kök değer değişmediği sürece).
Örnek: html { font-size: 16px; } h1 { font-size: 2rem; } /* Sonuç: 32px */
Neden Tercih Edilir? Duyarlı (responsive) tasarım için en sağlıklı birimdir. Kullanıcı tarayıcı ayarlarından font boyutunu artırdığında, tüm sayfa orantılı bir şekilde büyür. Bu da sitenizi hem esnek hem de kullanıcı dostu yapar.

Mobil arayüz tasarımında ise durum oldukça farklıdır. Klasik birimler (PX, EM, REM) font boyutlarına göre şekillenirken, mobil odaklı birimler doğrudan ekranın genişliğine ve yüksekliğine odaklanır.

4. Point (pt) – Baskı ve iOS Dünyası

Point, geleneksel olarak matbaacılıkta kullanılan fiziksel bir ölçü birimidir. Dijital dünyada ise Apple’ın iOS ekosisteminde (iPhone, iPad) tasarım birimi olarak karşımıza çıkar.

Fiziksel Karşılığı: 1 point, bir inç’in 72’de biridir ($1pt = 1/72$ inç).
Dijital Karşılığı: Standart bir ekranda (72 DPI), 1pt = 1px kabul edilir. Ancak yüksek çözünürlüklü (Retina) ekranlarda Apple, pikselleri “point” üzerinden ölçeklendirir.
Kullanım Alanı: iOS uygulama arayüzü tasarımı ve baskıya gidecek dokümanlar (PDF vb.).

5. DP veya DiP (Density-independent Pixels) – Android Dünyası

Android ekosistemi binlerce farklı ekran boyutu ve çözünürlüğüne sahip olduğu için Google, DP birimini geliştirmiştir. Amacı, bir öğenin farklı ekran yoğunluklarında (yüksek veya düşük çözünürlüklü olması fark etmeksizin) fiziksel olarak aynı boyutta görünmesini sağlamaktır. Android Uygulama tasarlıyorsanız: DP (arayüz için) ve SP (metinler için).

Referans Noktası: 1dp, 160 dpi (dots per inch) yoğunluğundaki bir ekrandaki 1 piksele eşittir.
Neden Kullanılır? Eğer bir butonu 100px yaparsanız, çok yüksek çözünürlüklü bir telefonda o buton toplu iğne başı kadar küçük görünebilir. Ancak 100dp yaparsanız, Android sistemi onu ekranın yoğunluğuna göre ölçeklendirir ve her telefonda hemen hemen aynı fiziksel büyüklükte görünmesini sağlar.

Birim Dönüşümleri: Nasıl Hesaplanır?

Tasarımlar genellikle Figma veya Adobe XD gibi araçlarda Piksel (PX) olarak hazırlanır. Ancak kodlama aşamasında bunları dönüştürmek gerekir.

1. PX’den REM’e Dönüşüm

Çoğu tarayıcıda varsayılan kök boyut 16px‘dir.

Formül: İstenen PX değeri / Kök PX değeri = REM
Örnek: Tasarımda başlığınız 32px ise; $32 / 16 = 2rem$.

2. REM ve EM Farkı (Hesaplama)

REM: Ebeveyn ne olursa olsun, kök 16px ise, 1.5rem her zaman 24px olur.

EM: Ebeveyn 20px ise, içindeki 1.5em olan yazı 20×1.5 = 30px olur.

3. PT’den PX’e Dönüşüm (Standart)

Web ortamında (96 DPI varsayılanı ile):

1pt = 1.33px

(Not: Bu değer ekran çözünürlüğü ve tarayıcı ayarına göre değişebilir.)

4. DP’den PX’e Dönüşüm (Android)

Ekranın yoğunluğuna (DPI) bağlıdır:

px = dp x (dpi/160)