Tipografi

New Black, insanlar için yazılan her kelimeyi dizer: başlıklar, gövde metni, düğmeler ve gezinme. Geist Mono'nun iki işi vardır: bir makinenin yazdığı ya da geri okuyacağı metni (özetler, yollar, tarihler, sürümler, kod) dizer, bir de sayfayı düzenleyen küçük etiketleri ve notları. Başka hiçbir yazı tipi indirilmez.

Yükleme düzeni.

1. 01

   Bu siteden, Astro üzerinden

   İki aile de bu depodaki dosyalardır ve Astro'nun yazı tipi arayüzüne yerel sağlayıcısıyla kaydedilir. Hiçbir yazı tipi servisinden bir şey çekilmez; içerik güvenlik politikası yalnızca bu sitenin yazı tiplerini kabul eder.

   const nb = (w) => ({ weight: w, style: 'normal', src: [`./src/assets/fonts/NewBlack-${w}.woff2`] });
   const gm = (w) => ({ weight: w, style: 'normal', src: [`./src/assets/fonts/GeistMono-${w}.woff2`] });
   
   fonts: [
     {
       provider: fontProviders.local(),
       name: 'New Black',
       cssVariable: '--font-newblack',
       options: { variants: [nb(400), nb(500), nb(600), nb(700)] },
     },
     {
       provider: fontProviders.local(),
       name: 'Geist Mono',
       cssVariable: '--font-geistmono',
       // Varsayilan yedek sans-serif: uretilen degisken Arial ve sans-serif
       // ile bitiyor, tokenin ui-monospace / monospace yedekleri hic
       // erisilmiyordu. Dosya gelmezse metin yine esit genislikli dizilir.
       fallbacks: ['ui-monospace', 'monospace'],
       // optional: ilk boyamaya yetismeyen dosya sonradan yerine konmaz, bu
       // yuzden Geist Mono duzeni hic kaydiramaz. Olcuye gore uretilen yedek
       // yuz Courier New'u local() ile ister; macOS ve Windows'ta var, Linux
       // ve Android'de yok. Orada ilk ekrani genel monospace yuz dizer, swap
       // ile Geist Mono gelince ana sayfa girisi kayardi: CI'daki mobil
       // Lighthouse denetimi bu kaymayi 0.23 olctu. Iki agirlik da head'de
       // onden yuklenir; dosya normalde ilk boyamaya yetisir.
       display: 'optional',
       options: { variants: [gm(400), gm(500)] },
     },
   ],

2. 02

   Her aileye bir değişken

   Astro her aileyi bir CSS değişkeni olarak sunar, tasarım tokenları da onu sarar; bileşenler aile adını değil, tokenı okur. Astro'nun yazdığı her değişken zaten ölçüsü tutturulmuş yedek yazı tipleri ve genel bir aileyle biter: New Black'te sans-serif, Geist Mono'da ise kaydının istediği gibi ui-monospace ve monospace. Geist Mono sayfa ilk çizildiğinde hazır değilse ya da hiç yüklenemezse, makine metni yine eşit genişlikli bir yazı tipiyle dizilir. Tokenların değişkenden sonra saydığı adlara hiç sıra gelmez.

   --font-sans: var(--font-newblack), system-ui, sans-serif;
   --font-mono: var(--font-geistmono), ui-monospace, SFMono-Regular, monospace;

   Token dosyasının tamamı tokens.css olarak yayımlanır.

3. 03

   Önceden yükleme, bilerek

   New Black 400 ve 700 önceden yüklenir: ilk ekranın gövdesini ve başlığını bunlar dizer. 500 ve 600 ağırlıkları da o ekranda, bağlantılarda ve düğmelerdedir; ama onları 1500 milisaniye geciktirmek düzen kaymasını yalnızca 0,002 değiştirdi, bu yüzden ilk kullanıldıklarında yüklenirler. Geist Mono'nun 400 ve 500 ağırlıkları da önceden yüklenir; böylece sayfa ilk çizildiğinde normalde hazır olurlar. Bunun neden önemli olduğunu bir sonraki adım anlatır.

   <Font cssVariable="--font-newblack" preload={[{ weight: 400 }, { weight: 700 }]} />
   <Font cssVariable="--font-geistmono" preload={[{ weight: 400 }, { weight: 500 }]} />

