Metin ve yazı

CSS Podcast - 036: Metin ve Yazı Tipi

Metin, web'in temel yapı taşlarından biridir.

Web sitesi oluştururken metninizin stilini belirlemeniz gerekmez. HTML'nin aslında oldukça makul, varsayılan bir stili vardır.

Ancak, metin büyük olasılıkla web sitenizin büyük bir kısmını oluşturacaktır. Bu nedenle, metni zenginleştirmek için biraz 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, özel yazı tiplerini web sayfalarınıza aktarmanıza olanak tanıyan @font-face kuralıyla başlayacağız. Bu sayede, kullanıcı tarafından yüklenen yazı tiplerine bağımsız olarak tam olarak ihtiyacınız olan yazı tipine sahip olursunuz.

Şimdi de font-family, font-style, font-weight ve font-size gibi temel CSS yazı tipi özelliklerini ele alacağız. Bu temel bilgiler, metnin hem stil hem de okunabilirlik açısından değiştirilmesi için zemin hazırlar.

Ayrıca, tipografik kontrolünüzü daha da iyileştiren değişken yazı tipleri ve sözde öğeler gibi ileri düzey konularla bitirmeden önce text-indent ve word-spacing gibi paragrafa özgü özelliklere değineceğiz.

Ders boyunca, bu CSS tekniklerini kavramanızı ve uygulama şeklinizi pekiştirecek pratik örnekler ve ipuçları sunulacaktır.

@font-face kuralı

@font-face CSS kuralı, web tasarımında etkili bir araçtır ve metin görüntülemek için özel yazı tiplerini belirtmenizi ve kullanmanızı sağlar. @font-face, çok yönlü olmasında sağladığı gibidir: Yazı tiplerini uzak bir sunucudan veya kullanıcının cihazında yüklü bir yazı tipinden kaynaklayabilmenizi sağlar.

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")
}

Açıklayıcılar

ascent-override

Referans değerin üzerindeki alanı etkileyen artış metriğini özelleştirir.

descent-override

Düşüş metriğini ayarlayarak referans değerin altındaki alanı etkiler.

font-display

İndirme durumuna bağlı olarak yazı tipinin görüntülenme davranışını kontrol eder.

font-family

Yazı tipiyle ilgili özelliklerde kullanılacak yazı tipini adlandırır.

font-stretch

Tek bir değer veya aralık olarak belirtilen, kabul edilebilir yatay ölçeklendirmeyi ayarlar.

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şim 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 boşluğunu 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() ve local() öğelerinin src içinde birleştirilmesi, varsa yerel bir yazı tipi kullanan ve yedek olarak uzak yazı tipi dosyasına geri döndüren yaygın bir stratejidir. Tarayıcılar kaynakları beyan sırasına göre önceliklendirir. Bu nedenle local(), genellikle url() tarihinden önce olmalıdır.

unicode-range

Bu yazı tipinin kullanılması gereken karakterleri sınırlandırır.

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ındaki yazı tipini 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 Yazı Tipi Biçimi 2	font/woff2

@font-face ve font-family arasındaki fark

CSS'de @font-face ve font-family terimleri sıklıkla karıştırılsa da farklı amaçlara hizmet ederler.

Daha önce 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 nereden indireceğini, yükleme sırasında nasıl görüntüleneceğini (font-display özelliği ile) bildirir ve hangi karakter alt kümesinin indirileceğini (unicode-range ile) belirtir.

Buna karşılık font-family, bir öğeye belirli bir yazı tipini veya yazı tipleri listesini atamak için CSS kuralı içinde 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.

Aşağıda, her ikisinin de kullanılmasına ilişkin bir örnek verilmiştir:

<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, "CustomFont"u tanımlar ve tarayıcıya bunu nerede bulacağını söyler. Daha sonra font-family özelliği, bunu gövde öğesine uygular ve "CustomFont" kullanılamazsa yedek olarak GPC'yi kullanır.

Yazı tipini değiştirme

Metninizin yazı tipini değiştirmek için font-family simgesini kullanın.

