The CSS Podcast - 036: Text & Typography
Metin, web'in temel yapı taşlarından biridir.
Web sitesi oluştururken metninize stil uygulamanız gerekmez. HTML'de oldukça makul varsayılan stiller bulunur.
Ancak web sitenizin büyük bir kısmını metin oluşturacağından, metninize stil eklemek faydalı olacaktır. Birkaç temel özelliği değiştirerek kullanıcılarınız için okuma deneyimini önemli ölçüde iyileştirebilirsiniz.
Bu modülde, web sayfalarınıza özel yazı tipleri içe aktarmanıza olanak tanıyan @font-face
kuralıyla başlayacağız. Bu sayede, kullanıcı tarafından yüklenen yazı tiplerinden bağımsız olarak ihtiyacınız olan yazı tipine sahip olursunuz.
Ardından font-family
, font-style
, font-weight
ve font-size
gibi temel CSS yazı tipi özelliklerini ele alacağız. Bu temel bilgiler, metni hem stil hem de okunabilirlik açısından değiştirmek için zemin hazırlar.
Ayrıca, text-indent
ve word-spacing
gibi paragrafa özgü özelliklere de değineceğiz. Son olarak, değişken yazı tipleri ve sözde öğeler gibi ileri seviye konulara geçerek yazım denetiminizi daha da hassaslaştıracağız.
Bu CSS tekniklerini anlamanızı ve uygulamanızı sağlamak için pratik örnekler ve ipuçları sağlanacaktır.
@font-face
kuralı
@font-face
CSS at-kuralı, web tasarımında metin görüntülemek için özel yazı tipleri belirtmenize ve kullanmanıza olanak tanır. @font-face
'ün en iyi özelliği çok yönlülüğüdür: Yazı tiplerini uzak bir sunucudan veya kullanıcının cihazına yüklenmiş bir yazı tipinden almanıza olanak tanır.
Söz dizimi
@font-face {
font-family: "Trickster";
src:
local("Trickster"),
url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
url("trickster-outline.otf") format("opentype"),
url("trickster-outline.woff") format("woff")
}
Tanımlayıcılar
ascent-override
- Yükseliş metriğini özelleştirerek referans değerin üzerindeki alanı etkiler.
descent-override
- İnme metriğini ayarlayarak referans çizginin altındaki alanı etkiler.
font-display
- Yazı tipinin indirme durumuna bağlı olarak yazı tipinin görüntüleme davranışını kontrol eder.
font-family
- Yazı tipini, yazı tipiyle ilgili özelliklerde kullanılmak üzere adlandırır.
font-stretch
- Kabul edilebilir yatay ölçeği tek bir değer veya aralık olarak belirtir.
font-style
- Eğik stiller için açı aralıklarını destekleyen yazı tipi stilini tanımlar.
font-weight
- Yazı tipinin ağırlığını veya kullanılabilen ağırlık aralığını belirler.
font-feature-settings
- OpenType yazı tipi özelliklerine erişimi sağlar.
font-variation-settings
- Değişken yazı tipi ayarları üzerinde hassas kontrol sağlar.
line-gap-override
- Yazı tipinin varsayılan satır aralığını geçersiz kılar.
size-adjust
- Yazı tipinin ana hatlarına ve metriklerine bir ölçeklendirme faktörü uygular.
src
- Yerel veya uzak olup olmadığına bakılmaksızın yazı tipi kaynağını tanımlar. Bu,
@font-face
kuralı için gereklidir.url()
velocal()
'yisrc
içinde birleştirmek, varsa yerel bir yazı tipini kullanan ve yedek olarak uzak bir yazı tipi dosyasına geri dönen yaygın bir stratejidir. Tarayıcılar, kaynakların önceliğini beyan sırasına göre belirler. Bu nedenle,local()
genellikleurl()
'den önce gelmelidir. unicode-range
- Bu yazı tipinin kullanılması gereken karakterleri sınırlar.
Açıklama
@font-face
, tasarımcıların özel yazı tipleri kullanmasına olanak tanıyarak "web'de kullanıma uygun" yazı tiplerinin kısıtlamalarından kurtulmasını sağlar. local()
işlevinin kullanıcının cihazında yazı tipi arama özelliği, internet bağlantısına bağlı olmayan sorunsuz bir deneyim sunar.
Yazı tipi MIME türleri
Biçim | MIME Türü |
---|---|
TrueType | font/ttf |
OpenType | font/otf |
Web Açık Yazı Tipi Biçimi | font/woff |
Web Open Font Format 2 | font/woff2 |
@font-face ve font-family arasındaki fark
CSS'de @font-face
ve font-family
genellikle birbirine karıştırılır ancak farklı amaçlara hizmet eder.
Daha önce de belirttiğimiz gibi @font-face
, web uygulamanızda kullanmak istediğiniz özel yazı tiplerini tanımlamak için kullanılan bir kuraldır. Tarayıcıya yazı tipini nereye indireceğini, yükleme sırasında nasıl gösterileceğini (font-display
mülkü ile) ve hangi karakter alt kümesinin indirileceğini (unicode-range
ile) belirtir.
Buna karşılık font-family
, bir öğeye belirli bir yazı tipi veya yazı tipi listesi atamak için CSS kuralında kullanılan bir CSS özelliğidir. font-family
altında listelenen yazı tipleri web'de kullanılabilen yazı tipleri, sistem yazı tipleri veya @font-face
ile tanımlanan özel yazı tipleri olabilir.
Özetlemek gerekirse @font-face
bir yazı tipi tanımlar ve ona bir ad verir, font-family
ise bu tanımlanmış yazı tipini HTML öğelerine uygular.
Her ikisini de kullanan bir örneği aşağıda bulabilirsiniz:
<table>
<thead>
<tr>
<th><p><pre>
@font-face {
font-family: "CustomFont";
src: url("customfont.woff2") format("woff2");
}
body {
font-family: "CustomFont", Arial, sans-serif;
}
Bu örnekte @font-face
, "ÖzelYazı"yı tanımlar ve tarayıcıya nerede bulacağını söyler. font-family
özelliği, "CustomFont" kullanılamıyorsa yedek olarak Arial'ı kullanarak bu değeri body öğesine uygular.
Yazı tipini değiştirme
Metninizin yazı tipini değiştirmek için font-family
simgesini kullanın.
font-family
mülkü, belirli veya genel yazı tipi ailelerine atıfta bulunan, virgülle ayrılmış bir dize listesi kabul eder. Belirli yazı tipi aileleri tırnak içine alınmış dizelerdir (ör. "Helvetica", "EB Garamond" veya "Times New Roman"). Genel yazı tipi aileleri, serif
, sans-serif
ve monospace
gibi anahtar kelimelerdir (Seçeneklerin tam listesini MDN'de bulabilirsiniz). Tarayıcı, sağlanan listedeki ilk kullanılabilir yazı tipini gösterir.
font-family
kullanırken, kullanıcının tarayıcısında tercih ettiğiniz yazı tipleri bulunmaması ihtimaline karşı en az bir genel yazı tipi ailesi belirtmeniz gerekir. Genel olarak, yedek genel yazı tipi ailesi tercih ettiğiniz yazı tiplerine benzer olmalıdır: font-family: "Helvetica"
(sans serif yazı tipi ailesi) kullanılıyorsa yedek yazı tipi sans-serif
olmalıdır.
Eğik ve eğik yazı tipleri kullanma
Metnin italik olup olmayacağını ayarlamak için font-style
simgesini kullanın. font-style
, aşağıdaki anahtar kelimelerden birini kabul eder: normal
, italic
ve oblique
.
Metni kalın yapma
Metnin "kalınlığını" ayarlamak için font-weight
simgesini kullanın. Bu özellik anahtar kelime değerlerini (normal
, bold
), göreli anahtar kelime değerlerini (lighter
, bolder
) ve sayısal değerleri (100
ile 900
arasında) kabul eder.
normal
ve bold
anahtar kelimeleri sırasıyla 400
ve 700
sayısal değerlerine eşdeğerdir.
lighter
ve bolder
anahtar kelimeleri, üst öğeye göre hesaplanır. Bu değerin nasıl belirlendiğini gösteren kullanışlı bir grafik için MDN'nin Göreceli Ağırlıkların Anlamı başlıklı makalesine bakın.
Metnin boyutunu değiştirme
Metin öğelerinizin boyutunu kontrol etmek için font-size
öğesini kullanın. Bu mülk, uzunluk değerlerini, yüzdeleri ve birkaç anahtar kelime değerini kabul eder.
font-size
, uzunluk ve yüzde değerlerine ek olarak bazı mutlak anahtar kelime değerlerini (xx-small
, x-small
, small
, medium
, large
, x-large
, xx-large
) ve birkaç göreceli anahtar kelime değerini (smaller
, larger
) kabul eder. Göreceli değerler, üst öğenin font-size
değerine göredir.
Satır aralığını değiştirme
Bir öğedeki her satırın yüksekliğini belirtmek için line-height
öğesini kullanın. Bu mülk sayı, uzunluk, yüzde veya normal
anahtar kelimesini kabul eder. Genellikle, devralmayla ilgili sorunları önlemek için uzunluk veya yüzde yerine bir sayı kullanılması önerilir.
Karakterler arasındaki boşluğu değiştirme
Metninizdeki karakterler arasındaki yatay alan miktarını kontrol etmek için letter-spacing
simgesini kullanın. Bu özellik, em
, px
ve rem
gibi uzunluk değerlerini kabul eder.
Belirtilen değerin, karakterler arasındaki doğal boşluk miktarını artırdığını unutmayın. Aşağıdaki demoda, posta kutusunun boyutunu ve letter-spacing
ile nasıl değiştiğini görmek için tek bir mektup seçmeyi deneyin.
Kelimeler arasındaki boşluğu değiştirme
Metninizdeki her kelimenin arasındaki boşluk uzunluğunu artırmak veya azaltmak için word-spacing
simgesini kullanın. Bu özellik, em
, px
ve rem
gibi uzunluk değerlerini kabul eder. Belirttiğiniz uzunluğun, normal boşluklara ek olarak ek boşluk için olduğunu unutmayın. Bu, word-spacing: 0
'ün word-spacing: normal
ile eşdeğer olduğu anlamına gelir.
font
kısaltma
Yazı tipiyle ilgili birçok özelliği aynı anda ayarlamak için kısaltma font
özelliğini kullanabilirsiniz. Olası özellikler şunlardır: font-family
, font-size
, font-stretch
, font-style
, font-variant
, font-weight
ve line-height
.
Bu özelliklerin nasıl sıralanacağına dair ayrıntılar için MDN'nin font
makalesine göz atın.
Metinde büyük/küçük harf kullanımını değiştirme
Temel HTML'yi değiştirmenize gerek kalmadan metninizin büyük harf kullanımını değiştirmek için text-transform
öğesini kullanın. Bu özellik aşağıdaki anahtar kelime değerlerini kabul eder: uppercase
, lowercase
ve capitalize
.
Metne alt çizgi, üst çizgi ve kesik çizgi ekleme
Metninize satır eklemek için text-decoration
simgesini kullanın. Alt çizgiler en yaygın olarak kullanılan yöntemdir ancak metninizin üzerine veya içine çizgi ekleyebilirsiniz.
text-decoration
mülkü, aşağıda ayrıntılı olarak açıklanan daha spesifik mülkler için kısaltmadır.
text-decoration-line
mülkü underline
, overline
ve line-through
anahtar kelimelerini kabul eder. Birden fazla satır için birden fazla anahtar kelime de belirtebilirsiniz.
text-decoration-color
mülkü, text-decoration-line
öğesindeki tüm süslemelerin rengini ayarlar.
text-decoration-style
mülkü solid
, double
, dotted
, dashed
ve wavy
anahtar kelimelerini kabul eder.
text-decoration-thickness
mülkü tüm uzunluk değerlerini kabul eder ve text-decoration-line
'dan itibaren tüm süslemelerin çizgi genişliğini ayarlar.
text-decoration
mülkü, yukarıdaki tüm mülkler için kısa bir ifadedir.
Metninize girinti ekleme
Metin bloklarınıza girinti eklemek için text-indent
simgesini kullanın. Bu mülk, bir uzunluk (ör. 10px
, 2em
) veya kapsayıcı bloğun genişliğinin yüzdesini alır.
Taşkın veya gizli içeriklerle ilgili sorunları giderme
Gizli içeriğin nasıl temsil edileceğini belirtmek için text-overflow
öğesini kullanın. İki seçenek vardır: Metni taşma noktasında kısaltan clip
(varsayılan) ve taşma noktasında üç nokta (…) gösteren ellipsis
.
Boşlukları kontrol etme
white-space
özelliği, bir öğedeki boşlukların nasıl ele alınacağını belirtmek için kullanılır. Daha fazla bilgi için MDN'deki white-space
makalesine göz atın.
white-space: pre
, ASCII resimleri veya dikkatlice girintili kod blokları oluşturmak için yararlı olabilir.
Kelimelerin nasıl bölüneceğini kontrol etme
Satırı aştığında kelimelerin nasıl "bölüneceğini" değiştirmek için word-break
simgesini kullanın. Tarayıcı varsayılan olarak kelimeleri bölemez. word-break
için break-all
anahtar kelime değeri kullanıldığında tarayıcı, gerekirse kelimeleri tek tek karakterlere ayırma talimatı alır.
Metin hizalamasını değiştirme
Bir blok veya tablo hücresi öğesindeki metnin yatay hizalamasını belirtmek için text-align
öğesini kullanın. Bu özellik, left
, right
, start
, end
, center
, justify
ve match-parent
anahtar kelime değerlerini kabul eder.
left
ve right
değerleri, metni sırasıyla bloğun sol ve sağ taraflarına hizalar.
Mevcut yazma modunda bir metin satırının başlangıç ve bitiş konumunu temsil etmek için start
ve end
karakterlerini kullanın. Bu nedenle start
, İngilizcede left
ile, sağdan sola (RTL) yazılan Arap alfabesinde ise right
ile eşlenir. Bunlar mantıksal hizalamalardır. Mantıksal özellikler modülümüzde daha fazla bilgi edinebilirsiniz.
Metni bloğun ortasına hizalamak için center
simgesini kullanın.
justify
değeri, metni düzenler ve kelime aralığını otomatik olarak değiştirir. Böylece metin, bloğun hem sol hem de sağ kenarıyla hizalanır.
Metnin yönünü değiştirme
Metninizin yönünü ayarlamak için direction
simgesini kullanın. ltr
(soldan sağa, varsayılan) veya rtl
(sağdan sola) seçeneklerinden birini belirleyin. Arapça, İbranice veya Farsça gibi bazı diller sağdan sola yazılır. Bu nedenle direction: rtl
kullanılmalıdır. İngilizce ve soldan sağa diğer tüm diller için direction: ltr
kullanın.
Metnin akışını değiştirme
Metnin akış şeklini ve düzenlenme şeklini değiştirmek için writing-mode
simgesini kullanın. Varsayılan değer horizontal-tb
'tür ancak yatay olarak akmasını istediğiniz metinler için writing-mode
'yi vertical-lr
veya vertical-rl
olarak da ayarlayabilirsiniz.
Metnin yönünü değiştirme
Metninizdeki karakterlerin yönünü belirtmek için text-orientation
simgesini kullanın. Bu özellik için geçerli değerler mixed
ve upright
'tır. Bu özellik yalnızca writing-mode
horizontal-tb
dışında bir değere ayarlandığında geçerlidir.
Metne gölge ekleme
Metninize gölge eklemek için text-shadow
simgesini kullanın. Bu özellik üç uzunluk (x-offset
, y-offset
ve blur-radius
) ve bir renk bekler.
Daha fazla bilgi edinmek için Gölgeler ile ilgili modülümüzün text-shadow
bölümüne göz atın.
Değişken yazı tipleri
Genellikle "normal" yazı tipleri, yazı tipinin farklı sürümleri (ör. kalın, italik veya sıkıştırılmış) için farklı dosyaların içe aktarılmasını gerektirir. Değişken yazı tipleri, tek bir dosyada bir yazı tipinin birçok farklı varyantını içerebilen yazı tipleridir.
Daha fazla bilgi için değişken yazı tipleri hakkındaki makalemizi inceleyin.
Sözde öğeler
::first-letter
ve ::first-line
sözde öğeleri
::first-letter
ve ::first-line
sözde öğeleri, bir metin öğesinin sırasıyla ilk harfini ve ilk satırını hedefler.
::selection
sözde öğe
Kullanıcı tarafından seçilen metnin görünümünü değiştirmek için ::selection
sözde öğesini kullanın.
Bu sözde öğe kullanılırken yalnızca belirli CSS özellikleri kullanılabilir: color
, background-color
, text-decoration
, text-shadow
, stroke-color
, fill-color
, stroke-width
.
font-variant
font-variant
özelliği, small-caps
ve slashed-zero
gibi yazı tipi varyantlarını seçmenize olanak tanıyan çeşitli CSS özelliklerinin kısaltmasıdır. Bu kısaltmanın içerdiği CSS özellikleri font-variant-alternates
, font-variant-caps
, font-variant-east-asian
, font-variant-ligatures
ve font-variant-numeric
'dir. Kullanımıyla ilgili daha fazla ayrıntı için her mülkün bağlantılarına göz atın.
Öğrendiklerinizi test etme
Web'de yazımla ilgili bilginizi test edin
Aşağıdaki anahtar kelimelerden hangisi font-family
genel yedek olarak kullanılabilir?
sans-serif
serif
monospace
helvetica
sci-fi
italic
Her kelimenin ilk harfini büyük harfe dönüştürmek için hangi ifade kullanılır? Ör. This is a sentence.
➡ This Is A Sentence.
font-variant: capitalize;
text-capitalize: true;
font-style: capitals;
text-case: capitalize;
text-transform: capitalize;
Doğru veya Yanlış: Metni sola, sağa veya ortalamak için text-orientation
simgesini kullanın.
Metin satırları arasındaki boşluğu değiştirmek için hangi CSS mülkü kullanılabilir?
baseline-distance
line-spacing
leading
line-height
Kaynaklar
- Yazı tipi en iyi uygulamaları, yazı tiplerini içe aktarma, yazı tiplerini oluşturma ve web'de yazı tiplerini kullanmayla ilgili diğer en iyi uygulamalar hakkında bilgi verir.
- MDN Temel metin ve yazı tipi stili.