CSS Tipografi Hile Sayfası: Örneklerle
Merhaba! Fatih Soysal olarak, CSS tipografisi hakkında kapsamlı bir rehber hazırladım. Bu makalede, web sitenizin yazı tiplerini özelleştirmek için kullanabileceğiniz birçok CSS özelliğini örneklerle açıklayacağım. Yazı tiplerinin seçimi ve düzenlenmesi, web sitenizin görünümünü ve okunabilirliğini büyük ölçüde etkiler. Bu nedenle, bu konuya hakim olmak, web tasarımında önemli bir avantajdır.
Temel Tipografi Özellikleri
İşte web tasarımınızda sıklıkla kullanacağınız temel CSS tipografi özellikleri:
font-family: Yazı Tipi Ailesi
Bu özellik, metnin görüntüleneceği yazı tipi ailesini belirler. Örneğin, “Arial”, “Times New Roman” veya “Verdana” gibi yaygın yazı tiplerini kullanabilirsiniz. Birden fazla yazı tipi belirtmeniz durumunda, tarayıcı önce ilk yazı tipini dener ve bu yazı tipi yoksa, bir sonraki yazı tipini kullanır. Bu şekilde, istediğiniz yazı tipinin olmaması durumunda yedek bir yazı tipi kullanılmış olur.
p {
font-family: Arial, sans-serif;
}
font-size: Yazı Tipi Boyutu
Bu özellik, metnin boyutunu piksel (px), em, rem veya yüzde (%) gibi birimlerle belirler. Örneğin, font-size: 16px; metnin boyutunu 16 piksele ayarlar. Em ve rem birimleri, göreceli boyutlandırma sağladıkları için daha esnektir. Daha fazla bilgi için web sitemi ziyaret edebilirsiniz.
h1 {
font-size: 3em;
}
font-weight: Yazı Tipi Kalınlığı
Bu özellik, metnin kalınlığını belirler. normal, bold, bolder, lighter veya sayısal değerler (100-900) kullanılabilir. Örneğin, font-weight: bold; metni kalınlaştırır.
strong {
font-weight: 700;
}
font-style: Yazı Tipi Stili
Bu özellik, metnin italik olup olmayacağını belirler. normal veya italic değerlerini kullanabilirsiniz.
em {
font-style: italic;
}
line-height: Satır Aralığı
Bu özellik, satırlar arasındaki mesafeyi belirler. Sayısal değerler veya yüzde (%) kullanılabilir. Örneğin, line-height: 1.5; satır yüksekliğini 1.5 katına çıkarır.
p {
line-height: 1.6;
}
letter-spacing: Harf Aralığı
Bu özellik, harfler arasındaki mesafeyi belirler. Pozitif değerler harfler arasına mesafe eklerken, negatif değerler harfleri birbirine yaklaştırır.
h1 {
letter-spacing: 2px;
}
word-spacing: Kelime Aralığı
Bu özellik, kelimeler arasındaki mesafeyi belirler. Pozitif değerler kelimeler arasına mesafe eklerken, negatif değerler kelimeleri birbirine yaklaştırır.
p {
word-spacing: 5px;
}
text-align: Metin Hizalama
Bu özellik, metnin nasıl hizalanacağını belirler. left, right, center ve justify değerlerini kullanabilirsiniz.
p {
text-align: center;
}
text-transform: Metin Dönüşümü
Bu özellik, metnin büyük harf, küçük harf veya baş harflerle mi görüntüleneceğini belirler. uppercase, lowercase, capitalize değerlerini kullanabilirsiniz.
p {
text-transform: uppercase;
}
text-decoration: Metin Süslemeleri
Bu özellik, metne altı çizgi, üst çizgi veya silme ekler. underline, overline, line-through ve none değerlerini kullanabilirsiniz.
a {
text-decoration: underline;
}
İleri Düzey Tipografi Teknikleri
Bu temel özelliklerin yanında, daha gelişmiş teknikler de mevcuttur. Örneğin, @font-face kuralı ile kendi özel yazı tiplerinizi kullanabilirsiniz. Ayrıca, text-shadow, text-overflow gibi özellikler ile metnin görünümünü daha da özelleştirebilirsiniz. Bu konuları daha detaylı olarak ele almak için W3Schools sitesini ziyaret edebilirsiniz.
Umarım bu CSS tipografi hile sayfası size yardımcı olmuştur! Web tasarımınızda başarılı olmanızı dilerim. Daha fazla bilgi için web sitemi ziyaret edebilirsiniz.
#Etiketler: CSS, tipografi, yazı tipi, font, font-size, font-family, font-weight, font-style, line-height, letter-spacing, word-spacing, text-align, text-transform, text-decoration, CSS örnekleri, CSS hile sayfası