Rekomendasi CSS font-family

 (chrismorgan.info)
1 poin oleh GN⁺ 12 jam lalu | 1 komentar | Bagikan ke WhatsApp
  • Jika Anda mendesain dengan mengandalkan nama font tertentu di web, hasilnya bisa rusak tergantung platform, jaringan, dan pengaturan keamanan, jadi font-family harus disusun dengan asumsi adanya fallback keluarga generik
  • Untuk kode, artwork, dan layout yang membutuhkan tampilan lebar tetap, monospace wajib disertakan; serif dan sans-serif juga sebaiknya ikut ditentukan agar keluarga yang diinginkan terjamin
  • Stack yang mencantumkan panjang lebar font yang mungkin ada secara lokal biasanya manfaatnya kecil, dan nilai default keluarga generik browser bisa jadi memilih opsi yang lebih baik
  • Web font lebih lambat dibanding tanpa web font dan menimbulkan kompromi terkait kegagalan pemuatan serta font-display, sehingga untuk konten, memakai font default pengguna apa adanya juga merupakan pilihan realistis
  • system-ui dan ui-* sangat berkarakter untuk teks UI pendek, sehingga bisa tidak cocok untuk konten panjang dan dukungan bahasa; menggunakannya sebagai pengganti font default untuk konten berisiko

Jangan percaya pada nama font

  • Tidak ada web-safe font yang tersedia bersama di semua platform utama, jadi jangan berasumsi bahwa nama font tertentu akan selalu berfungsi
  • Web font juga bukan solusi yang pasti
    • Subresource yang tidak di-inline bisa gagal dimuat karena berbagai alasan jaringan
    • Pemuatan font adalah area yang memiliki kekhawatiran keamanan, sehingga bisa diblokir di sebagian lingkungan
    • uBlock Origin memiliki tombol khusus untuk menonaktifkan font jarak jauh
    • Mode penghemat data di sebagian browser bisa mencegah pemuatan font, dan ada pandangan bahwa browser yang belum mencegahnya pun seharusnya melakukannya
  • Jika pengguna tidak mengizinkan pilihan font milik situs web, hanya keluarga generik yang akan berfungsi
  • Jika memakai document.fonts.load("1em my-web-font") di JavaScript, Promise yang dikembalikan bisa reject
    • Selama 6 tahun dari 2020–2025, saya melihat sekitar 4 kasus yang rusak karena masalah ini, dan 2 di antaranya terjadi pada 2025

Selalu nyatakan keluarga fallback

  • Jika membutuhkan teks lebar tetap, monospace harus selalu dimasukkan ke dalam font-family
    • Tidak adanya monospace mungkin tidak terlihat bagi banyak pengguna, tetapi di sebagian lingkungan dapat merusak layout atau maksud karya
    • Sebagai contoh, ASCII might fly? karya Adel Faure pada saat penulisan tidak menyertakan monospace, sehingga bisa terlihat bukan dalam bentuk lebar tetap
  • serif atau sans-serif juga sebaiknya disertakan jika membutuhkan fallback untuk keluarga font yang diinginkan
    • Contoh: font-family: Arial, sans-serif;
    • Contoh: font-family: Times New Roman, serif;
    • Jika tidak dimasukkan, font default akan dipakai; font default mungkin saja serif, tetapi bisa juga sesuatu yang sama sekali berbeda

Kurangi daftar font yang kemungkinan terpasang

  • Cara mencantumkan panjang lebar font yang mungkin ada di sistem, seperti Arial, Helvetica, Helvetica Neue, Liberation Sans, Noto Sans, umumnya tidak banyak membantu
  • Khususnya Arial, saya menganggapnya tidak akan pernah menjadi pilihan yang lebih baik daripada sans-serif
  • sans-serif bisa ditafsirkan sebagai font yang tidak lebih buruk daripada font-font yang disebutkan, dan ada kemungkinan font yang lebih baik dipilih
  • Contoh deklarasi lebar tetap yang pernah saya lihat sebenarnya merupakan daftar yang terlalu panjang
    • font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif
    • Deklarasi ini secara ketat lebih buruk daripada font-family: monospace, monospace, dan monospace bisa ditafsirkan sebagai font yang tidak lebih buruk daripada daftar tersebut
  • Tidak perlu melarang sepenuhnya font non-web yang bernama, tetapi maksimal satu kira-kira sudah tepat
    • Georgia) dan Times New Roman sama-sama serif yang termasuk Core fonts for the Web dari Microsoft, tetapi karakternya berbeda
    • Georgia jauh lebih lebar daripada Times New Roman, jadi jika karakteristik itu dibutuhkan secara gaya, font-family: Georgia, serif adalah pilihan yang dapat diterima
  • modernfontstacks.com dan repositori memuat ide pemilihan font per platform
    • Namun, keduanya terlalu preskriptif terhadap font bernama, dan banyak di antaranya dinilai lebih baik dihapus
    • Penanganan Courier New sangat keliru, dan gambarnya tampak seperti dibuat dengan Courier di macOS

