Metin ve yazı

The CSS Podcast - 036: Text & Typography

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

Web sitesi oluştururken metninize stil vermeniz gerekmez. HTML'de oldukça makul varsayılan stiller bulunur.

Ancak web sitenizin büyük bir bölümünü metinler oluşturur. Bu nedenle, metinlere biraz stil ekleyerek onları daha ilgi çekici hale getirebilirsiniz. Birkaç temel özelliği değiştirerek kullanıcılarınızın okuma deneyimini önemli ölçüde iyileştirebilirsiniz.

Bu modülde, @font-face kuralıyla başlayacağız. Bu kural, özel yazı tiplerini web sayfalarınıza aktarmanıza olanak tanır. Bu sayede, kullanıcı tarafından yüklenen yazı tiplerinden bağımsız olarak ihtiyacınız olan tam tipografiye 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 düzenlemenin temelini oluşturur.

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

Bu CSS tekniklerini anlamanızı ve uygulamanızı kolaylaştırmak için eğitim boyunca pratik örnekler ve ipuçları verilecektir.

@font-face kuralı

@font-face CSS at-rule, web tasarımında önemli bir rol oynar. Metni görüntülemek için özel yazı tiplerini belirtmenize ve kullanmanıza olanak tanır. @font-face'nın güzelliği çok yönlülüğünde yatar: Uzak bir sunucudan veya kullanıcının cihazında yüklü bir yazı tipinden yazı tipleri 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
Çıkış metriğini özelleştirir ve temel çizginin üzerindeki alanı etkiler.
descent-override
İniş metriğini ayarlayarak taban çizgisinin altındaki alanı etkiler.
font-display
Yazı tipinin indirme durumuna bağlı olarak görüntüleme 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
Yazı tipi stilini tanımlar ve eğik stiller için açı aralıklarını destekler.
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 ince ayarlı kontrol sağlar.
line-gap-override
Yazı tipinin varsayılan satır aralığını geçersiz kılar.
size-adjust
Yazı tipi ana hattına ve metriklerine ölçeklendirme faktörü uygular.
src
Yerel veya uzak olmasına bakılmaksızın yazı tipi kaynağını tanımlar. Bu, @font-face kuralı için gereklidir. url() ve local() öğelerini src içinde birleştirmek, varsa yerel bir yazı tipini kullanan ve geri dönüş olarak uzak yazı tipi dosyasına dönen yaygın bir stratejidir. Tarayıcılar, kaynaklara bildirim sırasına göre öncelik verir. Bu nedenle, local() genellikle url() öğesinden önce gelmelidir.
unicode-range
Bu yazı tipinin kullanılacağı karakterleri sınırlar.

Açıklama

@font-face, tasarımcıların özel tipografi kullanmasına olanak tanıyarak onları "web'de 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 Font Format 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 karıştırılır ancak farklı amaçlara hizmet ederler.

Daha önce de bahsettiğ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örüntüleyeceğini (font-display özelliğiyle) ve hangi karakter alt kümesinin indirileceğini (unicode-range ile) belirtir.

Bunun aksine, font-family, bir öğeye belirli bir yazı tipini veya yazı tipi listesini atamak için CSS kuralı içinde kullanılan bir CSS özelliğidir. font-family altında listelenen yazı tipleri, web'de kullanıma uygun yazı tipleri, sistem yazı tipleri veya @font-face ile tanımlanmış özel yazı tipleri olabilir.

Özetlemek gerekirse @font-face bir yazı tipini bildirir ve ona bir ad verir. font-family ise bu bildirilen yazı tipini HTML öğelerine uygular.

İkisinin de kullanıldığı 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, "CustomFont"u tanımlar ve tarayıcıya bunu nerede bulacağını söyler. font-family özelliği, "CustomFont" kullanılamıyorsa Arial'ı yedek olarak kullanarak bu özelliği gövde öğesine uygular.

Yazı karakterini değiştirme

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

font-family özelliği, belirli veya genel yazı tipi ailelerini ifade eden, virgülle ayrılmış bir dizeler listesini kabul eder. Belirli yazı tipi aileleri, "Helvetica", "EB Garamond" veya "Times New Roman" gibi alıntılanmış 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.

font-family kullanırken, kullanıcının tarayıcısında tercih ettiğiniz yazı tipleri yoksa 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 yedek yazı tipiniz sans-serif olmalıdır.

İtalik ve eğik yazı tipleri kullanma

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Metnin italik olup olmayacağını ayarlamak için font-style simgesini kullanın. font-style, şu anahtar kelimelerden birini kabul eder: normal, italic ve oblique.

Metni kalın yapma

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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ı) kabul eder.

normal ve bold anahtar kelimeleri sırasıyla 400 ve 700 sayısal değerlerine eşittir.

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 Meaning of Relative Weights (Göreceli Ağırlıkların Anlamı) başlıklı makalesine bakın.

Metin boyutunu değiştirme

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Metin öğelerinizin boyutunu kontrol etmek için font-size simgesini kullanın. Bu özellik; uzunluk değerlerini, yüzdeleri ve birkaç anahtar kelime değerini kabul eder.

