The Proportional Web — orantılı genişlikli tipografi için bir web stil sayfası

• The Proportional Web, Robert Bringhurst’ün The Elements of Typographic Style adlı eserinden bazı ilkeleri alıp tarayıcıya uygulayan bir tasarım; The Monospace Web’in orantılı genişlikli devamı ve yeniden kullanılabilir bir stil sayfasıdır
• Gövde metninde Alegreya ve Alegreya SC, kodda ise Courier Prime kullanır; 16px kök yazı tipi ve rem, 1.2rem satır yüksekliği temelinde boyutları ve dikey ritmi tutarlı biçimde hizalar
• Modern tarayıcıların word-break, text-wrap, hyphens özelliklerini kullanarak iki yana yaslama uygular; ancak sözcük aralıkları ya da boşluk nehirleri kötü görünüyorsa text-align: left kullanılmasını önerir
• Anlamsal HTML5’i merkeze alarak başlıkları, alıntıları, görselleri, tabloları ve kod bloklarını stillendirir; geniş ekranlardaki kenar notları sağ kenar boşluğuna yerleştirilir, küçük ekranlarda ise süslemeli satır içi paragraflara dönüşür
• Kitap, dergi, blog, kılavuz ve wiki gibi düzyazı odaklı belgeler için uygundur; dinamik web uygulamaları için önerilmez; GitHub kaynağı indirilip CSS ve JavaScript eklenerek ya da Pandoc ile birlikte kullanılabilir

---

The Monospace Web’den orantılı genişliğe

• The Monospace Web, kişisel bloglar ve uygulama arayüzlerinde benimsenecek kadar beklenenden daha geniş bir yayılım kazandı
• The Proportional Web, bu projenin ruhani devamı olarak; sabit genişlik yerine orantılı genişlikli yazı tipleri kullanırken özgürce yeniden kullanılabilecek şekilde tasarlandı
• Robert Bringhurst’ün The Elements of Typographic Style kitabını okuduktan sonra, kitaptaki düzeni ve tipografiyi tarayıcıda uygulama çalışmasıyla başladı
• Baskıdan farklı olarak web’de sabit bir sayfa boyutu yoktur ve aynı zamanda programlanabilir bir platform olması nedeniyle aynı kuralları olduğu gibi uygulamak zordur
  • Bunun yerine yararlı ya da estetik bulunduğu düşünülen öğeler seçilip kullanılabilsin diye yayımlandı
• HTML üretiminde Pandoc kullanıldı, ancak stil sayfası az bir değişiklikle başka ortamlarda da çalışabilir

Yazı tipi sistemi

• Birden çok yazı tipini karıştırmak yerine tek bir çok amaçlı yazı tipi seçme yönündeki Bringhurst ilkesi, tasarımın temeli olarak benimsendi
• Alegreya ailesi kullanım amacına göre ayrıldı
  • Alegreya Regular, gövde metnine ve üçüncü seviye başlıklara uygulanır
  • Alegreya SC, başlık biçimindeki büyük harfli birinci seviye başlıklarda, küçük büyük harflerle gösterilen ikinci seviye başlıklarda ve HTML gibi satır içi kısaltmalarda kullanılır
• Sabit genişlikli kod parçalarında Courier Prime kullanılır

Göreli birimler ve dikey ritim

• Tüm boyutlar, 16px kök yazı tipi boyutu temel alınarak rem birimiyle tanımlanır
• Standart boyutlar 0.75·0.875·1·1.125·1.25·1.375·1.5·2·2.5·3·4rem’dir; bunlar sırasıyla 12·14·16·18·20·22·24·32·40·48·64px’e karşılık gelir
• Yalnızca kök yazı tipi boyutu değiştirilerek tüm tasarım birlikte büyütülüp küçültülebilir
  • Örneğin ekran genişliği 480px ya da altındayken :root içindeki font-size 14px’e değiştirilebilir
• Satır yüksekliği 1.2rem’dir ve tüm öğelerin dikey hizasını bu değerin katlarına oturtmaya çalışır
• The Monospace Web kadar uç bir uygulama olmadan da belgenin tamamında ortak bir hizalama ritmi korunur

Modern tarayıcılarda uygulanan iki yana yaslama

