The Proportional Web — stylesheet web untuk tipografi proporsional

• The Proportional Web adalah desain yang mengambil sebagian prinsip dari 《The Elements of Typographic Style》 karya Robert Bringhurst dan menerapkannya di browser; ini merupakan penerus proporsional dari The Monospace Web sekaligus stylesheet yang dapat digunakan ulang
• Menggunakan Alegreya dan Alegreya SC untuk teks isi, serta Courier Prime untuk kode; ukuran dan ritme vertikal dijaga konsisten berdasarkan font root 16px, rem, dan tinggi baris 1.2rem
• Menerapkan justifikasi rata kiri-kanan dengan memanfaatkan word-break, text-wrap, dan hyphens pada browser modern, tetapi menyarankan penggunaan text-align: left jika jarak antarkata atau river ruang kosong memburuk
• Menata judul, kutipan, gambar, tabel, dan blok kode dengan berpusat pada HTML5 semantik; catatan samping pada layar lebar ditempatkan di margin kanan dan pada layar kecil berubah menjadi paragraf inline berdekorasi
• Cocok untuk dokumen berbasis prosa seperti buku, jurnal, blog, manual, dan wiki; tidak disarankan untuk aplikasi web dinamis, dan dapat digunakan dengan mengunduh sumber GitHub lalu menambahkan CSS dan JavaScript atau bersama Pandoc

---

Dari The Monospace Web ke lebar proporsional

• The Monospace Web menyebar lebih luas dari perkiraan, sampai diadopsi untuk blog pribadi dan antarmuka aplikasi
• The Proportional Web adalah penerus spiritual proyek tersebut, dirancang agar bebas digunakan ulang sambil memakai font proporsional alih-alih font monospace
• Proyek ini dimulai setelah membaca 《The Elements of Typographic Style》 karya Robert Bringhurst, sebagai upaya mengimplementasikan tata letak dan tipografi buku itu di browser
• Berbeda dari materi cetak, web tidak memiliki ukuran halaman tetap dan juga merupakan platform yang dapat diprogram, sehingga aturan yang sama sulit diterapkan begitu saja
  • Sebagai gantinya, elemen-elemen yang dianggap berguna atau enak dilihat dibuka agar dapat dipilih dan digunakan
• Pandoc digunakan untuk menghasilkan HTML, tetapi stylesheet ini dapat bekerja di lingkungan lain dengan sedikit modifikasi

Sistem font

• Prinsip Bringhurst untuk memilih satu typeface serbaguna, alih-alih mencampur banyak typeface, dijadikan dasar desain
• Keluarga Alegreya digunakan terpisah sesuai kebutuhan
  • Alegreya Regular diterapkan pada teks isi dan judul tingkat 3
  • Alegreya SC digunakan untuk judul tingkat 1 berbentuk kapital judul, judul tingkat 2 yang ditampilkan sebagai small caps, serta singkatan inline seperti HTML
• Courier Prime diterapkan pada potongan kode monospace

Satuan relatif dan ritme vertikal

• Semua ukuran ditentukan dalam satuan rem berdasarkan ukuran font root 16px
• Ukuran standar adalah 0.75·0.875·1·1.125·1.25·1.375·1.5·2·2.5·3·4rem, yang masing-masing setara dengan 12·14·16·18·20·22·24·32·40·48·64px
• Cukup dengan mengubah ukuran font root, seluruh desain dapat diperbesar atau diperkecil bersama-sama
  • Misalnya, saat lebar layar 480px atau kurang, font-size pada :root dapat diubah menjadi 14px
• Tinggi baris adalah 1.2rem, dan penyelarasan vertikal semua elemen diusahakan mengikuti kelipatan nilai ini
• Meski tidak diterapkan seekstrem The Monospace Web, desain ini tetap mempertahankan ritme penyelarasan yang sama di seluruh dokumen

Justifikasi rata kiri-kanan yang diterapkan di browser modern

