Font Size
Font-size özelliği metnin boyutunu ayarlar.
Web tasarımında metin boyutunu yönetebilmek önemlidir. Ancak paragrafların başlıklara benzemesi veya başlıkların paragraflara benzemesi için yazı tipi boyutu ayarlamalarını kullanmamalısınız.
Başlıklar için her zaman <h1> – <h6> ve paragraflar için <p> gibi uygun HTML etiketlerini kullanın.
Yazı tipi boyutu değeri mutlak (absolute) veya göreli (relative) bir boyut olabilir.
absolute Boyut;
- Metni belirtilen boyuta ayarlar
- Kullanıcının tüm tarayıcılarda metin boyutunu değiştirmesine izin vermez (erişilebilirlik nedeniyle kötü)
- Mutlak boyut, çıktının fiziksel boyutu bilindiğinde kullanışlıdır
relative Boyut;
- Çevredeki öğelere göre boyutu ayarlar
- Kullanıcının tarayıcılardaki metin boyutunu değiştirmesine olanak tanır
Not: Bir yazı tipi boyutu belirtmezseniz, paragraflar gibi normal metin için varsayılan boyut 16 pikseldir (16 piksel=1 em).
Yazı Tipi Boyutunu Piksellerle Ayarlama
Metin boyutunu piksellerle ayarlamak size metin boyutu üzerinde tam kontrol sağlar:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
</style>
</head>
<body>
<h1>Başlık</h1>
<h2>Başlık</h2>
<p>Paragraf.</p>
<p>Paragraf.</p>
</body>
</html>
İpucu: Piksel kullanıyorsanız sayfanın tamamını yeniden boyutlandırmak için yakınlaştırma aracını kullanmaya devam edebilirsiniz.
Yazı Tipi Boyutunu Em ile Ayarlama
Kullanıcıların metni yeniden boyutlandırmasına izin vermek için (tarayıcı menüsünde), birçok geliştirici piksel yerine em kullanır.
1em geçerli yazı tipi boyutuna eşittir. Tarayıcılardaki varsayılan metin boyutu 16 pikseldir. Yani, 1em’in varsayılan boyutu 16 pikseldir.
Boyut, şu formülü kullanarak piksellerden em’e kadar hesaplanabilir: piksel/16=em
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>
<h1>Başlık</h1>
<h2>Başlık</h2>
<p>Paragraf.</p>
<p>Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf .</p>
</body>
</html>
Yukarıdaki örnekte em cinsinden metin boyutu, piksel cinsinden önceki örnekle aynıdır. Ancak em boyutu ile tüm tarayıcılarda metin boyutunu ayarlamak mümkündür.
Ne yazık ki Internet Explorer’ın eski sürümlerinde hala sorun var. Metin büyütüldüğünde olması gerekenden daha büyük, küçültüldüğünde ise olması gerekenden daha küçük hale gelir.
Yüzde ve Em Kullanma
Tüm tarayıcılarda çalışan çözüm, <body> öğesi için varsayılan yazı tipi boyutunu yüzde olarak ayarlamaktır:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
</style>
</head>
<body>
<h1>Başlık</h1>
<h2>Başlık</h2>
<p>Paragraf.</p>
<p>Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf .</p>
</body>
</html>
Kodumuz artık harika çalışıyor. Tüm tarayıcılarda aynı metin boyutunu gösterir ve tüm tarayıcıların metni yakınlaştırmasına veya yeniden boyutlandırmasına olanak tanır!
Responsive Yazı Tipi Boyutu
Metin boyutu, “viewport width” (görüntü alanı genişliği) anlamına gelen vw birimiyle ayarlanabilir.
Bu şekilde metin boyutu tarayıcı penceresinin boyutuna uygun olacaktır:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h1 style="font-size:10vw;">Responsive Metin</h1>
<p style="font-size:5vw;">Tarayıcı penceresini yeniden boyutlandırarak yazı tipi değişimini görebilirsiniz..</p>
<p style="font-size:5vw;">Metni boyutlandırırken "vw" birimini kullanın. 10vw, boyutu görünüm genişliğinin %10'una ayarlayacaktır.</p>
<p>Viewport, tarayıcı penceresinin boyutudur. 1vw = görünüm genişliğinin %1'i. Görüntü alanı 50 cm genişliğindeyse 1vw 0,5 cm'dir.</p>
</body>
</html>
Viewport, tarayıcı penceresinin boyutudur. 1vw = görünüm genişliğinin %1’i. Görüntü alanı 50 cm genişliğindeyse 1vw 0,5 cm’dir.