4. 04

   Dosyalar gelmeden okunur

   Astro iki ailenin her ağırlığı için yerel bir sistem yazı tipinden, gerçek yazı tipinin ölçülerine göre ayarlanmış bir yedek yazı tipi üretir; metin hemen görünür. New Black'in @font-face tanımları font-display: swap kullanır: gerçek dosya gelince yedeğin yerini alır, bunun düzeni ne kadar az kıpırdattığını önceki adımdaki ölçüm gösterir. Geist Mono'nun yedeği Courier New yazı tipini ister; Linux ve Android'de bu yazı tipi yoktur. Orada ilk ekranı genel eşit genişlikli yazı tipi dizdi ve font-display: swap ile Geist Mono'nun gelişi, ana sayfanın mobil Lighthouse denetiminde 0,23 düzen kayması üretti. Bu yüzden Geist Mono'nun tanımları font-display: optional kullanır: sayfa ilk çizildiğinde hazır olmayan dosya sonradan yerine konmaz, o sayfa yedek yazı tipiyle kalır.

New Black'in 400 ve 700 ağırlıkları TTF dosyası olarak da durur. Bunlar yalnızca site derlenirken, her sayfanın paylaşım görselini çizmek için okunur; tarayıcılar onları hiç indirmez. Paylaşım kartları Logo ve ad sayfasında anlatılır.

• Yazı tipleri bu siteden gelir, başka hiçbir yerden değil.

  Nedenİletişim formundaki bot denetimi dışında site başka sunuculardan bir şey yüklemez; başka yerden sunulan bir yazı tipi her sayfaya bir istek eklerdi. Test derlenen her sayfayı ve stil dosyasını okur: hiçbiri bir yazı tipi sunucusuna bağlanmaz, hiçbir @font-face başka bir yeri göstermez ve her içerik güvenlik politikası yazı tipini yalnızca bu siteden kabul eder.

  TestHer değişiklikte bir testle korunur.

• Yayındaki her yazı tipi dosyası makul boyutta gerçek bir WOFF2'dir.

  NedenYarım kalmış ya da hiç kırpılmamış bir dosya tarayıcıda sessizce bozulur. Test, 6 dosyanın hepsinin imzasını ve boyutunu denetler.

  TestHer değişiklikte bir testle korunur.

• Yalnızca New Black 400 ve 700 ile Geist Mono 400 ve 500 önceden yüklenir.

  NedenNew Black dosyaları gövdeyi ve başlığı karşılar. Ailenin diğer ağırlıkları ölçüsü tutturulmuş yedeklerin ardından gelir; onları önceden yüklemek erken bir istek harcar, kıpırtıyı ise neredeyse hiç azaltmaz. Geist Mono font-display: optional kullanır, yani geç kalan dosya o sayfada hiç kullanılmaz; iki ağırlığını da önceden yüklemek onları olağan bir bağlantıda zamanında hazır eder.

  TestHer değişiklikte bir testle korunur.

• Bileşenler aileyi değil, tokenı adlandırır.

  NedenBileşen stilleri iki yazı tipi tokenını okur; yazı tipini değiştirmek tek bir düzenlemedir. Aile adları yalnızca yazı tiplerinin kaydedildiği yerde ve paylaşım görsellerini çizen kodda geçer. Test, sitenin stil bloklarındaki her font-family bildirimini ve her font kısaltmasını okur.

  TestHer değişiklikte bir testle korunur.

New Black 400, 500, 600 ve 700, Geist Mono 400 ve 500 ağırlıklarıyla gelir. Her ağırlığın sitede bir işi vardır. Aşağıdaki satırlar bu sitedeki cümlelerdir ve sitenin onlar için kullandığı ağırlıkla dizilmiştir.

Vurgu

