CSS font size px ile em farkları nelerdir?

25 Ocak 2023 ile Fatih Canbolat

CSS’de font boyutları iki farklı birim kullanarak belirlenebilir: piksel (px) ve “em”.

  • Piksel (px): Piksel, fiziksel birimdir ve monitörün çözünürlüğüne bağlı olarak değişebilir. Örneğin, bir piksel genellikle bir ekranın fiziksel boyutlarına bağlı olarak değişebilir. Ayrıca, kullanıcı tarayıcı ayarlarını değiştirerek font boyutunu değiştirebilir.
  • Em: Em ise, bir fontun “M” harfinin genişliğine eşit bir birimdir. Em, bir kullanıcı tarayıcı ayarlarını değiştirerek font boyutunu değiştirdiğinde otomatik olarak boyut değiştirir. Örneğin, bir elementin font boyutu “1em” olarak ayarlanmışsa, kullanıcı tarayıcı ayarlarını değiştirdiğinde font boyutu da değişecektir.

Genel olarak, em daha esnek bir seçenek olarak kabul edilir çünkü kullanıcı tarayıcı ayarlarını değiştirerek font boyutunu değiştirebilir. Ancak, piksel olarak belirlenen font boyutları daha kesin bir kontrol sağlar ve özellikle tasarımda önemli bir rol oynayan sayfalarda kullanılabilir.

Sonuç olarak, hangi birimi kullanacağınız, projenizin ihtiyacına ve amacına göre değişebilir. Örneğin, web sitesi tasarımında önemli bir rol oynayan sayfalar için piksel kullanılabilir, ancak kullanıcı tarayıcı ayarlarının etkileyebileceği sayfalarda em kullanılabilir.