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ı metinler oluşturacağından, sitenizi daha ilgi çekici hale getirmek için metinlere stil eklemeniz faydalı olacaktır. Birkaç temel özelliği değiştirerek kullanıcılarınızın 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üklenen 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
- İniş metriğini ayarlayarak referans değerin 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 destekleyici açı aralıklarının yanı sıra yazı tipi stilini tanımlar.
font-weight
- Yazı tipinin ağırlığını veya kullanılabilir 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 olanağı sunar.
line-gap-override
- Yazı tipinin varsayılan satır aralığını geçersiz kılar.
size-adjust
- Yazı tipinin dış hatlarına ve metriklerine ölçeklendirme faktörü uygular.
src
- Yerel veya uzak 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
, özel tipografi kullanmalarını sağlayarak tasarımcıları "web için güvenli" yazı tiplerinin kısıtlamalarından kurtarır. 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 Open Yazı Tipi Biçimi | font/woff |
Web Open Yazı Tipi Biçimi 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ı tipinin nereye indirileceğini, yükleme sırasında nasıl gösterileceğini (font-display
mülkü ile) bildirir ve hangi karakter alt kümesinin indirileceğini belirtir (unicode-range
ile).
Buna karşılık font-family
, bir öğeye belirli bir yazı tipini veya yazı tipi listesini atamak için CSS kuralında kullanılan bir CSS özelliğidir. font-family
altında listelenen yazı tipleri web'de güvenli yazı tipleri, sistem yazı tipleri veya @font-face
ile tanımlanan özel yazı tipleri olabilir.
Özetlemek gerekirse, @font-face
bir yazı tipi tanımlayıp bu yazı tipine bir ad verir.
font-family
, bildirilen bu 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, "Helvetica", "EB Garamond" veya "Times New Roman" gibi tırnak içindeki dizelerdir. 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.
Kullanıcının tarayıcısında tercih ettiğiniz yazı tipleri bulunmayabilir. Bu özelliği kullanırken, font-family
kullanırken 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 yap
Metnin "kalınlığını" ayarlamak için font-weight
simgesini kullanın. Bu mülk anahtar kelime değerleri (normal
, bold
), göreli anahtar kelime değerleri (lighter
, bolder
) ve sayısal değerler (100
- 900
) kabul ediyor.
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 İlişkili 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
aracını kullanın. Bu özellik, 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öreli anahtar kelime değerini (smaller
, larger
) kabul eder. Göreli değerler üst öğenin font-size
değerine göre belirlenir.
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 bir sayı, uzunluk, yüzde veya normal
anahtar kelimesini kabul eder. Genel olarak, devralmayla ilgili sorunları önlemek için uzunluk veya yüzde yerine bir sayı kullanmanız ö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, tek bir harfi seçerek sinemaskop boyutunu ve letter-spacing
ile nasıl değiştiğini görmeyi 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şluğa ek olarak ekstra 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ı mülklerin listesi ş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.
Metindeki küçük/büyük harf düzenini değiştir
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
özelliği, aşağıda ayrıntılı olarak açıklanan daha spesifik tesislerin kısaltmasıdı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
özelliği, tüm uzunluk değerlerini kabul eder ve text-decoration-line
içindeki tüm süslemelerin fırça 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 özellik, bir uzunluk (örneğin, 10px
, 2em
) veya kapsayıcı bloğun genişliğinin bir 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
mülkü, 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 çizimi veya dikkatli bir şekilde girintili kod blokları oluştururken yararlı olabilir.
Kelimelerin nasıl bölüneceğini kontrol etme
Satırdan taşacak kelimelerin "kırılma" biçimini 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ırması için talimat alır.
Metin hizalamasını değiştirme
Bir blok veya tablo hücresinde metnin yatay hizalamasını belirtmek için text-align
değerini kullanın. Bu mülk 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ğ tarafına hizalar.
Geçerli yazma modunda bir metin satırının başlangıç ve bitişini göstermek için start
ve end
öğelerini 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
simgesini kullanın.
Metnin akışını değiştirme
Metnin akış 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
'ü 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 özellikte üç uzunluk (x-offset
, y-offset
ve blur-radius
) ve bir renk bekleniyor.
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, sırasıyla bir metin öğesinin 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ım hakkındaki bilginizi test edin
Aşağıdaki anahtar kelimelerden hangisi font-family
genel yedek olarak kullanılabilir?
serif
italic
helvetica
monospace
sans-serif
sci-fi
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.
text-capitalize: true;
font-style: capitals;
text-transform: capitalize;
text-case: capitalize;
font-variant: 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-height
leading
line-spacing
Kaynaklar
- Yazı tipi en iyi uygulamaları bölümünde yazı tiplerini içe aktarma, yazı tiplerini oluşturma ve web'de yazı tiplerini kullanmaya yönelik diğer en iyi uygulamalar ele alınmaktadır.
- MDN Temel metin ve yazı tipi stili.