İki ailenin de italiği yoktur. Uzun metindeki kalın vurguyu site biçimlemez: tarayıcı onu bir kademe kalın dizer, New Black de bunu 700 ağırlıkla çizer. İçe aktarılan bazı araştırma makalelerinde hâlâ italik var; italik dosyası olmadığı için tarayıcı New Black'i kendisi eğer. Bu eğim şimdilik kabul edilir; onu isteyen ya da yasaklayan bir kural yoktur.

Yazı boyutları token değildir. Her bileşen boyutunu, satır yüksekliğini ve harf aralığını yalnız o bileşene uygulanan stil bloğunda yazar. Başlıca roller aşağıdadır ve o bloklardan kopyalanmıştır; buradaki bir değer dosyasıyla uyuşmadığı anda bir birim testi başarısız olur. Rozetlerden diyagram içi yazılara kadar daha küçük etiketler bu ölçeğin altında kalır ve burada listelenmez.

Akışkan başlıklar

Başlıklar clamp() ile pencereyle birlikte büyür: en küçük bir boyut, görüntü alanı genişliğinden bir pay ve en büyük bir boyut. Tablo, her birinin hangi pencere genişliğinde büyümeye başladığını ve hangisinde durduğunu verir.

Telefonda ana sayfa girişi kendi küçük boyutlarını kullanır. max-width: 600px geçerliyken başlığı, clamp() alt sınırının da altında, 36px; giriş metni 16px olur; böylece metin sabitlenen ilk ekrana sığar. max-height: 700px de geçerliyse ikisi 32px ve 15px olur.

Boyut, belge yapısını izler.

Her sayfanın tek bir h1 başlığı vardır; açılış bölümünün ya da yerleşimin en üstünde durur. Bölümler h2 ile açılır, h3 ile bölünür. Görsel boyut seviyeyle birlikte küçülür; daha küçük görünsün diye hiçbir seviye atlanmaz.

• Bu ölçekteki her değer kaynak dosyasıyla aynıdır.

  Nedenİşaret edilecek bir yazı tokenı yok; bu yüzden ölçek bileşenleri gösterir. Bir bileşen değişirse bu sayfa da değişene kadar test başarısız olur.

  TestHer değişiklikte bir testle korunur.

• Ana içerikte başlık seviyeleri atlanmaz.

  NedenAtlanan bir seviye, ekran okuyucu kullanıcılarının gezindiği belge yapısını bozar. Örneğin bir h2 başlığının ardından h4 gelen her sayfada derleme başarısız olur.

  TestHer değişiklikte bir testle korunur.

• Bir şey söyleyen başlıklar cümledir ve yalnız ilk harfi büyüktür.

  NedenBöyle bir başlık bir şey söyler ve noktayla biter. Araştırma makaleleri ve yasal metinler kendi başlıklarını korur; öğe başlıkları ve etiketler nokta almaz.

  İncelemeBir testle değil, incelemeyle korunur.

New Black sıkı dizilir ve büyüdükçe daha da sıkılaşır. Geist Mono hiç sıkılaştırılmaz; büyük harfle dizildiğinde açılır. Web sayfalarında büyük harf ve açık harf aralığı yalnızca Geist Mono'ya aittir.

• Ölçekte boyut büyüdükçe harf aralığı daralır.

  NedenBüyük harfler varsayılan aralıkla gevşek görünür; boyut büyüdükçe aralık daha çok daraltılır. Test yukarıdaki her New Black rolünü okur ve daha büyük bir rol daha küçüğünden gevşek dizilmişse başarısız olur.

  TestHer değişiklikte bir testle korunur.

• Web sayfalarında büyük harf ve açık harf aralığı yalnızca Geist Mono'da görünür.

  NedenBüyük harfli etiketler 11px boyutta okunaklı kalmak için açık aralık ister ve etiketler Geist Mono ile dizilir. New Black yalnız ilk harfi büyük cümlelerde, sıfır ya da eksi aralıkla kalır. Derlemede çizilen paylaşım görselleri istisnadır: yalnızca New Black yüklerler ve üst başlıklarını onunla, büyük harfle, 0.08em aralıkla dizerler.

  TestHer değişiklikte bir testle korunur.

