Monaspace

 (monaspace.githubnext.com)
1 poin oleh GN⁺ 2023-11-10 | 1 komentar | Bagikan ke WhatsApp
  • Monaspace adalah sistem font baru untuk memasukkan ekspresi tipografi yang lebih kaya ke tampilan kode sambil tetap mempertahankan grid monospace
  • Fitur utamanya, Texture Healing, mengoreksi ketidakseimbangan ruang kosong pada pasangan huruf yang berdekatan dengan glyph alternatif, sehingga mengurangi perbedaan kepadatan pada teks monospace
  • Pendekatan ini menerapkan contextual alternates OpenType pada font untuk kode, dapat digunakan di sebagian besar editor tanpa plugin editor terpisah, dan juga menyediakan pengaturan untuk Visual Studio Code
  • Monaspace memiliki sumbu ketebalan 200–800, kemiringan 0 hingga -11°, dan lebar 100–125; code ligature per bahasa dapat dinyalakan atau dimatikan sebagai style set
  • GitHub Next telah mengembangkan font ini bersama Lettermatic sejak 2022, dengan tujuan memperluas tampilan kode menjadi sarana ekspresi yang lebih luas untuk dimanfaatkan oleh alat pengembangan

Sistem font yang memperluas tampilan kode monospace

  • Monaspace adalah “superfamily” font untuk kode, dengan fokus mengembangkan cara kode ditampilkan di layar
  • Sejak masa awal teletype, kode ditampilkan dengan font monospace, dan Monaspace berupaya memuat lebih banyak makna sambil mempertahankan grid ini
  • Editor yang ada sering menyampaikan informasi di luar syntax highlighting berbasis warna melalui elemen antarmuka seperti hover, garis bawah, dan dekorasi grafis
  • Monaspace menyediakan palet yang lebih ekspresif pada tingkat font, yang dapat dimanfaatkan oleh kode dan alat pengembangan

Saran Copilot dan tipografi

  • Saran kode seperti Copilot dapat memiliki suara tipografis tersendiri melalui Monaspace
  • Ghost text dapat membuat kode yang disarankan lebih sulit di-parse dan dievaluasi
  • Jika ekspresi font itu sendiri menunjukkan bagian mana yang merupakan kode yang disarankan, potongan kode yang disarankan akan lebih mudah dibedakan nanti

Keterbatasan font monospace yang menjadi sasaran Texture Healing

  • Karena font monospace menempatkan semua huruf dalam kotak dengan lebar yang sama, kepadatan teks menjadi tidak merata
  • Huruf sempit seperti l dan i membutuhkan serif yang dilebih-lebihkan untuk mengisi kotaknya, dan tetap menyisakan lebih banyak ruang kosong daripada yang diperlukan
  • Huruf lebar seperti m dan w dipadatkan di dalam kotak sehingga bentuknya terdistorsi, goresannya menipis, dan ruang bagian dalamnya juga terbatas
  • Batasan ini adalah masalah struktural pada font monospace yang berlanjut sejak era teletype tahun 1960-an

Cara kerja Texture Healing

  • Texture Healing mencari pasangan huruf berdekatan yang salah satunya kekurangan ruang dan yang lain memiliki ruang berlebih, lalu mengganti glyph-nya
  • Huruf sempit diganti dengan glyph alternatif yang menyerahkan sebagian ruang kosongnya kepada tetangga, sementara huruf lebar diganti dengan glyph alternatif yang melebar hingga tepi kotak
  • Fitur ini diimplementasikan sebagai contextual alternates OpenType
    • contextual alternates umumnya digunakan pada aksara Arab atau font tulisan tangan, yang bentuk glyph-nya berubah sesuai huruf di sekitarnya
    • Monaspace menerapkan teknologi ini pada font monospace untuk kode
  • Teks yang dihasilkan tetap mengikuti grid monospace
  • Cara mengaktifkan Texture Healing di Visual Studio Code dapat dilihat di dokumentasi Monaspace

