Web tasarımı dünyasına adım attığınızda, kullanıcı deneyimini (UX) ve sitenizin okunabilirliğini belirleyen en önemli unsurlardan birinin metinler, yani “Tipografi” olduğunu fark edersiniz. Bootstrap 5, web sitenizdeki metinleri hem görsel açıdan profesyonel hem de tüm cihazlarla tam uyumlu (responsive) hale getirmek için harika bir tipografi altyapısı sunar.
Bu rehberde, Bootstrap kütüphanesinin metinleri biçimlendirmek için sunduğu tipografi araçlarını, yeni sınıfları ve SEO uyumlu temiz bir yapıyı nasıl kuracağınızı örneklerle sıfırdan öğreneceğiz.
1. Başlıklar (Headings) Kullanımı
HTML’de yer alan standart <h1> ile <h6> arasındaki başlık etiketleri, Bootstrap tarafından otomatik olarak tarayıcılar arası tutarlılık sağlayacak şekilde şık bir biçimde stillendirilir. Arama motorları (SEO) için sayfa içindeki hiyerarşiyi bu etiketlerle kurmak çok önemlidir.
Ancak bazen SEO hiyerarşisini bozmadan, örneğin bir <p> (paragraf) veya <span> etiketinin görsel olarak bir başlık gibi büyük görünmesini isteyebilirsiniz. Bootstrap 5, bunun için .h1 ile .h6 arasında değişen başlık sınıfları sunar.
Örnek Kullanım:
<h1>Bu standart bir H1 başlığıdır</h1>
<p class="h2">Bu bir paragraftır ancak H2 başlığı büyüklüğünde görünür</p>
2. Görüntü Başlıkları (Display Headings) ve RFS Özelliği
Geleneksel başlıklar sayfa içi hiyerarşi için harikadır, ancak bazen bir açılış sayfasında (landing page) veya “Hero” alanında kullanıcının dikkatini hemen çekecek çok daha büyük ve ince tasarımlı metinlere ihtiyaç duyarsınız. İşte burada Display (Görüntü) sınıfları devreye girer.
Bootstrap 5, önceki sürümlerden farklı olarak .display-1‘den başlayıp .display-6‘ya kadar uzanan genişletilmiş bir görüntü başlığı yelpazesi sunar.
Önemli Yenilik (RFS): Bootstrap 5 ile birlikte Duyarlı Yazı Tipi Boyutları (Responsive Font Sizes – RFS) motoru varsayılan olarak aktif hale gelmiştir. Bu özellik sayesinde, kullandığınız devasa .display-* başlıkları veya standart başlıklar, kullanıcının cihazının ekran genişliğine göre otomatik olarak küçülür veya büyür. Ekstra CSS veya medya sorgusu (media query) yazmanıza gerek kalmaz.
Örnek Kullanım:
<h1 class="display-1">Devasa Ana Başlık</h1>
<h1 class="display-6">Daha Küçük Görüntü Başlığı</h1>
3. Vurgulu Metinler (Lead) ve Satır İçi Stiller
Bir makale veya blog yazısı tasarlıyorsanız, giriş paragrafının okuyucunun ilgisini çekmesi için biraz daha büyük ve hafif farklı bir renkte olmasını isteyebilirsiniz. Bootstrap, bu tür öne çıkan paragraflar oluşturmak için .lead sınıfını kullanır.
Örnek Kullanım:
<p class="lead">Bu paragraf standart metinlerden daha büyük, daha okunaklı ve vurguludur. Okuyucunun dikkatini metne çekmek için idealdir.</p>
<p>Bu ise standart bir paragraf metnidir.</p>
4. Yazı Boyutu ve Satır Yüksekliği (Font Size & Line Height)
Bootstrap 5, metin boyutlarını ve satırlar arası boşlukları doğrudan HTML üzerinden kontrol edebilmeniz için yeni ve pratik yardımcı sınıflar (utilities) eklemiştir.
- Font Size (Yazı Boyutu): Metin boyutunu HTML başlık seviyelerine uygun olarak ayarlamak için
.fs-1(en büyük) ile.fs-6(en küçük) arasındaki sınıfları kullanabilirsiniz. - Line Height (Satır Yüksekliği): Okunabilirliği artırmak için metinlerin satır arası boşluklarını
.lh-1(dar),.lh-sm(küçük),.lh-base(varsayılan) ve.lh-lg(geniş) sınıfları ile kolayca değiştirebilirsiniz.
Örnek Kullanım:
<p class="fs-4 lh-lg">Bu metnin boyutu standarttan büyüktür (fs-4) ve satır arası boşlukları okumayı kolaylaştırmak için genişletilmiştir (lh-lg).</p>
5. Metin Hizalama ve RTL Mantığı (Text Alignment)
Bootstrap 4’te metinleri hizalamak için .text-left ve .text-right sınıfları kullanılırdı. Ancak Bootstrap 5, Sağdan Sola okunan dilleri (Arapça, İbranice vb. – RTL) desteklemek için mantıksal özelliklere (logical properties) geçiş yaptı.
Artık metin hizalamaları yöne göre değil, başlangıç ve bitiş noktalarına göre adlandırılıyor:
.text-start: Metni sola hizalar (RTL dillerde sağa hizalar)..text-center: Metni ortalar..text-end: Metni sağa hizalar (RTL dillerde sola hizalar).
Örnek Kullanım:
<p class="text-start">Sola (Başlangıca) hizalı metin.</p>
<p class="text-center">Ortalanmış metin.</p>
<p class="text-end">Sağa (Bitişe) hizalı metin.</p>
6. Yazı Tipi Kalınlığı, İtalik ve Monospace
Sitenizdeki metinlerin ağırlığını (kalınlığını) ve stilini değiştirmek Bootstrap 5 ile çok daha tutarlı ve kısa sınıflara kavuştu.
- Kalınlık (Font Weight): Kalın metinler için
.fw-bold, normal metinler için.fw-normalve Bootstrap 5.3 ile gelen orta kalınlıktaki metinler için.fw-mediumsınıfları kullanılır. - İtalik (Font Style): Eğik metinler oluşturmak için
.fst-italicsınıfı kullanılır. - Monospace: Kod blokları veya sabit genişlikli yazılar oluşturmak için önceki sürümlerdeki
.text-monospacesınıfı kaldırılarak yerine.font-monospacegetirilmiştir.
Örnek Kullanım:
<p class="fw-bold">Bu çok kalın bir metindir.</p>
<p class="fw-medium fst-italic">Bu orta kalınlıkta ve eğik (italik) bir metindir.</p>
<p class="font-monospace">Bu metin daktilo (kod) fontuyla yazılmıştır.</p>
7. Metin Dönüştürme (Text Transform)
CSS yazmadan metinlerdeki harflerin büyüklük küçüklük durumunu yönetmek SEO açısından da (örneğin başlıklarda) oldukça işlevseldir.
.text-uppercase: Tüm harfleri BÜYÜK yapar..text-lowercase: Tüm harfleri küçük yapar..text-capitalize: Her Kelimenin İlk Harfini Büyük Yapar.
8. Metin Renklendirme (Text Colors)
Tipografinin en önemli kısımlarından biri metne renk vermektir. Bootstrap, tema renk paletine bağlı olarak çeşitli metin rengi sınıfları sunar. Örneğin, ana eylem renkleri için .text-primary (mavi), başarı mesajları için .text-success (yeşil) kullanabilirsiniz.
Önemli Bir Güncelleme: Bootstrap’te uzun yıllardır soluk/ikincil metinler için kullanılan .text-muted sınıfı, yeni sürümlerde (v5.3 itibariyle) eskimiş (deprecated) kabul edilmiş ve karanlık/aydınlık (dark mode) renk modlarına daha kusursuz uyum sağlaması adına .text-body-secondary ile değiştirilmiştir.
Örnek Kullanım:
<p class="text-primary">Vurgulu ana renk metni.</p>
<p class="text-body-secondary">Daha soluk, ikincil bir açıklama metni (Eski text-muted yerine kullanılır).</p>
9. Alıntılar (Blockquotes) ve Listeler (Lists)
İçeriklerinizde başka bir kaynaktan alıntı yapıyorsanız, tipografik olarak bunu belli etmeniz gerekir. Bootstrap, HTML’in standart <blockquote> etiketini çok şık bir şekilde stillendirir.
Listeler tarafında ise; madde imlerini (noktaları) kaldırmak ve dış boşluğu sıfırlamak için .list-unstyled sınıfını; liste elemanlarını alt alta değil de yan yana dizmek için ise .list-inline ve iç elemanlara .list-inline-item sınıfını uygulayabilirsiniz.
Alıntı Örneği:
<blockquote class="blockquote">
<p>Harika web siteleri, kusursuz tipografi ile başlar.</p>
</blockquote>
10. Gelişmiş Özelleştirme: Sass ile Tipografiyi Yönetmek
Eğer projenizi bir adım öteye taşıyıp Bootstrap’in varsayılan yazı tipini (font) tamamen kendi kurumsal fontunuz ile değiştirmek isterseniz, Bootstrap’in arka plandaki gücü olan Sass (SCSS) değişkenleri devreye girer.
Bootstrap’in kaynak dosyalarında yer alan $font-family-base değişkeni, tüm sitenin ana yazı tipini kontrol eder. Aynı şekilde varsayılan 16px’lik metin boyutunu $font-size-base değişkeniyle, satır yüksekliğini ise $line-height-base değişkeniyle tek bir merkezden projenizin bütünü için değiştirebilirsiniz.
// Kendi SCSS dosyanızda Google Fonts'tan aldığınız Roboto'yu tanımlayabilirsiniz
$font-family-base: "Roboto", sans-serif;
$font-size-base: 1.1rem; // Varsayılan boyutu hafifçe büyütür
@import "node_modules/bootstrap/scss/bootstrap";
Özetle
Bootstrap 5 Tipografi araçları; okuyucuyu yormayan, görsel hiyerarşisi güçlü, her cihaza anında uyum sağlayan ve karanlık moda (dark mode) duyarlı web sayfaları tasarlamak için ihtiyacınız olan tüm donanıma sahiptir. Uzun CSS dosyaları yazıp “Bu başlığın boyutu mobilde ne olmalı?” diye düşünmek yerine, .fs-2, .fw-bold, .text-center gibi son derece akılda kalıcı sınıfları HTML kodlarınıza ekleyerek hem arama motorlarının seveceği hem de kullanıcıların bayılacağı özgün tasarımları dakikalar içinde ortaya çıkarabilirsiniz. Başlıklarınızı düzenleyerek ve RFS’nin esnekliğini keşfederek Bootstrap serüveninizde hızla ilerlemeye başlayın!