• Seperti buku Bringhurst, teks isi disusun dengan justifikasi rata kiri-kanan, bukan ragged right
• Ada anggapan kuat bahwa justifikasi rata kiri-kanan sebaiknya dihindari di web, tetapi fitur browser yang telah membaik dinilai membuatnya layak dicoba kembali
• Pemutusan baris dan hyphenation dikendalikan dengan properti CSS berikut
  • word-break
  • text-wrap
  • hyphens
  • hyphenate-limit-chars, yang mengontrol cakupan penerapan hyphenation
• Justifikasi rata kiri-kanan berisiko membuat jarak antarkata terlalu melebar atau membentuk river ruang kosong dalam paragraf
• Pada dokumen saat ini, kombinasi panjang baris, ukuran font, dan konten menghasilkan keluaran yang cukup baik, dan soft hyphen ditambahkan secara manual pada beberapa kata yang sulit
• Jika tidak cocok dengan konten, lebih tepat menggantinya ke text-align: left

Indentasi paragraf dan warna

• Pada paragraf berurutan, diterapkan indentasi 3ch yang setara dengan lebar tiga karakter 0
• Cara ini memudahkan mata menemukan awal dan akhir paragraf, dan telah digunakan dalam materi cetak setidaknya selama 500 tahun
• Di web, biasanya digunakan spasi vertikal antarparagraf alih-alih indentasi, tetapi indentasi tradisional tetap merupakan pilihan yang valid
• Warna dibatasi pada latar putih dan teks hitam
  • Konfigurasi minimalis ini dipilih sebagai default untuk dokumen berbasis prosa
  • Dengan menghemat penggunaan warna, perhatian pembaca dapat difokuskan pada elemen paling penting, seperti diagram yang menyampaikan data kompleks

HTML semantik serta judul dan penekanan

• Selain beberapa kelas tambahan, sebagian besar terdiri hanya dari markup HTML5 semantik
• Judul ditata dalam tiga tingkat
  • h1: judul tingkat teratas setara bab
  • h2: judul bagian
  • h3: judul subbagian
• Elemen <em> ditampilkan sebagai italik, sesuai ekspektasi umum

Garis pemisah dan detail lipat

• Karena buku Bringhurst tidak memberikan panduan jelas tentang garis pemisah horizontal, elemen ini digunakan sebagai dekorasi
• Garis pemisah memakai simbol U+2767 Rotated Floral Heart Bullet dari blok Unicode Dingbats
• Dengan elemen <details>, informasi yang dapat dibuka dengan menekan label dapat disembunyikan

Catatan samping dan nama khusus

• Catatan samping yang digunakan Bringhurst diimplementasikan dengan <aside> HTML
• Jika layar cukup lebar, catatan ditampilkan di margin kanan, sejajar dengan bagian atas paragraf sebelumnya
• Pada layar kecil, catatan dilipat secara responsif menjadi paragraf inline dengan dekorasi
• Nama khusus dan nama resmi yang dibedakan dengan kelas .canonical-name dirender sebagai small caps, seperti contoh Bringhurst

Kutipan dan gambar

• Kutipan blok terdiri dari blok berindentasi dan tanda kutip di sekitar teks isi
• Footer memuat penulis, karya, dan tahun
• Gambar dan caption masing-masing dimasukkan ke elemen <figure> dan <figcaption>
• Untuk penulis dan judul karya pada gambar, digunakan small caps dan italik seperti pada kutipan, serta berbagi sistem indentasi yang sama

Daftar dan tabel

• Daftar bullet dan daftar bernomor didukung, dan struktur bertingkat pada daftar bernomor juga ditampilkan dalam bentuk umum
• Header tabel dibedakan dengan kuat menggunakan label small caps dan garis tepi
• Desain tabel lainnya berupa komposisi sederhana yang mengurangi dekorasi dan mengandalkan jarak

Representasi kode