Pilihan memakai hanya keluarga generik

  • Jika daftar font yang terpasang lokal sudah dikurangi, Anda bisa meninjau kembali apakah web font benar-benar diperlukan
  • Web font lebih lambat dibanding kondisi tanpa web font, dan bisa menimbulkan masalah pemuatan
    • Karena itu ada font-display
    • Namun alih-alih menangani kompromi antara periode block/swap, penggambaran ulang, dan reflow, memakai font yang dimiliki pengguna apa adanya juga memungkinkan
  • Untuk monospace, memakai hanya keluarga generik juga merupakan pilihan
    • Di masa lalu, default monospace tidak bagus; khususnya Courier New#Courier_New) dari Microsoft didigitalisasi dengan buruk sehingga terlihat seperti weight 200–250 secara praktis, bukan 400
    • Kemudian Apple memperkenalkan Menlo), dan pada masa ketika default monospace browser belum diperbarui, orang mulai memasukkan Menlo ke stack font
    • Saat ini semua default browser sudah membaik, dan meskipun tidak hebat dalam semua kasus, setidaknya tidak lagi buruk
  • Anda bisa membuang daftar seperti Menlo, Monaco, Consolas, Bitstream Vera Sans Mono, Courier, Courier New dan menyisakan hanya monospace
  • Memasukkan Courier New secara sengaja ke dalam stack font dinilai sangat negatif

monospace, monospace dan perilaku browser

  • Jika font-family: monospace; digunakan secara eksplisit atau implisit, font-size bisa saja disetel default bukan ke 100%, melainkan mungkin 81.25%
    • Pengguna dapat mengubah font keluarga generik, ukuran huruf default, dan ukuran huruf lebar tetap default
  • Jika ada family kedua di daftar, perilaku ini tidak terjadi
    • font-family: my-web-font, monospace; aman
    • font-family: monospace, monospace; juga aman
    • Menentukan font-size secara langsung juga bisa dilakukan
  • Lightning CSS memiliki masalah yang merusak monospace, monospace
  • Masalah ini hanya memengaruhi monospace
  • Ada keinginan untuk meyakinkan browser agar membuang perilaku ukuran monospace ini, dan menaikkan nilai yang mungkin 13px menjadi mungkin 16px
    • Tempat pengusulannya bisa jadi CSSWG

