CSS (Cascading Style Sheets), web sayfalarındaki yazıların stilini belirlemek için kullanılan güçlü bir araçtır. Yazı büyüklüğünü CSS ile değiştirmek, sayfa okunabilirliğini artırır ve kullanıcı deneyimini iyileştirir. Yazı büyüklüğünü ayarlarken en çok kullanılan birimler px (piksel), em, %, ve rem'dir. Her birim farklı bir ölçeklendirme yöntemi sunar ve tasarımın esnekliğine katkıda bulunur.
Piksel (px)
Piksel, yazı boyutunu sabit bir ölçüyle tanımlar. Genellikle küçük ekranlarda kesin sonuçlar elde etmek için tercih edilir.
Yüzde (%)
Yüzde, yazı boyutunu üst öğeye göre ayarlar. Daha dinamik tasarımlar için kullanılır.
em ve rem
em, yazı boyutunu üst öğenin yazı büyüklüğüne göre ayarlar, rem ise sayfanın temel yazı büyüklüğüne göre ayarlanır.
Yazı Boyutu Büyütme ve Ayarlama
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS ile Yazı Büyüklüğünü Ayarlama</title>
<style>
body {
font-size: 16px;
}
.px-size {
font-size: 20px;
}
.percent-size {
font-size: 150%;
}
.em-size {
font-size: 1.5em;
}
.rem-size {
font-size: 2rem;
}
</style>
</head>
<body>
<h1 class="px-size">Bu yazı 20px büyüklüğünde.</h1>
<p class="percent-size">Bu yazı, %150 oranında büyük.</p>
<p class="em-size">Bu yazı, 1.5em büyüklüğünde.</p>
<p class="rem-size">Bu yazı, 2rem büyüklüğünde.</p>
</body>
</html>
Bu örnek, yazı büyüklüğünü farklı birimlerle nasıl ayarlayabileceğinizi göstermektedir. CSS ile yazı büyüklüğünü ayarlamak, görsel hiyerarşi oluşturmanın ve kullanıcı deneyimini iyileştirmenin etkili bir yoludur.