Uzunluk ve yüzde değerlerinin yanı sıra font-size, 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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Bir öğedeki her satırın yüksekliğini belirtmek için line-height özelliğini kullanın. Bu özellik; sayı, uzunluk, yüzde veya normal anahtar kelimesini kabul eder. Genel olarak, devralmayla ilgili sorunları önlemek için uzunluk veya yüzde yerine sayı kullanmanız önerilir.

Karakterler arasındaki boşluğu değiştirme

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Metninizdeki karakterler arasındaki yatay boşluk 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, mektup zarfının boyutunu ve letter-spacing ile nasıl değiştiğini görmek için tek bir harf seçmeyi deneyin.

Kelimeler arasındaki boşluğu değiştirme

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Metninizdeki her kelime arasındaki boşluğun 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 aralığa ek olarak ekstra boşluk için olduğunu unutmayın. Bu, word-spacing: 0 ile word-spacing: normal'nin eşdeğer olduğu anlamına gelir.

font stenografi

Birçok yazı tipiyle ilgili özelliği aynı anda ayarlamak için font kısaltma özelliğini kullanabilirsiniz. Olası özellikler listesi: font-family, font-size, font-stretch, font-style, font-variant, font-weight ve line-height.

Bu özelliklerin nasıl sıralanacağıyla ilgili ayrıntılar için MDN'nin font makalesine göz atın.

## Metnin büyük/küçük harf kullanımını değiştirme

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Temel HTML'yi değiştirmenize gerek kalmadan metninizin büyük/küçük harf kullanımını değiştirmek için [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) özelliğini kullanın. Bu özellik, şu anahtar kelime değerlerini kabul eder: "uppercase", "lowercase" ve "capitalize".

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Metninize satır eklemek için text-decoration simgesini kullanın. En yaygın kullanılan stil altı çizili olsa da metninizin üstüne veya tam ortasına da çizgi ekleyebilirsiniz.

text-decoration özelliği, hemen öncesinde ayrıntılı olarak açıklanan daha spesifik özelliklerin kısaltmasıdır.

text-decoration-line özelliği underline, overline ve line-through anahtar kelimelerini kabul eder. Birden fazla satır için birden fazla anahtar kelime de belirtebilirsiniz.

text-decoration-color özelliği, text-decoration-line öğesindeki tüm süslemelerin rengini ayarlar.

text-decoration-style özelliği 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'den itibaren tüm süslemelerin kontur genişliğini ayarlar.

text-decoration özelliği, önceki tüm özelliklerin kısaltmasıdır.

Metninize girinti ekleme

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Metin bloklarınıza girinti eklemek için text-indent simgesini kullanın. Bu özellik, uzunluk (ör. 10px, 2em) veya kapsayan bloğun genişliğinin yüzdesini alır.

Taşan veya gizli içeriklerle ilgili sorunları giderme

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 7.
  • Safari: 1.3.

Source

Gizli içeriğin nasıl gösterileceğini belirtmek için text-overflow öğesini kullanın. İki seçenek vardır: clip (varsayılan), metni taşma noktasında keser ve ellipsis, taşma noktasında üç nokta (…) gösterir.

Boşluğu kontrol etme

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

white-space özelliği, bir öğedeki boşluğun nasıl işleneceğini belirtmek için kullanılır. Daha fazla bilgi için white-space MDN makalesine göz atın.

white-space: pre, ASCII art oluşturmak veya dikkatlice girintilenmiş kod blokları için yararlı olabilir.

Kelimelerin nasıl bölüneceğini kontrol etme

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 3.

Source

Kelimeler satırı aştığında nasıl "bölüneceğini" değiştirmek için word-break simgesini kullanın. Tarayıcı, varsayılan olarak kelimeleri bölmez. word-break için break-all anahtar kelime değerini kullanmak, gerekirse tarayıcıya kelimeleri tek tek karakterlerden ayırma talimatı verir.

Metin hizalamasını değiştirme

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Bir blok veya tablo hücresi öğesindeki metnin yatay hizalamasını belirtmek için text-align özelliğini 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.

Geçerli yazma modunda bir metin satırının başlangıç ve bitiş konumunu göstermek için start ve end simgelerini kullanın. Bu nedenle, start İngilizcede left, sağdan sola (RTL) yazılan Arapça alfabede ise right ile eşleşir. Bunlar mantıksal hizalamalardır. Mantıksal özellikler modülümüzden 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ıklarını otomatik olarak değiştirerek metnin hem bloğun sol hem de sağ kenarlarıyla hizalanmasını sağlar.

Metnin nasıl kaydırılacağını kontrol etme

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.4.

Source

Bir öğedeki metnin nasıl sarmalandığını değiştirmek için text-wrap simgesini kullanın.

Bu özellik için kabul edilen anahtar kelimeler arasında wrap, nowrap, balance ve stable yer alır. Varsayılan değer wrap'dır. Bu değer, metni normal boşluklar ve kelime sonları boyunca satırlara kaydırarak taşmayı en aza indirir.

