Bir web sayfası oluştururken, çoğu profesyonel yazı tiplerini (ve aslında her şeyi) ems, exs, yüzdeler veya pikseller gibi göreceli bir ölçüyle boyutlandırmanızı önerir. Bunun nedeni, birinin içeriğinizi görüntüleyebileceği tüm farklı yolları gerçekten bilmiyor olmanızdır. Mutlak bir ölçü (inç, santimetre, milimetre, nokta veya pika) kullanırsanız, bu, sayfanın farklı cihazlarda görüntülenmesini veya okunabilirliğini etkileyebilir. Ve W3C'nin önerdiği boyutlar için ems kullandığınızı.
Ama bir em ne kadar büyük?
Göre W3C bir em:
", üzerinde kullanıldığı öğenin 'font-size' özelliğinin hesaplanan değerine eşittir. İstisna, 'font-size' özelliğinin kendi değerinde 'em' oluşmasıdır, bu durumda ana öğenin yazı tipi boyutuna atıfta bulunur."
Başka bir deyişle, ems mutlak bir boyuta sahip değildir. Bulundukları yere göre beden değerlerini alırlar. Çoğu için web tasarımcıları, bu, bir Web tarayıcısında oldukları anlamına gelir, bu nedenle 1 em uzunluğundaki bir yazı tipi, o tarayıcı için varsayılan yazı tipi boyutuyla tam olarak aynı boyuttadır.
Ancak varsayılan boyut ne kadar uzun? Müşteriler bilgilerini değiştirebileceğinden %100 emin olmanın bir yolu yoktur. varsayılan yazı tipi boyutu ancak çoğu kişi bunu yapmadığından, çoğu tarayıcının varsayılan yazı tipi boyutunun 16 piksel olduğunu varsayabilirsiniz. Yani çoğu zaman 1em = 16 piksel.
Piksel olarak düşünün, Ölçü için ems kullanın
Varsayılan yazı tipi boyutunun 16 piksel olduğunu öğrendikten sonra, müşterilerinizin sayfayı kolayca yeniden boyutlandırmasına izin vermek için ems kullanabilirsiniz, ancak düşünün piksel yazı tipi boyutlarınız için. Şöyle bir boyutlandırma yapınız olduğunu söyleyin:
- Başlık 1 - 20 piksel
- Başlık 2 - 18 piksel
- Başlık 3 - 16 piksel
- Ana metin - 14 piksel
- Alt metin - 12 piksel
- Dipnotlar - 10px
Bunları ölçüm için pikselleri kullanarak bu şekilde tanımlayabilirsiniz, ancak o zaman IE 6 ve 7 kullanan herkes sayfanızı iyi bir şekilde yeniden boyutlandıramaz. Bu yüzden boyutları ems'ye çevirmelisiniz ve bu sadece bir matematik meselesidir:
- Başlık 1 - 1,25 m (16 x 1,25 = 20)
- Başlık 2 - 1.125em (16 × 1.125 = 18)
- Başlık 3 - 1em (1em = 16 piksel)
- Ana metin - 0.875em (16 x 0.875 = 14)
- Alt metin - 0,75em (16 x 0,75 = 12)
- Dipnotlar - 0,625em (16 x 0,625 = 10)
Mirası Unutma!
Ama ems'in hepsi bu kadar değil. Hatırlamanız gereken diğer şey, ebeveynin boyutunu üstlenmeleridir. Dolayısıyla, farklı yazı tipi boyutlarına sahip iç içe öğeleriniz varsa, beklediğinizden çok daha küçük veya daha büyük bir yazı tipi elde edebilirsiniz.
Örneğin, şöyle bir stil sayfanız olabilir:
Bu, ana metin ve dipnotlar için sırasıyla 14px ve 10px olan yazı tipleriyle sonuçlanacaktır. Ancak bir paragrafın içine bir dipnot koyarsanız, 10 piksel yerine 8.75 piksellik bir metin elde edebilirsiniz. Kendiniz deneyin, yukarıdakini koyun CSS ve aşağıdaki HTML'yi bir belgeye dönüştürün:
Bu nedenle, ems kullanırken, ana nesnelerin boyutlarının çok iyi farkında olmanız gerekir, yoksa sayfanızda gerçekten garip boyutlu bazı öğelerle karşılaşırsınız.