• Büyük harfi metin değil, CSS yapar.

  NedenSözlükler etiketleri normal yazımla tutar, text-transform onları büyütür; böylece tarayıcı bildirilen dilin büyük harf kurallarını uygular.

  İncelemeBir testle değil, incelemeyle korunur.

Geist Mono, bir makinenin yazdığı ya da geri okuyacağı metni işaretler: bir özet, bir yol, bir tarih, bir sürüm, bir satır kod. İçindeki her karakter aynı genişliktedir; değerler sütunda hizalanır, uzun bir dizi tek parça okunur. Sayfayı düzenleyen küçük etiketleri ve notları da o dizer.

Rakamlar

New Black orantılı rakam çizer: her rakam, biçiminin gerektirdiği kadar geniştir; bu yüzden bir sütundaki rakamlar hizalanmaz. Geist Mono her rakama aynı genişliği verir. Değerlerin sütun sütun hizalanması gereken yerlerde, örneğin bu sayfadaki tabloların sayı sütunlarında ve yasal metinler dizininde, site onları Geist Mono ile dizer.

• Satır içi makine dizileri her yerden kırılabilir; kod blokları kayar.

  NedenBir özetin ya da yolun kırılacak boşluğu yoktur; bu yüzden uzun metindeki satır içi kod overflow-wrap: anywhere kullanır. Kod bloğu satırlarını bölmez ve kendi kutusunun içinde kayar.

  TestHer değişiklikte bir testle korunur.

• Mono değer ve etiket taşır, vurgu değil.

  NedenGeist Mono makine metnini ve sayfayı düzenleyen küçük etiketleri ve notları dizer. Ağırlık taşıması istenen bir cümle New Black ile dizilir; teknik görünsün diye mono dizmek bir bilgi eklemeden gürültü ekler.

  İncelemeBir testle değil, incelemeyle korunur.

Satır uzunluğu ch ile, yani o yazı tipindeki sıfır rakamının genişliğiyle yazılır. Başlıklar dengeli satırlara bölünsün diye kısa tutulur; uzun metin 68ch genişlikte durur.

New Black'te sıfır geniştir: 400 ağırlıkta 0,64 em, 700 ağırlıkta 0,644 em; Geist Mono'da 0,6 em, ortalama bir küçük harfte ise 0,546 em. Yani New Black'te bir ch tipik bir harften geniştir: 16.5px metinle 68ch genişliğinde bir sütun yaklaşık 718 piksel tutar ve ortalama genişlikte yaklaşık 80 küçük harf alır.

Dengeli başlıklar

Başlık kuralları text-wrap: balance kullanır; tarayıcı son satıra tek bir kelime bırakmak yerine satırları eşitler. Okuma metni normal kırılır: dengeleme birkaç satır içindir, paragraf için değil.

• Uzun metin 68ch genişlikte durur.

  NedenUzun satırlarda göz bir sonraki satırın başını kaybeder. New Black'te bir ch harflerinden geniştir; 16.5px metinle 68ch genişliğinde bir satır, ortalama genişlikte yaklaşık 80 küçük harf alır. Araştırma makaleleri ve yasal metinler aynı sütunu paylaşır.

  TestHer değişiklikte bir testle korunur.

• Başlıklar satırlarını dengeler; tek istisna kart başlıklarıdır.

  NedenEşit bir biçim tek bir ifade gibi okunur; sonda tek başına kalan kelime bir kaza gibi. Test ölçekteki her başlık rolünü sayar; dengelemeyen ve istisna olarak adı geçmeyen bir rol varsa başarısız olur.

  TestHer değişiklikte bir testle korunur.

• Metin tam bir kutuya sığmak zorundaysa kutunun ölçüsünü piksel olarak verin.

  NedenNew Black'te bir ch geniş bir sıfırdır. Ana sayfadaki bir açıklama kutusunun ölçüsü bir zamanlar ch ile verilmişti ve içinde durduğu çerçeveden taştı; artık piksel olarak verilir.

  İncelemeBir testle değil, incelemeyle korunur.