Tam tersini elde etmek ve metnin satırlar arasında bölünmesini önlemek için nowrap anahtar kelimesini kullanabilirsiniz. Metnin satırlar arasında bölünmesi taşmaya neden olabilir.

Örneğin, başlık veya başlık yazarken her satırda aynı miktarda metin elde etmek için balance anahtar kelimesini kullanın. Performansı artırmak için tarayıcılar bu değeri yalnızca altı satır veya daha az metin içeren öğelere uygular.

stable anahtar kelimesi wrap ile benzer şekilde çalışır ancak contenteditable metinle birlikte kullanılmak üzere tasarlanmıştır. text-wrap: stable ayarlandığında, düzenlenmekte olan içeriğin üzerindeki satırlar işlem sırasında kaymaz.

Bazen, net bir ayrılma noktası olmayan uzun dizeler kapsayıcıları taşırabilir. Bu tür metinlerin nasıl bölüneceğini kontrol etmek için overflow-wrap kullanın.

Browser Support

  • Chrome: 23.
  • Edge: 18.
  • Firefox: 49.
  • Safari: 7.

Source

Bu özellik için kullanabileceğiniz anahtar kelimeler normal, break-word ve anywhere'dir. Varsayılan ayar normal'dır ve boşluk veya doğal kesme noktaları içermediği sürece metni bir sonraki satıra taşımaz.

anywhere ve break-word değerleri, taşmayı önlemek için dize içinde herhangi bir yere kesme noktaları ekler. Anahtar kelimeler, doğal veya açık bir min-content boyuta nasıl yanıt verdikleri konusunda farklılık gösterir. anywhere anahtar kelimesi, mümkün olan tüm yumuşak ayrılma fırsatlarına izin verir. break-word değeri, metni en uzun kelime kadar uzun yapmaz.

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

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Metninizin yönünü ayarlamak için direction simgesini kullanın. Yönü ltr (soldan sağa, varsayılan) veya rtl (sağdan sola) olarak ayarlayabilirsiniz. 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 yazılan diğer tüm diller için direction: ltr simgesini kullanın.

Metin akışını değiştirme

Browser Support

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41.
  • Safari: 10.1.

Source

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'yi vertical-lr veya vertical-rl olarak da ayarlayabilirsiniz.

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

Browser Support

  • Chrome: 48.
  • Edge: 79.
  • Firefox: 41.
  • Safari: 14.

Source

Metninizdeki karakterlerin yönünü belirtmek için text-orientation simgesini kullanın. Bu özellik için geçerli değerler mixed ve upright'dir. Bu özellik yalnızca writing-mode, horizontal-tb dışında bir değere ayarlandığında geçerlidir.

Metne gölge ekleme

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 1.1.

Source

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

Değişken yazı tipleri

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

Genişlik ve ağırlığın rastgele kombinasyonlarında Roboto Flex

Daha fazla bilgi için değişken yazı tipleriyle ilgili makalemize göz atın.

Sözde öğeler

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

::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 öğesi

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 62.
  • Safari: 1.1.

Source

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

font-variant özelliği, small-caps ve slashed-zero gibi yazı tipi varyantlarını seçmenize olanak tanıyan bir dizi CSS özelliğinin 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ülkteki bağlantıları inceleyin.

Anlayıp anlamadığınızı kontrol etme

Web'deki tipografi bilginizi test edin

Aşağıdaki anahtar kelimelerden hangisi font-family genel yedek olarak kullanılabilir?

serif
Doğru!
monospace
Doğru!
italic
Tekrar deneyin. italic, font-family için değil, font-style için geçerli bir anahtar kelime.
sci-fi
Tekrar deneyin. Ancak fantasy, font-family için geçerli bir genel yedek reklam öğesidir.
sans-serif
Doğru!
helvetica
Tekrar deneyin. "Helvetica" genel bir anahtar kelime değildir, belirli bir yazı tipi ailesini ifade eder.

Her kelimenin ilk harfini büyük harfe dönüştürmek için hangi ifade kullanılır? Örneğin: This is a sentence. ➡ This Is A Sentence.

text-capitalize: true;
Tekrar deneyin.
text-case: capitalize;
Tekrar deneyin.
text-transform: capitalize;
Doğru!
font-style: capitals;
Tekrar deneyin.
font-variant: capitalize;
Tekrar deneyin.

Doğru veya Yanlış: Metni sola, sağa ya da ortaya hizalamak için text-orientation simgesini kullanın.

Doğru
Tekrar deneyin. text-orientation, bir satırdaki harflerin dönüşünü değiştirir.
Yanlış
Doğru! text-orientation, bir satırdaki harflerin dönüşünü değiştirir. Metni sola, sağa veya ortaya hizalamak (ve daha fazlası) için text-align simgesini kullanın.

Metin satırları arasındaki boşluğu değiştirmek için hangi CSS özelliği kullanılabilir?

line-spacing
Tekrar deneyin.
leading
Tekrar deneyin. Satır aralığı, tipografide satırlar arasındaki boşluk için doğru terimdir ancak geçerli bir CSS özelliği değildir.
baseline-distance
Tekrar deneyin.
line-height
Doğru!

Kaynaklar