Sumbu dan gaya font

  • Sumbu ketebalan Monaspace tersedia dari 200 hingga 800
    • 200: Extra Light
    • 300: Light
    • 400: Regular
    • 500: Medium
    • 600: Semibold
    • 700: Bold
    • 800: ExtraBold
  • Sumbu kemiringan tersedia dari 0 hingga -11°
    • 0: Normal
    • -5.5°: titik tengah saat sebagian huruf berubah dari bentuk oblique menjadi italic
    • -11°: Italic
  • Sumbu lebar tersedia dari 100 hingga 125
    • 100: Normal
    • 112.5: Semiwide
    • 125: Wide
  • Monaspace mencakup nama-nama keluarga seperti Neon, Argon, Xenon, Radon, dan Krypton

Code ligature dan pengaturan OpenType

  • Monaspace menyertakan code ligature untuk berbagai bahasa pemrograman
  • Ligature disusun sebagai style set, sehingga pengguna dapat menyalakan atau mematikan hanya set yang diinginkan
  • Setiap style set dirancang secara garis besar berdasarkan kebutuhan bahasa tertentu
    • ss01: mencakup ligature untuk urutan karakter yang umum terlihat di JavaScript
    • ss05: menyediakan ligature untuk operator F#
  • Fitur OpenType tambahan juga tersedia
    • calt: mengaktifkan Texture Healing
    • liga: menyesuaikan jarak karakter berulang seperti /// dan ||, serta dirancang agar tidak aktif di dalam urutan yang lebih panjang seperti ////
  • Di Visual Studio Code, fitur dan style set yang diinginkan diaktifkan dengan menentukannya pada editor.fontLigatures di settings.json

Pembuatan dan distribusi

  • Monaspace dibuat dengan tujuan meningkatkan tampilan kode untuk semua developer
  • GitHub Next memulai pekerjaan ini pada 2022 dan membuat font tersebut bersama Lettermatic
  • Daftar kontributor, dokumentasi, dan file font dapat dilihat di repo Monaspace
  • Unduhan tersedia di repositori GitHub

Bacaan terkait

