CSS font-family önerileri

 (chrismorgan.info)
1 puan yazan GN⁺ 12 시간 전 | 1 yorum | WhatsApp'ta paylaş
  • Web’de belirli bir font adına güvenerek tasarım yaparsanız, platform, ağ ve güvenlik ayarlarına bağlı olarak bozulabilir; bu yüzden font-family genel aile fallback varsayımıyla kurgulanmalı
  • Sabit genişlikli gösterim gerektiren kod, artwork ve düzenlerde monospace mutlaka yer almalı; serif ve sans-serif için de istenen aileyi garantiye almak istiyorsanız birlikte belirtmek daha güvenlidir
  • Yerelde bulunması muhtemel fontları uzun uzun sıralayan stack’ler çoğu zaman pek fayda sağlamaz; tarayıcının genel aile varsayılanları daha iyi bir seçim yapabilir
  • Web fontları, hiç web fontu olmamasına göre daha yavaştır ve yükleme hataları ile font-display ödünleşimleri yaratır; bu yüzden içerikte kullanıcının varsayılan fontunu olduğu gibi kullanmak da gerçekçi bir tercihtir
  • system-ui ve ui-*, kısa UI metinlerine yönelik olma eğilimindedir; uzun içerik ve dil desteğiyle uyumlu olmayabilir, bu yüzden içerik için varsayılan font alternatifi olarak kullanmak risklidir

Font adlarına güvenmeyin

  • Tüm büyük platformlarda ortak olarak sunulan web-safe font yoktur; bu nedenle belirli bir font adının her zaman çalışacağını varsaymamak gerekir
  • Web fontları da kesin bir çözüm değildir
    • Inline edilmeyen alt kaynaklar çeşitli ağ nedenleriyle yüklenemeyebilir
    • Font yükleme, güvenlik kaygıları olan bir alandır; bazı ortamlarda engellenebilir
    • uBlock Origin’de uzak fontları devre dışı bırakmak için özel bir düğme vardır
    • Bazı tarayıcıların veri tasarrufu modu font yüklemeyi engelleyebilir; engellemediği durumlarda da engellemesi gerektiği görüşü vardır
  • Kullanıcı web sitesinin kendi font seçimine izin vermezse yalnızca genel aileler çalışır
  • JavaScript’te document.fonts.load("1em my-web-font") kullanılırsa dönen Promise reject olabilir
    • 2020–2025 arasındaki 6 yılda bu yüzden bozulan yaklaşık 4 örnek gördüm; bunlardan 2’si 2025’te yaşandı

Yedek aileyi mutlaka belirtin

  • Sabit genişlikli metin gerekiyorsa font-family içinde mutlaka monospace bulunmalı
    • monospace eksikliği birçok kullanıcıya görünmez, ancak bazı ortamlarda düzeni veya eserin niyetini bozabilir
    • Örneğin Adel Faure’un ASCII might fly? çalışmasında, yazıldığı sırada monospace eksikti ve sabit genişlikli olmayan bir biçimde görünebilir
  • İstenen font ailesi için fallback gerekiyorsa serif veya sans-serif de eklemek iyi olur
    • Örnek: font-family: Arial, sans-serif;
    • Örnek: font-family: Times New Roman, serif;
    • Eklenmezse varsayılan font kullanılır; varsayılan font serif olabilir ama tamamen başka bir şey de olabilir

Kurulu olması muhtemel font listelerini azaltın

  • Arial, Helvetica, Helvetica Neue, Liberation Sans, Noto Sans gibi sistemde bulunması muhtemel fontları uzun uzun listelemek genelde yardımcı olmaz
  • Özellikle Arial’ın sans-seriften daha iyi bir seçim olacağı bir durum olmadığını düşünüyorum
  • sans-serif, belirtilen fontlardan daha kötü olmayan bir font olarak yorumlanabilir; hatta daha iyi bir fontun seçilme ihtimali de vardır
  • Gerçekte gördüğüm bir sabit genişlik bildirimi örneği aşırı uzun bir listedir
    • font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif
    • Bu bildirim, font-family: monospace, monospaceten kesin olarak daha kötüdür; monospace, bu listedekilerden daha kötü olmayan bir font olarak yorumlanabilir
  • Adı verilmiş web dışı fontları tamamen yasaklamak gerekmez, ancak en fazla bir tane uygun olur
    • Georgia) ve Times New Roman, ikisi de Microsoft’un Core fonts for the Web paketindeki serif fontlardır, ancak karakterleri farklıdır
    • Georgia, Times New Roman’dan çok daha geniştir; stil açısından bu özellik gerekiyorsa font-family: Georgia, serif kabul edilebilir bir tercihtir
  • modernfontstacks.com ve deposu, platforma göre font seçimi fikirleri içerir
    • Ancak adlandırılmış fontları fazlasıyla reçete eder; birçoğunun kaldırılmasının daha iyi olacağı değerlendiriliyor
    • Courier New işlemesi ciddi biçimde yanlıştır ve görüntüler macOS Courier ile oluşturulmuş gibi görünür

