font-size özelliği CSS'te metnin boyutunu ayarlamak için kullanılan bir ifadedir. px, em, rem, %, vh, vw, in, pt, gibi uzunluk birimleri alabilmektedir.
Responsive Font Size Nedir?
Responsive font size em, rem, vw, % gibi uzunluk birimleri ile ifade edilen font-size ifadeleridir.
Bir çok profesyonel web geliştiricisi em, %, vw gibi uzunluk birimlerini kolay ölçeklendirilebilir metin boyutu oluşturmak için kullanmaktadır.
Responsive Font Size Birimleri
| Birim | Açıklaması |
| em | em body font-size değerine çalışır. Eğer kapsayıcı öğesinin bir font-size değeri var ise onu baz alacaktır. body etiketinde font-size tanımlı değil ise tarayıcılar otomatik olarak bu değeri 16px olarak kabul eder ve 1em = 16px olur. h1{font-size:2em} = 32px |
| rem | rem birimi sadece html öğesinin font-size ölçüsünü baz almaktadır. html{font-size:16px;} ise 1rem = 16px olacaktır. |
| % | En yakın kapsayıcısının font-size değerine göre hesaplanır. html{font-size: 75%;} ise 1rem = 16*.75 = 12px olacaktır. |
| vw | Görüntü alanı genişliğine göre font-size değeri değişiklik göstermektedir. 1vw değeri görünüm penceresinin genişliğinin 1/ 100'üne eşittir. Örneğin, tarayıcının genişliği 1000 piksel ise 1vw 10 piksele eşit olacaktır. |
| vh | Görüntü alanı yüksekliğine göre font-size değeri değişiklik göstermektedir. 1vh değeri görünüm penceresinin yüksekliğinin 1/ 100'üne eşittir. Örneğin, tarayıcının yüksekliği 768 piksel ise 1vh 7.68 piksele eşit olacaktır. |
Font size "em" Birimi
em bir ölçü birimidir. Genellikle font-size, margin, padding gibi css özelliklerinde tercih edilmektedir.
em birimi bir HTML öğesinin kapsayıcısının font-size metin büyüklüğü ile değişkenlik gösteren bir ifadedir.
html{
font-size:18px; /* 1rem = 16px Not: HTML öğesinin font-size değeri body'de font-size değeri tanımlı olduğu için em değerini etkilemeyecektir.*/
}
body{
font-size:16px; /* 1em = 16px */
}
div.wrapper{
font-size:20px; /* Divin içerisindeki öğe için em değeri 1em = 20px olacaktır.*/
}
h1{
font-size:3em; /* 3m = 48px */
}
div.wrapper h1{
font-size:3em; /* 3m = 60px */
}
Font Size "rem" Birimi
rem birimi sadece html etiketinin font-size değeri ile değişkenlik göstermktedir.
Örnek : html{font-size:18px;} ise 1rem = 18px; olacaktır.
html{
font-size:18px; /* 1rem = 18px; */
}
body{
font-size:16px; /* 1em = 16px; Body etiketindeki ve diğer öğelerdeki font-size değeri rem değerini değiştiremez.*/
}
h1{
font-size:3rem /* 3rem = 18*3=54px */
}
p{
font-size:1rem /* 18px */
}
Font Size % Değeri
% değeri font-size değeri olarak %100 olarak default olarak gelmektedir.
html{font-size:75%;} yaptığınızda 1rem = 16px*0.75 = 12px olacaktır.
html{
font-size:75%; /* 1rem = 12px; */
}
body{
font-size:100%; /* 1em = 16px; */
}
h1.rem-size{
font-size:3rem; /* 3rem = 12*3 = 36px; */
}
h1.em-size{
font-size:3em; /** 3rem = 16*3 = 48px;*/
}
Font Size "vw" ve "vh" Değerleri
vw : değeri Viewport Width yani görüntü alanı genişiğidir. 100vw toplam görüntü alanı genişliğidir. ve 1000px genişliğe sahip bir tarayıcıda 1vw = 1000/100 = 10px olacaktır.Görüntü alanı genişliği değiştikçe bu oranda font-size değeri de artacak ya da azalacaktır.
vh : değeri Viewport Height yani görüntü alanı yüksekliğidir. 100vh toplam görüntü alanı yüksekliğidir. ve 900px yüksekliğe sahip bir tarayıcıda 1vh = 900/100 = 9px olacaktır. Görüntü alanı yüksekliği değiştikçe bu oranda font-size değeri de artacak ya da azalacaktır.
Önemli : vw ve vh değerleri html ve body font-size değerlerinden bağımsız sadece ekran yüksekliğine (vh) ve ekran genişliğine (vw) bağımlıdır.
h1.vw-title{
font-size:6vw;
}
h2.vw-title{
font-size:6vh;
}
Tarayıcınızın yükseklğini ve genişliğini değiştirerek değişimi gözlemleyiniz.
Font-size 6vw
Font-size 6vh
Yukarıdaki örnekte tarayıcının genişliği değişirken font-size:6vh; değerinin değişmediğini ve aynı şekilde tarayıcının yüksekliği değişirken de font-size:6vw; değerinin değişmediğini görebilirsiniz.