• Keseluruhan desain lebih ditujukan untuk dokumen berbasis prosa daripada dokumentasi teknis yang berpusat pada kode, tetapi blok kode dan kode inline juga disusun agar mudah dibaca
• Kode menggunakan Courier Prime, yang memberi nuansa mesin tik nostalgis sekaligus selaras dengan Alegreya dan atmosfer desain secara keseluruhan
• Variabel gaya dasar mencakup font, tinggi baris, ketebalan garis tepi, warna teks, dan warna latar
  • --font-family: "Alegreya", serif
  • --line-height: 1.2
  • --border-thickness: 1.5px
  • --text-color: #000
  • --background-color: #fff

Kegunaan yang cocok dan lisensi

• Ini adalah desain untuk dokumen web berbasis prosa seperti buku, jurnal, blog, dan manual
• Dapat digunakan sebagai dasar untuk situs web pribadi, proyek tertentu, atau wiki yang lebih besar
• Kemungkinan besar tidak cocok untuk aplikasi web yang bekerja secara dinamis
• Bagian yang diinginkan dapat disalin atau di-fork untuk dimodifikasi, tetapi atribusi yang sesuai diperlukan
• Syarat atribusi dapat dipenuhi dengan mempertahankan informasi lisensi pada header file sumber

Instalasi dan penggunaan Pandoc

• Untuk memulai dengan cepat, unduh sumber GitHub dan tempatkan di direktori the-proportional-web pada proyek
• Tambahkan file berikut ke head HTML
  • the-proportional-web/index.min.css
  • the-proportional-web/index.js
• Di Pandoc, Markdown dapat dikonversi ke HTML dengan menentukan argumen seperti kedalaman daftar isi, nomor bagian, CSS, JavaScript, dan penonaktifan syntax highlighting
• Jika membutuhkan syntax highlighting, pertimbangkan template kustom seperti template yang digunakan untuk keluaran HTML ini
• Dalam kasus ini, CSS yang disertakan Pandoc secara default harus dihapus dari template kustom

Proyek tipografi terkait

• The Elements of Typographic Style Applied to the Web karya Richard Rutter mengikuti cukup banyak struktur buku Bringhurst sambil menyesuaikan sarannya untuk desain web
  • Cakupannya jauh lebih luas daripada The Proportional Web dan berfokus pada penyampaian informasi itu sendiri
  • Sebaliknya, The Proportional Web lebih mirip showcase yang memperlihatkan ide dan stylesheet secara langsung
  • Situs tersebut sulit dibaca di ponsel karena perbedaan ukuran font yang besar; diketahui sudah ada sejak setidaknya 20 tahun lalu dan tidak diperbarui selama sekitar 8 tahun
  • The Proportional Web mencurahkan banyak usaha untuk menjaga responsivitas sekaligus konsistensi meski ukuran layar berubah, dan kedua proyek dapat berdampingan karena tujuannya berbeda
• Practical Typography karya Matthew Butterick adalah sumber praktis yang membahas hampir semua topik yang dibutuhkan pengguna umum atau engineer yang beririsan dengan tipografi secara cukup mendetail
• Tufte CSS adalah karya yang berpengaruh dan dikenal luas; meskipun beberapa detail typesetting-nya mungkin tidak disetujui, hasilnya secara keseluruhan solid

Cakupan penerapan dan alat pembuatan

• Yang diambil bukan keseluruhan metodologi Bringhurst, melainkan hanya sebagian ide yang disesuaikan untuk web
• Dokumen dibuat menggunakan alat berikut
  • Pandoc
  • html-minifier
  • esbuild
  • GNU Make
• Ide desain dan tata letak aktual banyak diambil dari 《The Elements of Typographic Style》 karya Robert Bringhurst

[GN⁺]

Pendapat di Lobste.rs