• Bringhurst’ün kitabındaki gibi, gövde metni sağa dayalı akış yerine iki yana yaslı yerleştirilir
• Web’de iki yana yaslamadan kaçınılması gerektiği yönünde güçlü bir algı olsa da, gelişmiş tarayıcı özellikleri sayesinde bunun yeniden denenebileceği düşünülür
• Satır kırma ve tireleme şu CSS özellikleriyle denetlenir
  • word-break
  • text-wrap
  • hyphens
  • Tireleme kapsamını denetleyen hyphenate-limit-chars
• İki yana yaslamada sözcük aralıklarının aşırı açılması ya da paragrafta boşluk nehirleri (river) oluşması riski vardır
• Mevcut belge, satır uzunluğu, yazı tipi boyutu ve içerik birleşiminde makul sonuçlar verir; zorlayıcı bazı sözcüklere ise elle soft hyphen eklenir
• İçeriğe uygun değilse text-align: left kullanmak daha yerinde olur

Paragraf girintisi ve renk

• Art arda gelen paragraflara, üç adet 0 karakteri genişliğine karşılık gelen 3ch girinti uygulanır
• Bu, paragrafın başlangıç ve sonunu görsel olarak daha kolay bulmaya yarayan bir yöntemdir ve baskıda en az 500 yıldır kullanılmaktadır
• Web’de genellikle girinti yerine paragraflar arasına dikey boşluk konur, ancak geleneksel girinti hâlâ geçerli bir tercihtir
• Renkler beyaz zemin ve siyah metin ile sınırlandırılır
  • Düzyazı odaklı belgeler için varsayılan olarak minimalist bir düzen tercih edilir
  • Renk tutumlu kullanıldığında, karmaşık verileri aktaran diyagramlar gibi en önemli öğelere okurun dikkatini yoğunlaştırabilir

Anlamsal HTML ve başlıklar-vurgular

• Bazı ek sınıflar dışında yapı neredeyse tamamen anlamsal HTML5 işaretlemesi ile kurulur
• Başlıklar üç seviyede stillendirilir
  • h1: bölüm düzeyindeki en üst başlık
  • h2: bölüm başlığı
  • h3: alt bölüm başlığı
• <em> öğesi, genel beklentiye uygun biçimde italik gösterilir

Ayraç çizgileri ve katlanabilir ayrıntılar

• Bringhurst’ün kitabında yatay ayraç çizgilerine dair açık bir yönerge olmadığından, bunlar süsleme öğesi olarak kullanılır
• Ayraç çizgisinde Unicode Dingbats bloğundaki U+2767 Rotated Floral Heart Bullet simgesi kullanılır
• <details> öğesiyle etikete tıklanarak açılabilen bilgiler gizlenebilir

Kenar notları ve özel adlar

• Bringhurst’ün kullandığı kenar notları HTML’de <aside> ile uygulanır
• Ekran yeterince genişse, bir önceki paragrafın üst hizasına göre sağ kenar boşluğunda gösterilir
• Küçük ekranlarda ise süslemeli satır içi paragrafa katlanarak duyarlı bir yapı sunar
• .canonical-name sınıfıyla ayrılan özel adlar ve resmî adlar, Bringhurst örneğindeki gibi küçük büyük harflerle işlenir

Alıntılar ve görseller

• Blok alıntılar, girintili blok ve gövde metninin çevresindeki tırnak işaretlerinden oluşur
• Dipte yazar·eser·yıl yer alır
• Görseller ve açıklamaları sırasıyla <figure> ve <figcaption> öğelerine konur
• Görsellerin yazarı ve eser adı için, alıntılarda olduğu gibi küçük büyük harf ve italik kullanılır; aynı girinti sistemi paylaşılır

Listeler ve tablolar

• Madde işaretli listeler ve sıralı listeler desteklenir; sıralı listelerin iç içe yapısı da yaygın biçimde gösterilir
• Tablo başlıklarında küçük büyük harf etiketleri ve kenarlık kullanılarak güçlü bir ayrım sağlanır
• Tablonun geri kalan tasarımı, süslemeyi azaltıp boşluklandırmaya dayanan sade bir yapıdır

Kod gösterimi