Jangan gunakan system-ui dan ui-* untuk konten

  • Font UI ditujukan untuk teks UI pendek, bukan untuk konten panjang
  • Font UI mungkin tidak mendukung bahasa konten dengan baik
  • Sebagian pengguna sengaja memilih font UI sistem yang konyol, dan kabarnya ini cukup umum di sebagian komunitas Android
    • Ada kekhawatiran bahwa jika memakai system-ui, konten juga bisa terlihat seperti itu
  • w3c/csswg-drafts issue #3658 membahas berbagai masalah system-ui, dan memuat kesimpulan bahwa system-ui telah banyak disalahgunakan
  • mdn/content issue #41244 menambahkan note ke MDN yang memperingatkan penggunaan berlebihan
  • system-ui dan ui-* telah dipakai seperti proxy untuk mendapatkan font default yang lebih baik, tetapi penggunaan seperti ini tidak baik
  • Ada pandangan bahwa system-ui adalah sebuah kekeliruan
    • Pandangannya, seharusnya hanya -apple-system yang dibiarkan dan BlinkMacSystemFont dibuat berubah menjadi itu
    • Pada saat standardisasi, platform lain tidak memiliki konsep ekuivalen yang berguna, dan sekarang dianggap konsep itu sudah muncul di sebagian platform
    • Ini dipandang sebagian besar disalahgunakan untuk mengakali masalah browser yang tidak memperbarui default lama pada keluarga generik yang sudah ada
  • Ada pandangan bahwa ui-serif, ui-sans-serif, ui-monospace, terutama ui-rounded, adalah kekeliruan jelas yang seharusnya dihapus
    • Di lingkungan non-Apple, tidak diharapkan akan dipetakan ke font apa pun
    • Karena konsepnya sendiri hanya ada di platform Apple, seharusnya tidak dimasukkan ke standar
    • Jika Apple menyediakannya, bentuknya seharusnya memakai prefiks -apple seperti -apple-system
  • Web app memang memiliki use case yang sah untuk system-ui, tetapi kesannya dalam praktik hampir sepenuhnya disalahgunakan, dan intervensi penghapusan mungkin tidak buruk

Bacaan terkait