Yalnızca genel aileleri kullanma tercihi

  • Yerel kurulu font listelerini azalttıysanız, web fontunun gerçekten gerekli olup olmadığını yeniden değerlendirebilirsiniz
  • Web fontları, web fontu olmamasına göre daha yavaştır ve yükleme sorunları yaratabilir
    • Bu nedenle font-display vardır
    • Ancak block/swap süreleri, yeniden çizim ve reflow arasındaki ödünleşimlerle uğraşmak yerine kullanıcının sahip olduğu fontu olduğu gibi kullanmak da mümkündür
  • monospace için de yalnızca genel aileyi kullanma tercihi mümkündür
    • Geçmişte monospace varsayılanı iyi değildi; özellikle Microsoft’un Courier New#Courier_New) fontu hatalı dijitalleştirildiği için 400 değil, fiilen 200–250 weight gibi görünüyordu
    • Daha sonra Apple Menlo)yu tanıttı; tarayıcıların varsayılan monospace değerlerinin güncellenmediği dönemde insanlar font stack’lerine Menlo eklemeye başladı
    • Günümüzde tarayıcı varsayılanlarının hepsi daha iyi hale geldi; her durumda harika olmasalar da artık kötü değiller
  • Menlo, Monaco, Consolas, Bitstream Vera Sans Mono, Courier, Courier New gibi listeleri bırakıp yalnızca monospace bırakmayı tercih edebilirsiniz
  • Courier New’ü bilinçli olarak font stack’ine koymak güçlü biçimde olumsuz değerlendiriliyor

monospace, monospace ve tarayıcı davranışı

  • font-family: monospace; açık veya örtük biçimde kullanılırsa font-size varsayılan olarak 100% değil, muhtemelen 81.25% ayarlanabilir
    • Kullanıcılar genel aile fontunu, varsayılan yazı boyutunu ve varsayılan sabit genişlikli yazı boyutunu değiştirebilir
  • Listede ikinci bir family varsa bu davranış gerçekleşmez
    • font-family: my-web-font, monospace; uygundur
    • font-family: monospace, monospace; de uygundur
    • Doğrudan font-size belirtmek de mümkündür
  • Lightning CSS’in monospace, monospacei bozan bir sorunu var
  • Bu sorun yalnızca monospacei etkiler
  • Tarayıcıların monospace boyutu davranışını bırakmaya ve muhtemelen 13px olan değeri muhtemelen 16px’e çıkarmaya ikna edilmesi gerektiği görüşü var
    • Öneri yeri CSSWG olabilir

İçerikte system-ui ve ui-* kullanmayın

  • UI fontları uzun içerik için değil, kısa UI metinleri içindir
  • UI fontları içerik dilini iyi desteklemeyebilir
  • Bazı kullanıcılar kasıtlı olarak gülünç sistem UI fontları seçmiş olabilir; bunun bazı Android topluluklarında oldukça yaygın olduğu söyleniyor
    • system-ui kullanılırsa içeriğin de öyle görünebileceği endişesi var
  • w3c/csswg-drafts issue #3658, system-uinin çeşitli sorunlarını tartıştı ve system-uinin yaygın biçimde kötüye kullanıldığı sonucunu içeriyor
  • mdn/content issue #41244, MDN’e aşırı kullanıma karşı uyarı veren bir note ekledi
  • system-ui ve ui-*, daha iyi varsayılan font elde etmek için proxy gibi kullanılageldi; ancak bu kullanım iyi değildir
  • system-uinin bir hata olduğu görüşü var
    • Yalnızca -apple-system bırakılmalı ve BlinkMacSystemFontun ona dönüşmesi sağlanmalıydı görüşü var
    • Standartlaştırma sırasında diğer platformlarda yararlı bir eşdeğer kavram yoktu; bugün bazı platformlarda ortaya çıktığı düşünülüyor
    • Mevcut genel ailelerin eskimiş varsayılanlarını tarayıcıların güncellememesi sorununu aşmak için çoğunlukla kötüye kullanıldığı düşünülüyor
  • ui-serif, ui-sans-serif, ui-monospace ve özellikle ui-roundedın kaldırılması gereken açık hatalar olduğu görüşü var
    • Apple dışı ortamlarda herhangi bir fonta eşlenmesi beklenmez
    • Kavramın kendisi yalnızca Apple platformlarında bulunduğu için standarda dahil edilmemeliydi
    • Apple sağlamış olsaydı -apple-system gibi -apple önekli bir biçimde olmalıydı görüşü var
  • Web uygulamalarında system-ui için meşru kullanım örnekleri vardır, ancak gerçekte neredeyse tamamen kötüye kullanıldığı izlenimi var; kaldırmaya yönelik müdahale de kötü olmayabilir