• Genel tasarım, kod odaklı teknik belgelerden çok düzyazı odaklı belgeler için uyarlanmış olsa da, kod blokları ve satır içi kod da okunaklı biçimde düzenlenir
• Kodda, daktilo benzeri bir nostalji veren Courier Prime kullanılır; böylece Alegreya ve genel tasarımın havasıyla uyum sağlanır
• Varsayılan stil değişkenleri yazı tipini, satır yüksekliğini, kenarlık kalınlığını, metin rengini ve arka plan rengini içerir
  • --font-family: "Alegreya", serif
  • --line-height: 1.2
  • --border-thickness: 1.5px
  • --text-color: #000
  • --background-color: #fff

Uygun kullanım alanları ve lisans

• Kitaplar, dergiler, bloglar ve kılavuzlar gibi düzyazı odaklı web belgeleri için tasarlanmıştır
• Kişisel bir web sitesi, belirli bir proje ya da daha büyük bir wiki için temel olarak kullanılabilir
• Dinamik çalışan web uygulamaları için büyük olasılıkla uygun değildir
• İstenen bölümler kopyalanabilir ya da çatallanıp değiştirilebilir, ancak uygun atıf gerekir
• Bu koşul, kaynak dosya başlıklarındaki lisans bilgisini koruyarak yerine getirilebilir

Kurulum ve Pandoc kullanımı

• Hızlı başlamak için GitHub kaynağını indirip projenin the-proportional-web dizinine yerleştirin
• HTML head bölümüne şu dosyaları ekleyin
  • the-proportional-web/index.min.css
  • the-proportional-web/index.js
• Pandoc’ta, içindekiler derinliği, bölüm numaraları, CSS, JavaScript ve sözdizimi vurgusunu kapatma gibi argümanlar verilerek Markdown HTML’ye dönüştürülebilir
• Sözdizimi vurgusu gerekiyorsa, bu HTML çıktısında kullanılan şablon gibi özel bir şablon düşünülebilir
• Bu durumda Pandoc’un varsayılan olarak eklediği CSS, özel şablondan kaldırılmalıdır

İlgili tipografi projeleri

• Richard Rutter’ın The Elements of Typographic Style Applied to the Web çalışması, Bringhurst kitabının yapısını büyük ölçüde izlerken tavsiyeleri web tasarımına uyarlıyor
  • The Proportional Web’e göre kapsamı çok daha geniştir ve doğrudan bilgi aktarımına odaklanır
  • Buna karşılık The Proportional Web, fikirleri ve stil sayfasını doğrudan gösteren bir vitrine daha yakındır
  • Söz konusu sitede telefonlarda yazı tipi boyutu farkları çok belirgin olduğundan okumak zorlayıcıydı; ayrıca en az 20 yıldır var olduğu ve yaklaşık 8 yıldır güncellenmediği anlaşılıyor
  • The Proportional Web, ekran boyutları değişse de duyarlılığı ve tutarlılığı birlikte korumak için büyük çaba harcıyor; iki proje farklı amaçlara sahip olduğu için bir arada var olabilir
• Matthew Butterick’in Practical Typography çalışması, genel kullanıcıların ya da tipografiye yakın mühendislerin ihtiyaç duyacağı neredeyse tüm konuları yeterli ayrıntıyla ele alan pratik bir kaynaktır
• Tufte CSS, etkisi ve bilinirliği yüksek bir çalışma olup, bazı dizgi ayrıntılarına katılmamak mümkün olsa da genel olarak sağlam bir sonuçtur

Kapsam ve üretim araçları

• Bringhurst metodolojisinin tamamı değil, yalnızca bazı fikirleri alınıp web’e uyarlanmıştır
• Belge üretiminde şu araçlar kullanılmıştır
  • Pandoc
  • html-minifier
  • esbuild
  • GNU Make
• Tasarımın fikirleri ve fiilî yerleşimi büyük ölçüde Robert Bringhurst’ün The Elements of Typographic Style eserinden alınmıştır

[GN⁺]

Lobste.rs görüşleri

