Web tasarımının %90'ı tipografidir. Kullanıcılarınız sitenize girdiğinde renklerden önce yazıları okur. Tailwind CSS, tipografi yönetimini standart CSS'e göre çok daha hızlı ve tutarlı hale getirir.
Bu derste, piksel hesaplamalarıyla uğraşmadan metinlerinizi nasıl profesyonelce şekillendireceğinizi öğreneceksiniz.
Tailwind CSS Öğrenmek İster misin?
Projelerinizi hızlandırmak için Tailwind CSS Kursuma hemen göz atın.
1. Font Boyutları (Font Size)
Geleneksel CSS'te font-size: 16px yazmak yerine, Tailwind size önceden tanımlanmış, birbiriyle uyumlu bir boyut skalası sunar.
Sınıf yapısı: text-{boyut}
- text-xs: Ekstra küçük metin (Dipnotlar için)
- text-sm: Küçük metin
- text-base: Varsayılan boyut (Genellikle 16px - Paragraflar için)
- text-lg: Büyük metin (Giriş cümleleri için)
- text-xl ile text-9xl arası: Başlıklar için kullanılır.
Önemli Not: Tailwind'de bir font boyutu sınıfı (örn: text-xl) atadığınızda, Tailwind otomatik olarak en uygun satır yüksekliğini (line-height) de ayarlar. Bu, yazınızın okunabilirliğini artırır.
Örnek Kullanım:
<h1 class="text-4xl">Ana Başlık (Çok Büyük)</h1> <h2 class="text-2xl">Alt Başlık (Orta)</h2> <p class="text-base">Bu standart bir paragraf metnidir. Okunabilirliği yüksektir.</p> <span class="text-sm">Küçük açıklama metni.</span>
2. Yazı Kalınlığı (Font Weight)
Metnin vurgusunu ayarlamak için kullanılan kalınlık değerleri, font-weight özelliğine karşılık gelir.
Sınıf yapısı: font-{kalınlık}
En sık kullanılanlar şunlardır:
- font-light: İnce yazı (300)
- font-normal: Standart yazı (400)
- font-medium: Orta kalınlık (500)
- font-semibold: Yarı kalın (600 - Alt başlıklar için ideal)
- font-bold: Kalın (700 - Ana başlıklar için ideal)
Örnek Kullanım:
<p class="font-normal">Normal bir metin.</p> <p class="font-bold">Dikkat çekmesi gereken kalın metin!</p>
3. Metin Hizalama (Text Alignment)
Metinleri sağa, sola veya ortaya hizalamak için kullanılır. Özellikle responsive tasarımlarda bu sınıflar çok işe yarar.
- text-left: Sola hizala (Varsayılan)
- text-center: Ortala
- text-right: Sağa hizala
- text-justify: İki yana yasla
Pro İpucu: Responsive Hizalama Mobilde metni ortalayıp, masaüstünde sola yaslamak isterseniz Tailwind'in "breakpoint" ön eklerini kullanabilirsiniz.
<div class="text-center md:text-left"> <h2 class="text-2xl font-bold">Başlığımız</h2> <p>İçerik metnimiz burada yer alıyor.</p> </div>
4. Metin Dönüşümleri ve Dekorasyon
Yazıları büyük harfe çevirmek veya altını çizmek için ekstra CSS yazmanıza gerek yoktur.
- uppercase: TÜM HARFLERİ BÜYÜTÜR.
- lowercase: tüm harfleri küçültür.
- capitalize: Her Kelimenin Baş Harfini Büyütür.
- underline: Metnin altını çizer.
- line-through: Metnin üstünü çizer (İndirimli fiyatlar veya tamamlanan görevler için).
Örnek (Fiyat Kartı):
<p class="text-gray-500 line-through">₺500.00</p> <p class="text-2xl font-bold text-green-600">₺350.00</p>
5. Satır Aralığı (Line Height) ve Harf Aralığı (Letter Spacing)
Metnin "nefes almasını" sağlayan diğer önemli detaylar bunlardır.
- leading-{boyut}: Satır yüksekliğini ayarlar. Uzun paragraflarda leading-loose kullanmak okumayı kolaylaştırır.
- tracking-{boyut}: Harfler arası boşluğu ayarlar. Büyük başlıklarda tracking-tight (harfleri sıkılaştır) veya tracking-wide (harfleri aç) kullanmak estetik bir görünüm sağlar.
Örnek (Modern Başlık Tasarımı):
<h1 class="text-5xl font-extrabold tracking-tight text-slate-900"> Modern Web Tasarımı </h1>
Özet ve Sonraki Adım
Bu derste tipografinin temellerini atarak metinlerimizi boyutlandırmayı, hizalamayı ve vurgulamayı öğrendik.
Artık renkler, boşluklar ve yazılarla çalışabiliyoruz. Sırada bu elementleri bir düzen içinde tutmamızı sağlayan Layout (Düzen) konuları var.
Bir sonraki derste Genişlik (Width), Yükseklik (Height) ve Boyutlandırma konularını işleyerek sayfa iskeletini oluşturmaya başlayacağız.