Site İngilizce ve Türkçe olarak elle yazılır; Türkçesi aynı adreslerde, /tr altındadır. Tipografi iki dilde de doğru durmalı: her sayfa dilini bildirir, Türkçe ana sayfada İngilizce kalan ifadeler de İngilizce diye işaretlenir; böylece tarayıcı doğru büyük harf kuralını, ekran okuyucu doğru sesi kullanır.

Dil nerede bildirilir.

• Her sayfa dilini html öğesinde bildirir.

  Nedenİngilizce sayfalar sitenin kökünde lang="en", Türkçe sayfalar /tr adresinde ve altında lang="tr" taşır. Test derlenen her sayfayı okur.

  TestHer değişiklikte bir testle korunur.

• Türkçe sayfalarda İngilizce kalan slogan ve çerçeve adları lang="en" taşır.

  NedenAna sayfadaki slogan, güven şeridindeki çerçeve adları ve güven ile çözüm sayfalarındaki listelerde İngilizce biçimini koruyan çerçeve adları İngilizce kalır. İşaretlemek, büyük harflerini ve okunuşlarını İngilizce tutar. Türkçe biçimi olan çerçeve adları Türkçe yazılır ve işaret almaz.

  TestHer değişiklikte bir testle korunur.

• Araştırma makaleleri İngilizce kalır; Türkçe liste bunu söyler.

  NedenTürkçe bir adreste sayfa çerçevesi Türkçedir, makale gövdesi ise lang="en" taşıyan bir article öğesindedir. Kategori, tarih, içindekiler başlığı ve makalenin altındaki bağlantılar Türkçe kalır ve lang="tr" taşır; kategori bu yüzden Türkçe kurala göre büyütülür. Türkçe listedeki her yazının yanında dilini söyleyen bir rozet durur.

  TestHer değişiklikte bir testle korunur.

• İngilizce adresteki Türkçe belge Türkçe olduğunu söyler.

  NedenBir yasal metnin İngilizcesi yazılana kadar İngilizce adres, Türkçe gövdeyi lang="tr" ile ve üstünde bir notla gösterir. Belge bilgileri, notlar ve dizine dönüş bağlantısı İngilizce kalır ve lang="en" taşır.

  TestHer değişiklikte bir testle korunur.

Yazı tiplerinin kapsadığı harfler

New Black dosyaları, Türkçenin her harfini içeren bir alt kümeye kırpılmıştır. Birkaç işaret dışarıda kalır: bu sayfa onları çizmek yerine adlarıyla anar, sitenin onlardan birini kullandığı yerde (örneğin iki rakam arasındaki ok) ise tarayıcı onu bir sistem yazı tipinden çizer. Tablo, sayfa derlenirken yayındaki dosyalardan okunur.

Uzun tire sitede zaten hiç kullanılmaz: bir test onu site sözlüklerinde, bir derleme kapısı da derlenen her sayfada reddeder.

• New Black alt kümesi Türkçenin her harfini kapsar.

  NedenTürkçe metin bir kelimenin ortasında başka bir yazı tipine düşmemeli. Test, yayındaki her ağırlığın karakter haritasını okur.

  TestHer değişiklikte bir testle korunur.

Rakamlar ve tarihler

Metindeki rakamlar her sözlükte, o dilin yazım alışkanlığıyla elle yazılır. Araştırma tarihleri site derlenirken en-GB ve tr-TR yerel ayarlarıyla biçimlenir: ikisinde de önce gün gelir; İngilizcede eğik çizgi, Türkçede nokta kullanılır. Yasal belge sürümleri ve bu sayfalardaki Son değişiklik satırı ise ISO 8601 ile, önce yıl gelecek biçimde yazılır.

Arayüz sakin bir üslupla konuşur. Sitenin iki yazı tipinden yalnızca birini, makine metni için Geist Mono yazı tipini paylaşır. Kodunun gösterdiği şudur.

Yazı tipi ve dört rol ürünün kaynak kodundan bir anlık görüntüye okunur; bu anlık görüntü product-tokens.json olarak yayımlanır. Sayfa başlığı, kullanılan ağırlıklar, tablo rakamları ve sözleşme testi ürün kodunda elle denetlenir.