1 komentar

 
GN⁺ 2023-11-10
Opini Hacker News

  • Fitur Texture Healing menggunakan fitur OpenType dengan sangat cerdik, membuat kombinasi font monospace yang bermasalah terlihat jauh lebih baik tanpa merusak grid sama sekali.
    Pendekatan sederhana mungkin membuat ligatur untuk pasangan huruf yang menyulitkan seperti mi atau lm, tetapi di sini tampaknya ia memilih glyph alternatif yang mengisi ruang lebar tetap secara berbeda tergantung huruf di sekitarnya.

    • Commit Mono juga melakukan hal serupa dan menyebutnya Smart kerning. Untuk detailnya, lihat tab “04 Intelligent” di https://commitmono.com/
      Dalam praktiknya sulit digunakan. Lebar huruf berubah tergantung huruf setelahnya, sehingga teks melompat-lompat saat diketik. Keren saat dibaca, tetapi buruk saat ditulis.
    • Ini teknik yang benar-benar cerdik. Yang lebih mengejutkan, hal ini sudah mungkin dilakukan sejak lama sekali, tetapi tidak ada yang memikirkannya.
      Riley Cran, yang merancang teknik ini sebagai bagian dari proyek ini, dan seluruh tim https://lettermatic.com luar biasa.
    • Saya tidak terlalu yakin. Setelah menyalakan dan mematikan kotak centang beberapa kali, ketidakkonsistenannya mulai terlihat.
      Misalnya, pada time_limit di contoh dasar, m kedua memiliki i di kedua sisinya sehingga punya ruang untuk “tumbuh” lebih besar, dan jelas terlihat lebih lebar daripada m pertama. Saya tidak yakin apakah ini bagus.
    • Banyak orang di sini memuji texture healing, tetapi bagi saya ini terlihat seperti solusi setengah matang. Mengapa kita sebagai komunitas begitu enggan mengadopsi font dengan lebar variabel?
      Texture healing ini juga sudah merusak grid sel karakter yang sempurna, jadi dalam beberapa hal terasa seperti mengambil kelemahan dari kedua sisi.
      Saya melihat ligatur yang mewah pun kurang lebih serupa. Kita bisa memakai karakter asli di kode sumber, dan Unicode didukung luas. Raku melakukannya begitu, tetapi agar benar-benar bersinar, dibutuhkan tata huruf yang lebih baik, termasuk font dengan lebar variabel.

  • Awalnya saya mengira ini “keluarga font monospace lain lagi, kelihatannya bagus,” tetapi setelah melihat texture healing, saya jadi benar-benar ingin mencobanya.
    Saya sangat menyukai ide memakai gaya font yang berbeda untuk tiap penggunaan. Namun karena saya terutama memakai terminal, saya tidak tahu terminal mana yang mendukungnya, dan editor teks command-line sepertinya juga harus mendukungnya. Meski begitu, menurut saya ini ide yang hebat.

    • Secara teori, kalau berbasis xterm seharusnya bisa. ESC[<10-19>m adalah escape sequence untuk memilih font 0–9.
      Apakah benar-benar berfungsi adalah perkara lain. Saya memakai Alacritty dan tidak bisa menemukan apakah ini didukung, dan ketika mencobanya sendiri juga tidak menghasilkan apa-apa.

  • Saya penasaran bagaimana orang melihat contoh Mix & Match.
    Radon, yang bergaya tulisan tangan, pada dasarnya tampak seperti italic sehingga cocok dengan font lain. Namun sisanya terlalu mirip dalam metrik dan sebagainya, sehingga contoh seperti “string dokumen yang berwibawa” atau “suara Copilot” cukup sulit dibedakan.

    • Karena Mix & Match, saya memutuskan untuk mencoba font ini. Saya sudah bertahun-tahun memakai Operator Mono karena italic aslinya.
      Sudah lama saya mencari alternatif terbuka untuk Operator Mono, dan berkat Mix & Match, akhirnya saya merasa ini mungkin bisa menjadi alternatif itu.
    • Ini pikiran yang langsung muncul bahkan sebelum saya menggulir halaman ke bawah. Komentar tulisan tangan terlihat keren dan menjadi elemen pembeda lain yang mengurangi beban saat menelusuri kode.
      Pasti ada yang tidak suka, tetapi secara pribadi saya ingin mencobanya.
    • Saat membolak-balik sampel, saya bahkan tidak menyadari apa yang berubah di kotak sampel kode sampai mencapai varian Radon.
      Varian lainnya tidak cukup berbeda untuk menyampaikan informasi.
    • Saya tidak tahu cara mengatur font yang berbeda-beda. Itu hal pertama yang ingin saya coba, tetapi saya tidak bisa menemukan caranya. Apakah saya melewatkan sesuatu yang jelas?
    • Saya sangat menyukai ide ini. Apakah ini sudah didukung di suatu tempat, atau ini untuk masa depan?

  • Ligaturnya cukup banyak, tetapi bagi saya masih kurang. Sekarang != dan <= sudah terasa dasar, dan saya terus menyadari betapa bagusnya Fira Code saat menyesuaikan tinggi * pada *ptr, menempatkan : di tengah pada X:Y, atau menaikkan x pada 0xFF.
    Saya hampir menyukai tampilan varian Krypton, tetapi garis horizontal pada huruf kecil t terlalu rendah dibanding tinggi huruf seperti huruf kecil c. Jadi untuk saat ini sepertinya saya akan tetap memakai Fira Code, dan saya berniat mengecek lagi sekitar setahun setelah ada umpan balik pengguna untuk melihat apa yang berubah.

    • Untuk situs contoh, terasa janggal bahwa pada contoh di situs yang ditautkan, dua * pada /** tidak sejajar.
      Ini terutama terlihat pada contoh seperti // What if tentative ideas looked handwritten? dan /** * What if docstrings looked authoritative? */.

  • Idenya bagus, tetapi saya penasaran kenapa kita tidak melihat lebih banyak font sempit seperti PragmataPro
    Saya sudah memakainya hampir 10 tahun dan ingin ada lebih banyak pilihan di area ini, tetapi sepertinya tidak ada yang mau membuatnya sesempit itu. Berkeley Graphics sudah hampir setahun menggoda versi sempit dari Berkeley Mono, tetapi belum ada perkembangan apa pun
    Di Monaspace ini juga ada slider lebar, tetapi rasanya titik awalnya “lebih lebar daripada PragmataPro” dan ujungnya menuju “sangat lebar sampai tidak masuk akal”. Saya penasaran kenapa tidak dibuat juga agar bisa turun ke versi yang sempit

    • Sangat setuju. Saya memakai PragmataPro setiap hari, dan semua yang lain terasa terlalu lebar
      Iosevka bawaan cukup mendekati, tetapi jarak antarbarisnya jauh lebih besar. Untungnya bisa dikustomisasi di pengaturan menjadi hampir sama dengan leading = 1110. Nilai ini saya temukan lewat coba-coba
    • Sudah mencoba Quinze? https://www.programmingfonts.org/#quinze
      Saat mencari font paling sempit, saya menyadari Quinze adalah jawabannya. Kira-kira 20% lebih sempit daripada Iosevka atau M+. Saya tidak menemukan materi yang mudah untuk membandingkannya dengan PragmataPro, tetapi jika Iosevka adalah interpretasi gratis dari PragmataPro, maka Quinze juga mestinya lebih sempit
      Dalam praktiknya, Quinze begitu sempit sampai ketika saya memaksanya dipakai untuk semua teks fixed-width di browser, keterbacaan justru memburuk, bukan membaik. Karena pada tinggi yang sama, ia terlihat jauh lebih kecil daripada font “normal”. Di lingkungan coding saya memakainya dengan ukuran font yang lebih besar, dan itu cocok dengan lebarnya yang sempit
      Kekurangannya, Quinze sangat minimalis. Hampir hanya ASCII, tanpa ligature, dan tanpa kustomisasi. Bagi saya hal-hal itu tidak mengganggu
    • Iosevka juga cukup sempit dan populer. Entah apakah sesuai dengan kriteria yang diinginkan, tetapi layak dilihat
    • Saya baru saja mengetahui M+, dan cukup suka varian “60”-nya. Lebar default 50 terlalu sempit bagi saya, dan menurut selera saya keterbacaannya menurun pada varian 50
      Meski begitu, bisa sesempit yang diinginkan
      https://mplusfonts.github.io/
    • Karena sedang membahas font sempit, ada rekomendasi font serif sempit yang bagus? Berbayar maupun gratis sama-sama oke
      Di browser saya memakai “Bell MT” sebagai pengganti Times, dan juga memakainya sebagai font variable-width di emacs Org mode. Bagus, tetapi saya berharap ada versi yang lebih besar dan lebih sempit
      Selain itu, salah satu font fixed-width sempit yang bagus adalah “The Sans Mono Condensed”, yang menjadi terkenal berkat buku-buku O’Reilly awal. Setelah itu O’Reilly beralih ke font fixed-width lain. Kekurangannya hanya punya set karakter Barat, tetapi saya sangat menyukainya

  • Saya terganggu karena simbol Radon di halaman ditulis Rd. Kalau Radon, seharusnya Rn
    Radium adalah Ra, Radon adalah Rn, dan saya sampai mengecek ulang apakah benar ada unsur lain yang diawali R dan memiliki d dalam namanya

    • Saya juga melihat itu, dan setelahnya sudah diperbaiki
    • Ada Rhodium, tetapi simbolnya Rh

  • Karena mono flag tidak disetel, saya harus mencobanya dengan GTK2 gvim agar font bisa dimuat
    Hasil % ttfmono MonaspaceArgon-Regular.otf adalah monospaced flag = 0, dan tertulis 0 = variable-width, otherwise = monospaced
    Sayangnya, sepertinya flag ini membuat ligature tidak aktif
    Meski begitu, di vim yang dijalankan pada st yang sudah dipatch, saya bisa melihat ligature dan texture healing, dan saya benar-benar menyukainya. Saat mengetik, baris hanya bergerak sangat halus, dan ketika kursor melewatinya, misalnya karena m yang melebar, tidak ada bayangan sisa. Ini dirancang dengan baik untuk kode
    Kalau boleh meminta satu fitur, saya ingin bisa memilih beberapa varian, seperti nol bersudut dengan garis miring terbalik, atau mempertahankan ! pada ligature !=. Maksudnya bisa dilihat di sini: https://github.com/be5invis/Iosevka/blob/main/doc/stylistic-...
    https://st.suckless.org/patches/ligatures/

    • Yakin? Di macOS, font ini muncul di bawah font “Fixed Width” di Font Book
      Saya memakai versi yang dirilis hari ini, jadi mungkin baru saja diperbaiki
    • Masalah yang sama juga ada di KDE Konsole: https://imgur.com/a/Dj1HZiu
      Harus secara eksplisit mengaktifkan kotak centang “Show all fonts” agar font yang “bukan fixed-width” juga terlihat

  • Di sistem modern, sepertinya font untuk kode sekarang bisa melampaui font fixed-width
    Saya sudah beberapa kali merekomendasikannya di sini, tetapi saya memakai Input Sans, font coding proportional-width
    https://input.djr.com

    • Saya penasaran kenapa Anda merekomendasikannya
      Sepertinya di font ini kesalahan ketik bisa lebih sulit ditemukan
    • Saya ingin memakai font proportional-width untuk coding, tetapi tidak tahu frontend Vim yang mendukungnya dengan rapi
      Saat memakai Vim lewat SSH, tidak masalah tetap memakai fixed-width, tetapi berkat Neovim sudah ada banyak frontend, namun hampir tidak ada yang tampaknya mendukung font proportional-width. Yang mendukung pun cenderung sangat lambat sampai menyakitkan untuk dipakai
    • Apakah mendukung ligature yang mengubah >= menjadi ≥? Saya mencoba pratinjau web di ponsel, tetapi mungkin itu keterbatasan Firefox Android
      Sebagai referensi, ligature itu seperti ini: https://fonts.google.com/knowledge/glossary/ligature

  • Saya selalu bingung bagaimana 0 bertitik bisa menjadi semacam standar di font seperti ini. Saya selalu tertukar dengan 8, jadi jauh lebih suka 0 bergaris miring
    Kalau ada varian seperti itu, saya pasti ingin mencoba font ini

    • Ada bahasa yang memiliki lingkaran bergaris miring sebagai huruf, jadi 0 bergaris miring bisa menimbulkan kebingungan. 0 bertitik punya kemungkinan kebingungan ke arah itu yang jauh lebih kecil
      Desainer font mungkin bisa menekankan sisi cembung pada 0 bertitik dan sisi cekung pada 8 agar secara visual bisa dibedakan, tetapi saya tidak tahu apakah font ini melakukan itu
    • Saya mengusulkan 0 bergaris miring di issue, lalu seseorang menjawab bahwa 0 bertitik juga memenuhi tujuan yang sama. Benar-benar menyebalkan

  • Texture healing benar-benar ide yang cerdik dan indah
    Saya juga ingin mencobanya pada tulisan tangan bahasa Mandarin yang sering dipakai dalam lebar tetap. Karakter yang umum tetapi sangat rapat, terutama karakter tradisional seperti 邊鐵餐廳臺藥機麵顧露樓幫讓, akan sangat diuntungkan jika bisa diberi ruang tambahan dan direntangkan lebih lebar