• Menetapkan ukuran font dengan nilai piksel seperti berikut merusak aksesibilitas, jadi sebaiknya dihindari

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

  • Satuan px di CSS tidak lagi berkorespondensi 1:1 dengan piksel fisik, melainkan berarti max(1/96in, 1 pixel)
  • Cara yang saya sukai adalah mengatur font-size pada :root ke 0.625 agar 1rem berkorespondensi dengan 10px, lalu menetapkan 1.6rem atau 2rem pada body agar seluruh halaman mewarisinya
    Untuk font, jangan gunakan px, terutama wv atau wh; gunakan rem atau em. Untuk layout yang tidak perlu diperbesar mengikuti ukuran font, gunakan terutama px, wv, wh, dan sejenisnya
    Agar pengguna dengan penglihatan kurang baik bisa memakai fitur pengubahan ukuran teks di browser, sangat disarankan memakai em atau rem daripada px untuk font
    Jika memakai wv atau wh untuk ukuran font, saat diperbesar dengan Ctrl-+ di desktop, innerWidth dan innerHeight juga mengecil dengan rasio yang sama sehingga ukuran teks tetap tidak berubah; ini sebaiknya dihindari. Penggunaan campuran yang halus seperti font-size: calc(1.6rem + 2wv) untuk hanya sedikit memperbesar di layar besar masih oke
  • Sebaiknya jangan mengubah ukuran font default browser. Untuk dokumen teks sederhana itu tidak masalah, tetapi di sebagian besar web layout bisa rusak
    Pada praktiknya sulit merancang situs web kompleks agar menangani semua ukuran font arbitrer, dan batasan desainnya juga menjadi sangat besar
    Jika membutuhkan aksesibilitas karena disabilitas visual dan sebagainya, yang sebaiknya diubah adalah tingkat zoom default browser. Dengan begitu situs hanya perlu menangani desain responsif umum yang secara alami mendukung ukuran viewport arbitrer, sehingga realistis dilakukan
    Browser lama dulu membiarkan pengguna mengatur ukuran font secara langsung, tetapi karena pengalaman penggunanya kurang baik, sejak puluhan tahun lalu mereka beralih ke pendekatan memperbesar seluruh halaman

• Saya ragu apakah ini dibuat agar tetap bisa dibaca di mobile

• Reproduksi tipografi dari buku Bringhurst ini cukup baik dan mengesankan
  Namun kadang keluar dari grid seragam dengan tinggi baris tetap. Misalnya, jika teks yang disetel dalam Courier tercampur dalam satu baris, tinggi barisnya sedikit bertambah

  • Untuk mencegahnya, <code> harus diberi line-height: 1. Saya tidak tahu apakah ada konsensus soal apakah 0 lebih baik
    Selain itu, jika ingin mengikuti 『The Elements of Typographic Style』, simbol pada daftar berpoin dan bernomor seharusnya ditempatkan di margin, tetapi saya tidak ingat apakah itu merupakan persyaratan eksplisit

• Hasil eksplorasi buku-buku tipografi klasik ini luar biasa, dan menyenangkan melihat lebih banyak desain berbasis batasan seperti ini di online

• Di bidang ini, http://lamb.cc/typograph/ yang keluar pada 2009 masih yang terbaik bagi saya

• Penyesuaian ukuran relatif itu bagus, tetapi menurut saya menimpa ukuran font root adalah kesalahan
  Situs harus menghormati pengaturan ukuran font pengguna, dan sistem ukuran relatif yang dirancang berdasarkan proporsi serta relasi sangat cocok untuk itu

• Mudah untuk berpura-pura bahwa teks adalah yang paling penting dan cara penyajiannya tidak penting, tetapi layout halaman yang dirancang dengan cermat membuat tulisan blog, novel, atau artikel terlihat jauh lebih profesional
  Tata letak halaman yang unggul sudah menjadi keterampilan yang agak terlupakan, jadi upaya seperti ini menyenangkan
  Saya mengadopsi tuft.css sejak awal dan meski perlu penyesuaian selama bertahun-tahun, sejauh ini saya telah memanfaatkannya dengan baik. Ini tampak lebih baik dalam beberapa hal, tetapi belum sampai membuat saya ingin beralih