font-family özelliği, belirli veya genel yazı tipi ailelerine işaret eden dizelerin virgülle ayrılmış listesini 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 (MDN'deki seçeneklerin tam listesini bulabilirsiniz). Tarayıcı, sağlanan listedeki kullanılabilir ilk yazı tipini görüntüler.

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ıyorsanız yedeğinizin eşleşmesi için sans-serif olması gerekir.

İtalik ve eğik yazı tipleri kullanma

Metnin italik olup olmayacağını ayarlamak için font-style aracını kullanın. font-style şu 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 Göreli Ağırlıkların Anlamı bölümüne bakın.

Metnin boyutunu değiştirme

Metin öğelerinizin boyutunu kontrol etmek için font-size aracını kullanın. Bu mülkte uzunluk değerleri, yüzdeler ve birkaç anahtar kelime değeri kabul edilir.

font-size, uzunluk ve yüzde değerlerinin yanı sıra 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ırlar arasındaki boşluğu değiştirme

Bir öğedeki her satırın yüksekliğini belirtmek için line-height değerini 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 aracını kullanın. Bu mülk 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 bir kelime arasındaki boşluğu artırmak veya azaltmak için word-spacing simgesini kullanın. Bu mülk 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 ile word-spacing: normal eşdeğer anlamına gelir.

font stenografi

Yazı tipiyle ilgili birçok özelliği aynı anda ayarlamak için 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 tesislerin nasıl sıralanacağıyla ilgili 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 metninizdeki büyük/küçük harf kullanımını değiştirmek için text-transform kullanın. Bu mülk şu anahtar kelime değerlerini kabul ediyor: uppercase, lowercase ve capitalize.

Metne alt çizgi, üst çizgi ve üst çizgi ekleme

Metninize satır eklemek için text-decoration simgesini kullanın. Altı çizili yazılar en yaygın olarak kullanılır ancak metninizin üzerine veya doğrudan metnin içine satır 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. Ayrıca, birden çok satır için birden çok anahtar kelime de belirtebilirsiniz.

text-decoration-color özelliği, text-decoration-line kaynağındaki 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 özelliği, yukarıdaki tüm tesislerin kısaltılmış halidir.

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şan veya gizli içerikle başa çıkma

Gizli içeriğin nasıl temsil edileceğini belirtmek için text-overflow öğesini kullanın. İki seçenek vardır: Taşma noktasında metni kısaltan clip (varsayılan) ve taşma noktasında üç nokta (...) gösteren ellipsis.

Boşlukları kontrol et

white-space özelliği, bir öğedeki boşluğun nasıl ele alınacağını belirtmek için kullanılır. Daha ayrıntılı bilgi için MDN ile ilgili white-space makalesini inceleyin.

white-space: pre, ASCII çizimi veya dikkatli bir şekilde girintili kod blokları oluştururken yararlı olabilir.

Kelimelerin nasıl kırılacağını kontrol edin

Satırdan taşacak kelimelerin "kırılma" biçimini değiştirmek için word-break simgesini kullanın. Varsayılan olarak, tarayıcı kelimeleri bölmez. word-break için break-all anahtar kelime değerinin kullanılması, tarayıcıya gerekirse kelimeleri ayrı ayrı karakterlere ayırması talimatını verir.

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 blokun sol ve sağ taraflarına hizalar.

Geçerli yazma modunda bir metin satırının başlangıç ve bitiş konumlarını göstermek için start ve end öğelerini kullanın. Bu nedenle start, İngilizcede left ile ve sağdan sola yazılan (RTL) Arapça alfabede right ile eşleşir. Bunlar mantıksal eşleşmelerdir. Mantıksal özellikler modülümüzde daha fazla bilgi edinebilirsiniz.

Metni bloğun ortasına hizalamak için center tuşunu kullanın.

justify değeri, metni düzenler ve kelime aralıklarını otomatik olarak değiştirir. Böylece metin, bloğun hem sol hem de sağ kenarlarıyla hizalanır.

Metnin yönünü değiştirme

Metninizin yönünü ltr (soldan sağa, varsayılan) veya rtl (sağdan sola) olacak şekilde ayarlamak için direction öğesini kullanın. Arapça, İbranice veya Farsça gibi bazı diller sağdan sola yazıldığından direction: rtl kullanılmalıdır. İngilizce ve soldan sağa doğru yazılan diğer tüm diller için direction: ltr kullanın.

Metin 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'dır. Ancak yatay olarak akmasını istediğiniz metinler için writing-mode değerini 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 öğesini kullanın. Bu özellik için geçerli değerler mixed ve upright değerleridir. Bu özellik yalnızca writing-mode, horizontal-tb dışında bir değere ayarlandığında geçerli olur.

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 hakkındaki modülümüzün text-shadow bölümüne göz atın.

Değişken yazı tipleri

Tipik olarak, "normal" yazı tipleri, yazı karakterinin kalın, italik veya sıkıştırılmış gibi farklı sürümleri için farklı dosyaların içe aktarılmasını gerektirir. Değişken yazı tipleri, tek bir dosyada bir yazı karakterinin birçok farklı varyantını içerebilen yazı tipleridir.

Daha ayrıntılı bilgi için Değişken Yazı Tipleri ile ilgili makalemize göz atın.

Sözde öğeler

::first-letter ve ::first-line sözde öğeler

::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 yer aldığı CSS özellikleri font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures ve font-variant-numeric şeklindedir. Kullanımları hakkında daha fazla bilgi edinmek için mülklerdeki bağlantılara göz atın.

Öğrendiklerinizi sınayın

Web'de tipografiyle ilgili bilginizi test edin

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.