Yüksek kaliteli yazı tiplerinden elde edebileceğiniz faydalar

• Yazı tiplerinin gizli özellikleri: değişken eksenler, alternatif glifler, stil alternatifleri, swash’ler, rakamlar, küçük büyük harfler (Small Caps), bağlamsal alternatifler

Değişken eksenler

• OpenType yazı tipleri bir veya daha fazla eksene sahip olabilir ve eksen değerleri değiştirilerek yazı tipinin görünümü değiştirilebilir
• En yaygın eksen wght olup yazı tipinin kalınlığını ayarlar
• Diğer yaygın eksenler arasında wdth (genişlik), slnt (eğim), ital (italik), opsz (optik boyut) bulunur
• Eksenler CSS özellikleri kullanılarak kontrol edilebilir
• font-variation-settings özelliği kalıtım sorunlarına yol açabileceğinden, mümkün olduğunda belirli CSS özelliklerini kullanmak daha iyidir

Alternatif glifler

• Yazı tipleri belirli karakterler için alternatif glifler içerebilir
• Alternatif glifler rakamlar, swash’ler, ligatürler ve çeşitli stiller içerebilir

Stil alternatifleri

• Stil alternatifleri, belirli karakterlerin alternatif biçimlerini etkinleştiren bir özelliktir
• salt, tüm karakterler için stil alternatiflerini etkinleştirir
• ss01, ss02 gibi stil setleri belirli karakter kümelerini değiştirir
• cv01, cv02 gibi karakter varyantları tek bir karakteri değiştirir
• Alternatif glifler, CSS özellikleri font-feature-settings ve font-variant-alternates kullanılarak etkinleştirilebilir

Swash’ler

• Bazı yazı tipleri, başlıklara biraz karakter katmak için kullanılabilecek swash’ler içerir
• Swash’ler, başlıklara karakter kazandırabilen dekoratif öğelerdir
• Swash’ler font-feature-settings ve font-variant-alternates kullanılarak etkinleştirilebilir

Rakamlar

• Yazı tipleri farklı rakam glifi setleri içerebilir
• Rakamlar lining veya old-style, tabular veya proportional olarak ayrılır
• Tabular rakamlar aynı genişliğe sahiptir, proportional rakamların ise genişlikleri farklıdır
• Lining rakamlar büyük harflerle aynı yüksekliğe sahiptir, old-style rakamlar ise küçük harflerle aynı yüksekliğe sahiptir
• İstenen rakam stili font-variant-numeric özelliği kullanılarak ayarlanabilir

Küçük büyük harfler

• Küçük büyük harfler, küçük harflerin yerine geçen büyük harf varyantlarıdır
• Küçük büyük harfler font-variant-caps özelliği kullanılarak etkinleştirilebilir
• Yazı tipinde küçük büyük harfler yoksa tarayıcı bunları sentetik olarak oluşturabilir

Bağlamsal alternatifler

• Bağlamsal alternatifler, çevresindeki karakterlere göre glifleri otomatik olarak değiştiren bir özelliktir
• Örneğin, -> bir oka dönüştürülebilir veya büyük harflerin arasında bulunduğunda @ işaretinin konumu ayarlanabilir
• Bağlamsal alternatifler varsayılan olarak etkindir ve font-variant-ligatures özelliği kullanılarak devre dışı bırakılabilir

GN⁺ özeti

• Yüksek kaliteli yazı tipleri çeşitli özellikler sunar ve bunlardan yararlanmak tipografinin kalitesini büyük ölçüde artırabilir
• OpenType yazı tiplerinin değişken eksen ve alternatif glif özellikleri özellikle kullanışlıdır
• Bağlamsal alternatifler gibi özellikler hem geliştiriciler hem de kullanıcılar için kolaylık sağlar

[halfenif]

Yazı tipi özelliklerini düzgün desteklemenin neden bu kadar zor olduğunu merak ediyorum

Bu, insanlık tarihinin tamamı boyunca var olan bir sorun... yapılacak ne kadar çok şey olabilir ki!

[seunggi]

Yazı tipi işleme zordur

https://faultlore.com/blah/text-hates-you/

[wedding]

ligaturelara bir türlü alışamadım..

[GN⁺]

Hacker News görüşleri

• Sayıların birden fazla satıra yayılıp hizalanması gerektiğinde kullanışlıdır
• Saat veya geri sayım gibi şeyler için de kullanışlıdır
• Ekranda zamanın zıplaması çok sinir bozucudur
• Font dosyalarını incelemek istiyorsanız Wakamai Fondue kullanmanız tavsiye edilir
• Tablo biçimli rakamlar çok kullanışlı bir özelliktir
• Google Fonts, dosya boyutunu küçültmek için gelişmiş OpenType özelliklerinin neredeyse tamamını kaldırır
  • Örnek: Google sürümündeki Inter fontu 11 özellik sunarken, tam sürüm 44 özellik sunar
• Sayfadaki font çok güzel
• Small caps kullanımı hoş duruyor; daha fazla web sitesinde kullanılmasını isterim
• Berkeley Mono v2'nin çıkıp çıkmadığı kontrol edildi, henüz yayımlanmadı
• wght (weight) ekseninin davranışı garip; 400'ün altına kaydırınca metin incelip sıkışıyor, ama 400'ün üstüne kaydırınca metin sadece kalınlaşıyor
• VSCode'da yorumlar, jsdoc'lar ve diğer sözdizimi vurguları için farklı fontlar kullanmak istiyorsanız vscode-custom-css eklentisini kullanmanız gerekir
  • Örnek:

    .mtki {
      font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
      font-style: italic !important;
      color: #757575 !important;
    }
    .comment {
      font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
      font-style: italic !important;
      color: #757575 !important;
    }
    .comment:not(.punctuation) {
      font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
      font-style: italic !important;
      color: #757575 !important;
    }
    

  • VSCode'un font işleme özelliklerinde çok fazla hata var, bu yüzden bol bol deneme yapmak gerekiyor
• Font özelliklerini düzgün desteklemek neden bu kadar zor, merak ediyorum
• Tipografiyle ilgileniyorsanız Butterick's Practical Typography tavsiye edilir
  • Basılı ve dijital belgeleri güzel hale getirmek için pek çok pratik tavsiye içerir
  • Font lisansı oldukça cömerttir; sayfa görüntüleme sayısı konusunda bir sınırlama yoktur
  • Fontları açık kaynak değil, ama çok güzeller
  • Valkyrie ve Concourse fontlarını satın aldım; Concourse, bağlamsal alternatifler konusunda çok esnektir