CSS Font-Size: em-rem-vw-vh-px-percentage

CSS'in (Cascading Style Sheets / Basamaklı Stil Şablonları) kafa karıştırıcı yönlerinden biri, metin ölçeklendirme için yazı tipi boyutu özelliğinin uygulanmasıdır. Yazı tipi boyutu özelliklerinin hangisi sayfanız için en uygun olanıdır? Bu soru, çeşitli tartışma ve eleştirilerin ortaya çıktığı bir sorudur. Bu makale, yazı boyutu özellikleri arasındaki fark ve bunların en iyi nasıl kullanılacağı hakkında fikir verir.

Pixels (px)

Responsive tasarımın ortaya çıkmasından önce, tipografiden genişliğe, padding ve yüksekliğe kadar her şey için kullanılan (px) yazı tipi boyutlandırma özelliği olarak da yaygın şekilde kullanıldı. Ancak, pikseller sabit boyutlu birimlerdir ve görünümün boyutuna göre değişmezler. Pikselleri kullanarak reponsive bir web sitesi oluşturmak istiyorsanız, medya sorgularındaki değerler de dahil olmak üzere CSS stil sayfasındaki tüm piksel tabanlı değerleri takip etmek çok zor olabilir.

Kullanılabilecek alanlar: border çizgisi sınırları ve genel elemanlar; box shadow değerleri. Kullanılmasa daha iyi olacak alanlar: Tipografi. (İstisna: CSS reset işleminde temel yazı tipi boyutu ayarlama)

Peki, CSS stil sayfamızda minimum değişiklikler yapmamıza izin verebilecek, ancak yine de ölçeklenebilir olabilen hangi yazı tipi özelliğini kullanabiliriz? Bu noktada em, rem, yüzde ve viewport units birimleri devreye giriyor.

Em

Em, tarayıcı tarafından piksel değerlerine dönüştürülen esnek, ölçeklenebilir bir yazı boyutu birimdir. Chrome’da varsayılan yazı tipi boyutu 16 piksel ise 1 em = 16 pikseldir. Em ile ilgili büyük bir yanlış anlama, üst öğenin boyutunu baz almasıdır. EM, başlıklar, metinler, paragraflar gibi tipografi ve kenar boşlukları, dolgu vb. Tipografiyle ilişkili öğeler için yaygın olarak kullanılır. Temel html ve body yazı tipi boyutunu piksel olarak ayarlarsanız ve tipografi öğenizin özellikleri em kullanılarak tanımlanırsa, reponsive tasarım için yapmanız gereken tek şey, temel düzeydeki varsayılan yazı tipi boyutunu ve tüm em değerleri otomatik olarak temel seviyeye kadar hesaplanır. Belgenin yazı tipi boyutu 15px ise, 1em 15px’e eşittir. Em ölçeklenebilir, bu nedenle 2em 24px, .5em 6px’e eşittir.

Rem

Root EM anlamına gelir. Em hesaplama karmaşasından kurtarmak için geliştirilmiştir. Em ve px dışında daha öngörülebilir bir alternatiftir ve @media dahil olmak üzere aynı amaçlar için kullanılır. Rem, html elementinin yazı boyutunu baz alır. Html öğesinin yazı boyutu 16 piksel ise, 1rem = 16 pikseldir. Rem, html öğelerinin ne kadar içiçe olduğuna bakılmaksızın daima html elementini baz alacaktır.

Percents

Yüzde birimi birkaç temel fark dışında “em” birimine çok benzer. Mevcut yazı tipi boyutu %100’e eşittir (yani 12px = %100). Yüzde birimini kullanırken metniniz mobil cihazlar ve erişilebilirlik için tamamen ölçeklenebilir durumda kalır.

Buradaki görünüm alanı, tarayıcının pencere boyutu anlamına gelir. Öğenizi, üst element veya root elemente değil, tarayıcı penceresi genişliğine göre boyutlandırmak istiyorsanız, görünüm alanı birimleri kullanmanız gereken yazı tipi boyutlandırma birimleridir. vw birimi, yataydaki tarayıcı boyutunun 100/1’ine, vh ise ekran yüksekliğinin 100/1’lik bir bölümüne denk gelen bir ölçü birimidir.

div { width: 2vw; }

Ekran çözünürlüğümüzün 1440×900 olduğunu düşünürsek;
2×1440/100 = 28,8px boyutunda bir ölçü elde etmiş oluruz.

div { width: 100vh; height: 100vh; }

Değerlerini kullanarak 1440×900 bir boyut elde etmiş oluyoruz. Bootstrap’i sık kullandığım için varsayılan html yazı tipi boyutum piksel cinsinden. Görüntülerin genişliğini ve yüksekliğini ayarlamak için ise yüzde kullanıyorum. Geri kalan bütün elemanlarda Rem kullanıyorum. Rem’in hesaplamalara getirdiği sadeliği seviyorum fakat bileşenleri modüler hale getirmek zaman zaman can sıkıcı olabiliyor. Alternatif yazı boyutu özelliklerini kullandıkça sizin için en idealinin hangisi olduğu ortaya çıkacaktır.

Şener Yılmaz
Front-End Developer