Manfaat yang Bisa Didapat dari Font Berkualitas Tinggi

• Fitur tersembunyi pada font: sumbu variabel, glyph alternatif, alternatif gaya, swash, angka, huruf kapital kecil (Small Caps), substitusi kontekstual

Sumbu variabel

• Font OpenType dapat memiliki satu atau lebih sumbu, dan tampilan font dapat diubah dengan mengubah nilai sumbu
• Sumbu yang paling umum adalah wght, yang mengatur ketebalan font
• Sumbu umum lainnya mencakup wdth (lebar), slnt (kemiringan), ital (italic), opsz (ukuran optik)
• Sumbu dapat dimanipulasi menggunakan properti CSS
• Karena properti font-variation-settings dapat menimbulkan masalah pewarisan, sebaiknya gunakan properti CSS yang lebih spesifik jika memungkinkan

Glyph alternatif

• Font dapat menyertakan glyph alternatif untuk karakter tertentu
• Glyph alternatif dapat mencakup berbagai gaya seperti angka, swash, dan ligatur

Alternatif gaya

• Alternatif gaya adalah fitur untuk mengaktifkan bentuk alternatif dari karakter tertentu
• salt mengaktifkan alternatif gaya untuk semua karakter
• Set gaya seperti ss01, ss02, dan seterusnya mengganti kumpulan karakter tertentu
• Variasi karakter seperti cv01, cv02, dan seterusnya mengganti satu karakter
• Glyph alternatif dapat diaktifkan menggunakan properti CSS font-feature-settings dan font-variant-alternates

Swash

• Beberapa font menyertakan swash yang dapat digunakan untuk menambahkan sedikit kepribadian pada judul
• Swash adalah elemen dekoratif yang dapat menambah karakter pada judul
• Swash dapat diaktifkan menggunakan font-feature-settings dan font-variant-alternates

Angka

• Font dapat menyertakan berbagai set glyph angka
• Angka dibagi menjadi lining atau old-style, serta tabular atau proporsional
• Angka tabular memiliki lebar yang sama, sedangkan angka proporsional memiliki lebar yang berbeda
• Angka lining memiliki tinggi yang sama dengan huruf kapital, sedangkan angka old-style memiliki tinggi yang sama dengan huruf kecil
• Gaya angka yang diinginkan dapat diatur menggunakan properti font-variant-numeric

Huruf kapital kecil

• Huruf kapital kecil adalah variasi huruf kapital yang menggantikan huruf kecil
• Huruf kapital kecil dapat diaktifkan menggunakan properti font-variant-caps
• Jika font tidak memiliki huruf kapital kecil, browser dapat mensintesiskannya

Substitusi kontekstual

• Substitusi kontekstual adalah fitur yang secara otomatis mengganti glyph berdasarkan karakter di sekitarnya
• Misalnya, -> dapat diganti menjadi panah, atau posisi @ dapat disesuaikan saat berada di antara huruf kapital
• Substitusi kontekstual aktif secara default, dan dapat dinonaktifkan menggunakan properti font-variant-ligatures

Ringkasan GN⁺

• Font berkualitas tinggi menyediakan beragam fitur, dan memanfaatkannya dapat sangat meningkatkan kualitas tipografi
• Sumbu variabel dan fitur glyph alternatif pada font OpenType sangat berguna
• Fitur seperti substitusi kontekstual memudahkan baik pengembang maupun pengguna

[halfenif]

Saya heran kenapa mendukung fitur font dengan benar bisa sesulit ini
> Ini masalah yang sudah ada sepanjang sejarah umat manusia.. seberapa banyak hal yang harus ditangani coba!

[seunggi]

Rendering font itu sulit

https://faultlore.com/blah/text-hates-you/

[wedding]

Saya benar-benar tidak pernah bisa terbiasa dengan ligature..

[GN⁺]

Komentar Hacker News

• Berguna saat angka perlu disejajarkan di beberapa baris
• Juga berguna untuk hal seperti jam atau hitung mundur
• Perubahan loncat pada waktu di layar sangat mengganggu
• Jika ingin memeriksa file font, disarankan memakai Wakamai Fondue
• Angka tabular adalah fitur yang sangat berguna
• Google Fonts hampir menghapus semua fitur OpenType tingkat lanjut untuk mengurangi ukuran file
  • Contoh: versi Google dari font Inter menyediakan 11 fitur, sedangkan versi lengkapnya menyediakan 44 fitur
• Font di halaman itu indah
• Penggunaan small caps keren, semoga lebih banyak situs web memakainya
• Mengecek apakah Berkeley Mono v2 sudah dirilis, ternyata belum
• Perilaku sumbu wght aneh; jika digeser ke bawah 400, teks menjadi lebih tipis sekaligus lebih rapat, tetapi jika digeser ke atas 400, teks hanya menjadi lebih tebal
• Untuk mendukung komentar, jsdocs, dan penyorotan sintaks lain dengan font berbeda di VSCode, perlu memakai ekstensi vscode-custom-css
  • Contoh:

    .mtki {
      font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
      font-style: italic !important;
      color: #757575 !important;
    }
    .comment {
      font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
      font-style: italic !important;
      color: #757575 !important;
    }
    .comment:not(.punctuation) {
      font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
      font-style: italic !important;
      color: #757575 !important;
    }
    

  • Fitur penanganan font di VSCode cukup banyak bug, jadi perlu banyak eksperimen
• Heran kenapa dukungan fitur font yang benar bisa sesulit ini
• Jika tertarik pada tipografi, disarankan Butterick's Practical Typography
  • Penuh dengan saran praktis untuk membuat dokumen cetak dan digital menjadi indah
  • Lisensi font miliknya sangat longgar, tanpa batasan jumlah page view
  • Font buatannya bukan open source, tetapi indah
  • Sudah membeli font Valkyrie dan Concourse, dan Concourse sangat fleksibel dalam alternatif kontekstual