1 komentar

 
GN⁺ 12 jam lalu
Opini di Lobste.rs

  • Di https://lindenii.org dipilih pendekatan tidak menetapkan font-family sama sekali, sehingga menghormati font default yang dipilih pengguna di browser
    Secara pribadi saya lebih suka sans-serif, tetapi jika pengguna memakai serif sebagai default, rasanya tidak ada alasan kuat untuk menimpanya
    Namun, untuk kasus seperti https://runxiyu.org/soc/ta/ yang harus menggunakan karakter yang tidak ada di kebanyakan font, akhirnya tidak ada pilihan selain memakai web font, dan akibatnya sisa teks juga dipaksa menjadi sans-serif alih-alih memakai default pengguna
    Saya tidak tahu apakah ada cara yang lebih baik selain membungkus tiap karakter aneh dengan sesuatu seperti <unusual-character>, dan akan bagus juga kalau ada cara untuk menetapkan sesuatu seperti “font pilihan pengguna untuk kode”
    Trik monospace, monospace sangat membantu, dan perbedaan ukurannya memang cukup membingungkan

    • Untuk masalah kedua, menampilkan pengganti gambar di samping karakter yang tidak biasa mungkin juga merupakan fallback yang masuk akal
      Situs daftar karakter Unicode menangani hal seperti itu dengan cara tersebut
    • Di blog saya https://hauleth.dev saya melakukan hal yang mirip, tetapi memakai monospace
      Saya juga pernah dipuji untuk desain situsnya, tetapi sebenarnya saya hanya mengambil satu tema Zola lalu mengurangi CSS dan elemen kustom, jadi terutama untuk halaman pribadi saya cukup sependapat dengan gagasan tulisan ini
    • Soal tidak menetapkan font-family sama sekali, menurut saya akan lebih baik bagi pengguna jika font default bawaan browser berubah dari serif ke sans-serif
      Kebanyakan pengguna tidak memilih font sendiri, jadi tidak ada cara untuk membedakan antara “font yang dipilih pengguna” dan “font default browser”
      Saya suka serif, tetapi sekarang kemungkinan besar kebanyakan orang lebih menyukai sans-serif
      Di lingkungan saya, saya memblokir halaman agar tidak bisa menetapkan font, dan saya juga tidak memasang font CJK yang layak
      Karena meski muncul kotak seperti “4E2D” alih-alih hanzi, bagi saya itu toh tidak lebih bermakna daripada ideograf itu sendiri
      Penanganan fallback font seperti itu sudah dilakukan dengan baik, tetapi sayangnya tidak ada cara untuk langsung menetapkan nama font default
      Sebagai gantinya, lewat JavaScript kita bisa melihat getComputedStyle(document.documentElement).fontFamily pada dokumen kosong, dan sesuai pengaturan font lanjutan saya hasilnya "serif" atau "sans-serif"
      Saya kurang tahu persis apa yang dimaksud dengan “font pilihan untuk kode”; sepertinya yang dimaksud sesuatu selain monospace

  • Tulisan ini masih berupa draf, jadi memang belum selesai dan terasa agak berantakan karena mencampur dua atau tiga potongan dengan bentuk berbeda
    Mungkin nantinya akan menjadi lebih dari satu halaman dan bentuk akhirnya akan sangat berbeda dari sekarang, sebagian bahkan bisa berupa tulisan tangan, gambar tangan, atau tata letak manual
    Belakangan ini saya justru fokus pada implementasi bahasa markup ringan, dan sekarang kondisinya sudah hampir bisa dipakai, jadi terasa seperti 90% terakhir yang tak pernah benar-benar habis
    Setelah itu saya akan kembali menulis dan mempublikasikannya

  • Bagian bahwa jika memakai font-family: monospace;, font-size default bisa menjadi 81.25% alih-alih 100%, dan itu tidak terjadi jika ada font kedua dalam daftar, benar-benar menarik
    Artinya font-family: my-web-font, monospace; atau font-family: monospace, monospace; aman, tetapi tampaknya ini belum didokumentasikan di MDN
    Saya penasaran apakah ada yang bisa menjelaskan mengapa ini terjadi dan mengapa belum didokumentasikan

    • Kalau saya ingat benar, Firefox memang tidak melakukan penyesuaian ukuran font ini, sedangkan Chrome melakukannya
      Jadi ini juga menjadi sumber ketidakkonsistenan antar-browser
    • Mungkin maksudnya agar teks monospace terlihat secara visual sama besar dengan teks isi biasa

  • Meski ini draf, ada pengulangan aneh di dalam tulisan, seolah satu bagian disalin-tempel begitu saja sebagai bagian kedua
    Terutama karena nadanya terkesan mengatakan font monospace favorit saya tidak bagus, jadi agak mengganggu

    • Itu memang masih tersisa karena strukturnya sedang ditata ulang
      Kalau dibaca saksama, ada juga kontradiksi ringan karena saya masih memilah mana yang akan dijadikan rekomendasi tegas dan mana yang perlu mengambil posisi yang lebih bernuansa
      Saya penasaran font monospace favoritmu apa

  • Salah satu alasan tidak ingin dipaksa hanya memakai serif dan sans-serif adalah karena font serif default sering terasa kurang bagus, yaitu Times
    Karena itu saya sedang memindahkan font isi dari serif ke sans-serif

  • Terkait saran “jangan mencantumkan font yang kemungkinan ada terpasang di sistem” dan “untuk monospace juga sebisa mungkin pakai hanya keluarga umum”, di situs saya saya mengaturnya seperti ini
    Saya memakai --sans-serif: Adwaita Sans, Adwaita Sans Bundled, Inter, sans-serif; dan --monospace: Iosevka, Iosevka Web, Cascadia Code, monospace;
    Tujuannya adalah, jika Adwaita Sans terpasang di GNOME maka font sistem itu yang dipakai dan web font tidak perlu diunduh; jika tidak ada, dipakai web font Adwaita Sans Bundled, dan selama proses memuat ia fallback ke Inter dan sans-serif yang metriknya mirip
    Untuk monospace juga sama: jika sistem punya Iosevka, itu yang dipakai; jika tidak, dipakai web font Iosevka Web, dan selama memuat ia fallback ke Cascadia Code dan monospace
    Saya juga mempertimbangkan bahwa monospace di Windows adalah Consolas dan kurang bagus, sedangkan Windows baru sudah memasang Cascadia Code
    Saya tahu buruk kalau metrik Cascadia Code sangat berbeda dari Iosevka, tetapi saya penasaran bagaimana pendapat orang tentang pendekatan ini

    • Pengetahuan saya tentang pemrograman web hampir tidak ada, jadi mungkin saya melewatkan cara yang lebih baik untuk menentukan “unduh font hanya jika tidak terpasang di sistem”

  • Tulisannya rapi, dan saya sama sekali belum tahu soal trik monospace, monospace
    Ada masalah format kecil: di browser saya, teks paragraf .unimportant muncul di atas latar kuning tetapi berada di belakang teks bilah .status yang diposisikan tetap, jadi saat menggulir melewati bagian .unimportant tampilannya terasa aneh
    Hal serupa tampaknya juga terjadi pada watermark DRAFT diagonal