• Aşağıdaki gibi yazı tipi boyutunu piksel değeriyle belirtmek erişilebilirliği zedeler, bu yüzden kaçınılmalı

  @media screen and (max-width: 480px) {  
    :root {  
      font-size: 14px;  
    }  
  }  
  

  • CSS'teki px birimi artık fiziksel pikselle bire bir eşleşmiyor; max(1/96in, 1 pixel) anlamına geliyor
  • Benim tercih ettiğim yöntem, :root için font-size değerini 0.625 yapıp 1rem'i 10px'e denk getirmek, ardından body için 1.6rem ya da 2rem vererek tüm sayfanın bunu miras almasını sağlamak
    Yazı tipleri için px, özellikle de wv veya wh kullanmayın; rem ya da em kullanın. Yazı tipi boyutuna göre büyütülmesi gerekmeyen düzenlerde ise çoğunlukla px, wv, wh vb. kullanılabilir
    Görme sorunu yaşayan kullanıcıların tarayıcının metin boyutunu değiştirme özelliğini kullanabilmesi için yazı tiplerinde px yerine özellikle em veya rem önerilir
    Yazı tipi boyutunda wv veya wh kullanırsanız masaüstünde Ctrl-+ ile yakınlaştırırken innerWidth ve innerHeight de aynı oranda küçülür, dolayısıyla metin boyutu değişmeden kalır; bu yüzden bundan kaçınmak gerekir. Yalnızca büyük ekranlarda biraz büyüten font-size: calc(1.6rem + 2wv) gibi hafif karma kullanımlar sorun değildir
  • Tarayıcının varsayılan yazı tipi boyutunu değiştirmemek daha iyidir. Basit metin belgelerinde sorun olmayabilir ama web'in büyük kısmında düzen bozulabilir
    Karmaşık web sitelerinin keyfi yazı tipi boyutlarının tamamını işleyecek şekilde tasarlanması pratikte zordur ve tasarım kısıtlarını da fazlasıyla artırır
    Görme engeli gibi erişilebilirlik gereksinimleri varsa tarayıcının varsayılan yakınlaştırma oranı değiştirilmelidir. Böylece sitenin yalnızca keyfi viewport boyutlarını doğal biçimde ele alan sıradan duyarlı tasarımı üstlenmesi yeterli olur; bu da gerçekçi bir yaklaşımdır
    Geçmişte tarayıcılar kullanıcıların yazı tipi boyutunu doğrudan ayarlamasına izin veriyordu, ancak kullanıcı deneyimi iyi olmadığı için onlarca yıl önce tüm sayfayı yakınlaştırma yaklaşımına geçildi

• Mobilde de okunabilecek şekilde yapılıp yapılmadığından emin değilim

• Bringhurst'ün kitabındaki tipografiyi oldukça iyi yeniden üretmiş olması etkileyici
  Yalnız bazen sabit satır yüksekliğine sahip tekdüze ızgaradan çıkıyor. Örneğin Courier ile ayarlanmış bir metin satır içine karıştığında satır yüksekliği biraz artıyor

  • Bunu önlemek için <code> üzerinde line-height: 1 belirtilmeli. 0'ın daha iyi olup olmadığı konusunda bir fikir birliği var mı bilmiyorum
    Ayrıca 『The Elements of Typographic Style』 kitabına uyulacaksa madde işaretleri ve numaralı liste simgeleri kenar boşluğuna yerleştirilmeli, ancak bunun açık bir gereklilik olup olduğunu hatırlamıyorum

• Klasik tipografi kitaplarını incelemenin ortaya çıkardığı sonuç harika; internette bu tür kısıt tabanlı tasarımı daha fazla görmek güzel

• Bu alanda 2009'da çıkan http://lamb.cc/typograph/ hâlâ benim için en iyisi

• Göreli ölçeklendirme harika, ama kök yazı tipi boyutunu ezmek bence bir hata
  Siteler kullanıcının yazı tipi boyutu ayarlarına saygı duymalı ve oranlar ile ilişkiler üzerinden kurulan göreli boyutlandırma sistemi buna çok iyi uyuyor

• Metnin en önemli şey olduğunu ve sunum biçiminin önemsiz olduğunu varsaymak kolay, ama özenle tasarlanmış bir sayfa düzeni blog yazılarını, romanları ya da makaleleri çok daha profesyonel gösterir
  İyi sayfa dizgisi biraz unutulmuş bir beceri hâline geliyor; bu yüzden böyle girişimleri görmek sevindirici
  Başta tuft.css kullanmaya başladım ve yıllar içinde biraz ayar gerektirdi, ama bugüne kadar iyi iş gördü. Bu çalışma bazı açılardan daha iyi görünüyor, ancak geçiş yapacak kadar değil