İlgili okumalar

1 yorum

 
GN⁺ 12 시간 전
Lobste.rs yorumları

  • https://lindenii.org, font-family’yi hiç belirtmeme yaklaşımını seçerek kullanıcının tarayıcıda belirlediği varsayılan yazı tipine saygı duyuyor.
    Ben şahsen sans-serif tercih ediyorum ama kullanıcı serif’i varsayılan olarak kullanıyorsa bunu özellikle ezmenin bir nedeni yok gibi görünüyor.
    Ancak https://runxiyu.org/soc/ta/ örneğinde olduğu gibi çoğu yazı tipinde bulunmayan karakterleri kullanmak gerektiğinde web font eklemekten başka çare kalmamış ve bunun sonucu olarak metnin geri kalanı da kullanıcının varsayılanı yerine sans-serif’e zorlanmış.
    Tuhaf karakterlerin her birini <unusual-character> gibi bir şeyle sarmalamadıkça daha iyi bir yöntem var mı bilmiyorum; ayrıca “kullanıcının tercih ettiği kod yazı tipi” gibi bir şeyi belirtmenin bir yolu da olsa iyi olurdu.
    monospace, monospace hilesi hoşuma gitti; boyut farkı gerçekten epey kafa karıştırıcıymış.

    • İkinci sorun için, sıra dışı karakterin yanına görsel yedek gösterim koymak makul bir fallback olabilir.
      Unicode karakter listesi siteleri bunu bu şekilde yapıyor.
    • Ben de blogumda, https://hauleth.dev üzerinde benzer bir şey yapıyorum ama monospace kullanıyorum.
      Site tasarımı için övgü aldığım oldu ama aslında yaptığım şey bir Zola temasını alıp CSS ve özel öğeleri azaltmaktan ibaret; özellikle kişisel sayfalar için yazının ana fikrine oldukça katılıyorum.
    • Hiç font-family belirtmeme tarafında olan biri olarak, tarayıcının varsayılan varsayılan yazı tipinin serif’ten sans-serif’e değişmesinin kullanıcı için daha iyi olabileceğini düşünüyorum.
      Kullanıcıların büyük çoğunluğu yazı tipini kendisi seçmiyor; dolayısıyla “kullanıcının seçtiği yazı tipi” ile “tarayıcının varsayılan yazı tipi”ni ayırmanın bir yolu yok.
      Serif sevsem de bugün çoğu kişinin sans-serif’i tercih etme ihtimali daha yüksek.
      Kendi ortamımda sayfaların yazı tipi belirtmesini engelledim ve düzgün CJK yazı tipleri de kurmadım.
      Çünkü Çince karakterler yerine “4E2D” gibi kutular görünse bile, o ideografın kendisi kadar bana anlamsız geliyor diye düşündüm.
      Bu tür fallback font işleyişi iyi yapılmış ama ne yazık ki varsayılan yazı tipinin adını doğrudan belirtmenin bir yolu yok.
      Bunun yerine JavaScript ile boş bir belgede getComputedStyle(document.documentElement).fontFamily sonucuna bakarsanız, gelişmiş yazı tipi ayarlarıma bağlı olarak "serif" veya "sans-serif" çıktığını görürsünüz.
      “Kod için tercih edilen yazı tipi”nden tam olarak ne kastedildiğini bilmiyorum; anladığım kadarıyla monospace dışında bir şey düşünülüyor.

  • Bu yazı hâlâ taslak olduğu için oldukça eksik ve iki üç farklı biçimdeki parça birbirine karışmış durumda; bu yüzden biraz dağınık.
    Muhtemelen sonunda bir sayfadan uzun olacak, şu ankinden oldukça farklı bir şekle bürünecek ve bazı bölümleri el yazısı, el çizimi ya da elle yerleştirilmiş düzen olabilir.
    Şu sıralar bunun yerine hafif bir markup dili implementasyonuna odaklanıyorum; artık neredeyse kullanılabilir durumda, son %90 bir türlü bitmiyormuş gibi geliyor.
    Sonra yeniden yazıp yayımlamayı planlıyorum.

  • font-family: monospace; kullanıldığında font-size varsayılan olarak %100 yerine %81.25 olabiliyormuş; ama listede ikinci bir yazı tipi varsa bunun olmaması gerçekten çok ilginç.
    Yani font-family: my-web-font, monospace; ya da font-family: monospace, monospace; sorun çıkarmıyor; fakat MDN’de bunun şu anda belgelenmediği anlaşılıyor.
    Bunun neden olduğunu ve neden belgelenmediğini açıklayabilecek biri var mı merak ediyorum.

    • Hatırladığım kadarıyla Firefox bu yazı tipi boyutu ayarlamasını aslında yapmıyor ama Chrome yapıyor.
      Bu yüzden tarayıcılar arası tutarsızlığın nedenlerinden biri de bu.
    • Muhtemelen amaç, monospace metnin gövde metniyle görsel olarak aynı boyutta görünmesini sağlamaktı.

  • Taslak olduğu söylenmiş olsa da, yazının içinde bir bölümün ikinci kez aynen kopyalanıp yapıştırılmış gibi duran garip bir tekrar var.
    Özellikle de sevdiğim monospace yazı tipinin pek iyi olmadığı ima edildiği için daha da rahatsız edici geldi.

    • Yapıyı yeniden düzenleme sürecinde olduğum için bu tür şeyler kaldı.
      Dikkatli okunursa, kesin öneri olarak bırakılacak şeylerle daha nüanslı ele alınması gereken noktaları ayırmaya çalıştığım için hafif çelişkiler de var.
      Sevdiğiniz monospace yazı tipinin hangisi olduğunu merak ettim.

  • Sadece serif ve sans-serif kullanmaktan kaçınmanın nedenlerinden biri, varsayılan serif yazı tipinin çoğu zaman pek hoş bulunmayan Times olması.
    Bu yüzden gövde yazı tipini serif’ten sans-serif’e taşıyorum.

  • “Sistemde kurulu olabilecek yazı tiplerini listelemeyin” ve “monospace için de mümkünse yalnızca genel aileyi kullanın” tavsiyeleriyle ilgili olarak, kendi web sitemde bunu şöyle ayarladım:
    --sans-serif: Adwaita Sans, Adwaita Sans Bundled, Inter, sans-serif; ve --monospace: Iosevka, Iosevka Web, Cascadia Code, monospace; kullanıyorum.
    Amaç şu: GNOME’da Adwaita Sans kuruluysa sistem yazı tipi kullanılsın ve web font indirilmesin; yoksa Adwaita Sans Bundled web fontu kullanılsın ve yüklenirken metrikleri benzer olan Inter ile sans-serif fallback olsun.
    Monospace tarafında da aynı şekilde, sistemde Iosevka varsa o kullanılsın; yoksa Iosevka Web web fontu kullanılsın; yükleme sırasında ise Cascadia Code ve monospace fallback olsun.
    Windows’taki monospacein Consolas olması ve bunun pek iyi olmaması, ayrıca yeni Windows sürümlerinde Cascadia Code’un kurulu gelmesi de hesaba katıldı.
    Cascadia Code’un metriklerinin Iosevka’dan epey farklı olmasının iyi bir şey olmadığını biliyorum ama bu yaklaşım hakkında ne düşünüyorsunuz?

    • Web programlama bilgim çok az; belki de “yalnızca sistemde kurulu değilse yazı tipini indir” davranışını tanımlamanın daha iyi bir yolunu gözden kaçırıyorumdur.

  • Derli toplu bir yazı; monospace, monospace hilesini hiç bilmiyordum.
    Küçük bir biçimlendirme sorunu olarak, benim tarayıcımda .unimportant paragrafının metni sarı arka planın önünde ama sabit .status çubuğunun metninin arkasında kalıyor; bu yüzden .unimportant bölümünün üzerinden kaydırınca tuhaf görünüyor.
    Diyagonal DRAFT filigranında da benzer bir durum var gibi görünüyor.