Perbaikan penggantian font

Katie Hempenius

Twitter

Ringkasan

Artikel ini membahas secara mendalam penggantian font dan API size-adjust, ascent-override, descent-override, dan line-gap-override. API ini memungkinkan penggunaan font lokal untuk membuat tampilan font pengganti yang hampir atau sama persis dengan dimensi font web. Tindakan ini akan mengurangi atau menghilangkan pergeseran tata letak yang disebabkan oleh pertukaran font.

Jika Anda lebih memilih untuk melewatkan membaca artikel ini, berikut adalah beberapa alat yang dapat Anda gunakan untuk mulai menggunakan API ini segera:

Alat framework:

• @next/font: Mulai Next 13, next/font otomatis menggunakan penggantian metrik font dan size-adjust untuk menyediakan penggantian font yang cocok.
• @nuxtjs/fontaine: Mulai dari Nuxt 3, Anda dapat menggunakan nuxt/fontaine untuk otomatis membuat dan menyisipkan pengganti font yang cocok ke stylesheet yang digunakan oleh aplikasi Nuxt Anda.

Alat non-framework:

• Fontaine: Fontaine adalah library yang otomatis membuat dan menyisipkan penggantian font yang menggunakan penggantian metrik font.
• Repositori ini berisi penggantian metrik font untuk semua font yang dihosting oleh Google Fonts. Nilai ini dapat disalin dan ditempelkan ke stylesheet Anda.

Latar belakang

Font pengganti adalah tampilan font yang digunakan saat tampilan font utama belum dimuat, atau tidak memiliki glyph yang diperlukan untuk merender konten halaman. Misalnya, CSS di bawah menunjukkan bahwa jenis font sans-serif harus digunakan sebagai penggantian font untuk "Roboto".

font-family: "Roboto" , sans-serif;

Font pengganti dapat digunakan untuk merender teks dengan lebih cepat (yaitu dengan menggunakan font-display: swap). Akibatnya, konten halaman dapat dibaca dan berguna lebih awal—namun, secara historis, hal ini menyebabkan ketidakstabilan tata letak: pergeseran tata letak biasanya terjadi saat font penggantian diganti dengan font web. Namun, API baru yang dibahas di bawah ini dapat mengurangi atau menghilangkan masalah ini dengan memungkinkan pembuatan tampilan font pengganti yang menggunakan jumlah ruang yang sama dengan pasangan font webnya.

Perbaikan penggantian font

Ada dua kemungkinan pendekatan untuk menghasilkan fallback font yang "ditingkatkan". Pendekatan yang lebih sederhana hanya menggunakan metrik font yang menggantikan API. Pendekatan yang lebih rumit (tetapi lebih canggih) menggunakan metrik font yang menggantikan API dan size-adjust. Artikel ini menjelaskan kedua pendekatan ini.

Cara kerja penggantian metrik font

Pengantar

Penggantian metrik font menyediakan cara untuk mengganti naik, turun, dan selisih baris font:

• Pendakian mengukur jarak terjauh yang diperluas glyph font di atas garis dasar.
• Penurunan mengukur jarak terjauh yang diperpanjang glyph font di bawah garis dasar.
• Perbedaan baris, juga disebut "di awal", mengukur jarak antara baris teks yang berurutan.

Penggantian metrik font dapat digunakan untuk mengganti naik, turun, dan jeda baris dari font pengganti agar sesuai dengan kenaikan, penurunan, dan kesenjangan baris font web. Akibatnya, font web dan font pengganti yang disesuaikan akan selalu memiliki dimensi vertikal yang sama.

Penggantian metrik font digunakan dalam stylesheet seperti ini:

body {
    font-family: Poppins, "fallback for poppins";
}

@font-face {
    font-family: "fallback for poppins";
    src: local("Times New Roman");
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 10%;
}

Alat yang tercantum di awal artikel ini dapat menghasilkan nilai pengganti metrik font yang benar. Namun, Anda juga dapat menghitung nilai ini sendiri.

Menghitung penggantian metrik font

Persamaan berikut menghasilkan penggantian metrik font untuk font web tertentu. Nilai penggantian metrik font harus ditulis sebagai persentase (misalnya, 105%), bukan desimal.

ascent-override = ascent/unitsPerEm
descent-override = descent/unitsPerEm
line-gap-override = line-gap/unitsPerEm

Catatan: Unit per em (UPM) mengacu pada ukuran petak yang digunakan saat mendesain font. Meskipun ada ukuran petak lainnya, 1000 (petak 1000x1000) atau 2048 (petak 2048x2048) sejauh ini adalah yang paling populer. Penting untuk mengetahui UPM agar dapat memahami metrik lainnya. Misalnya, kenaikan 900 berarti hal yang sangat berbeda, bergantung pada apakah font memiliki UPM 1000 atau 2048.

Misalnya, berikut ini adalah penggantian metrik font untuk font Poppins:

/*
Poppins font metrics:
ascent = 1050
descent = 350
line-gap = 100
UPM: 1000
*/

ascent-override: 105%;  /* = 1050/1000 */
descent-override: 35%;  /* = 350/1000 */
line-gap-override: 10%; /* = 100/1000 */

Nilai ascent, descent, line-gap, dan unitsPerEm semuanya berasal dari metadata font web. Bagian selanjutnya dari artikel ini menjelaskan cara mendapatkan nilai ini.

Membaca tabel font

Metadata font (khususnya, tabel font) berisi semua informasi yang akan Anda perlukan untuk menghitung penggantian metrik font.

Menggunakan FontForge untuk melihat metadata font

Berikut adalah beberapa alat yang dapat Anda gunakan untuk membaca {i>metadata<i} suatu {i>font<i}:

• fontkit adalah mesin font yang dibuat untuk Node.js. Cuplikan kode ini menunjukkan cara menggunakan fontkit untuk menghitung penggantian metrik font.
• Capsize adalah ukuran font dan library tata letak. Capsize menyediakan API untuk mendapatkan informasi tentang berbagai metrik font.
• fontdrop.info adalah situs yang memungkinkan Anda melihat tabel font dan informasi terkait font lainnya dari browser.
• Font Forge adalah editor font desktop populer. Untuk melihat ascent, descent, dan line-gap: buka dialog Font Info, pilih menu OS/2, lalu pilih tab Metrics. Untuk melihat UPM: buka dialog Font Info, lalu pilih menu General.

Catatan: Beberapa library JavaScript terkait font memperkirakan pendakian, penurunan, dan kesenjangan garis dengan menggambar glyph ke kanvas dan mengukur hasilnya. Namun, pendekatan ini kurang akurat dibandingkan dengan membaca metrik font langsung dari tabel font.

Memahami tabel font

Anda mungkin melihat bahwa konsep seperti "naik" dirujuk oleh beberapa metrik—misalnya, ada metrik hheaAscent, typoAscent, dan winAscent. Hal ini disebabkan oleh sistem operasi yang berbeda mengambil pendekatan yang berbeda untuk rendering font: program pada perangkat OSX umumnya menggunakan metrik font hhea*—sementara program di perangkat Windows umumnya menggunakan metrik font typo* (juga disebut sebagai sTypo*) atau win*.

Catatan: Lebih khusus lagi, program di perangkat Windows biasanya mengikuti konvensi penggunaan metrik typo* jika font telah menetapkan USE_TYPO_METRICS dan menggunakan metrik win* jika tidak. USE_TYPO_METRICS adalah parameter boolean yang diperkenalkan untuk memungkinkan desainer menetapkan preferensi antara menggunakan metrik typo* dan win*.

Bergantung pada font, browser, dan sistem operasi, font akan dirender menggunakan metrik hhea, typo, atau win.

	Mac	Windows
Chromium	Menggunakan metrik dari tabel "hhea".	Menggunakan metrik dari tabel "typo" jika "USE_TYPO_METRICS" telah ditetapkan. Jika tidak, menggunakan metrik dari tabel "win".
Firefox	Menggunakan metrik dari tabel "typo" jika "USE_TYPO_METRICS" telah ditetapkan. Jika tidak, menggunakan metrik dari tabel "hhea".	Menggunakan metrik dari tabel "typo" jika "USE_TYPO_METRICS" telah ditetapkan. Jika tidak, menggunakan metrik dari tabel "win".
Safari	Menggunakan metrik dari tabel "hhea".	Menggunakan metrik dari tabel "typo" jika "USE_TYPO_METRICS" telah ditetapkan. Jika tidak, menggunakan metrik dari tabel "win".

Untuk informasi selengkapnya tentang cara kerja metrik font di seluruh sistem operasi, lihat artikel tentang metrik vertikal ini.

Kompatibilitas lintas perangkat

Untuk sebagian besar font (misalnya, ~90% font yang dihosting oleh Google Fonts), penggantian metrik font dapat digunakan dengan aman tanpa mengetahui sistem operasi pengguna: dengan kata lain, untuk font ini, nilai ascent-override, descent-override, dan linegap-override tetap sama persis terlepas dari apakah metrik hhea, typo, atau win berlaku. Repo ini memberikan informasi tentang font mana yang dapat diterapkan dan tidak diterapkan.

Jika Anda menggunakan font yang mengharuskan penggunaan kumpulan penggantian metrik font yang terpisah untuk perangkat OSX dan Windows, penggunaan penggantian metrik font dan size-adjust hanya disarankan jika Anda dapat memvariasikan stylesheet berdasarkan sistem operasi pengguna.

Catatan: Bagian ini menjelaskan cara menentukan apakah font menggunakan penggantian metrik font yang sama pada perangkat OSX dan Windows. Pertama, tentukan apakah font telah mengaktifkan USE_TYPO_METRICS.

• Jika USE_TYPO_METRICS diaktifkan, font akan dirender menggunakan metrik hhea pada perangkat OSX dan metrik typo di perangkat Windows.
• Untuk menghitung tinggi baris normal di OSX, gunakan persamaan berikut: (hheaAscent + hheaDescent + hheaLineGap)/unitsPerEm.
• Untuk menghitung tinggi baris normal di Windows, gunakan persamaan berikut: (typoAscent + typoDescent + typoLineGap)/unitsPerEm.
• Jika tinggi baris di OSX dan Windows sama, Anda dapat menggunakan penggantian metrik font yang sama untuk kedua sistem operasi.
• Jika USE_TYPO_METRICS tidak diaktifkan, font akan dirender menggunakan metrik hhea pada perangkat OSX dan metrik win pada perangkat Windows.
• Untuk menghitung tinggi baris normal di OSX, gunakan persamaan berikut: (hheaAscent + hheaDescent + hheaLineGap)/unitsPerEm.
• Untuk menghitung tinggi baris normal di Windows, gunakan persamaan berikut: (winAscent + winDescent)/unitsPerEm. (Catatan: tidak ada yang namanya winLineGap).
• Jika kedua kondisi berikut benar, Anda dapat menggunakan penggantian metrik font yang sama di OSX dan Windows: a) hheaLineGap == 0, b) tinggi baris di OSX dan Windows.

Menggunakan penggantian metrik font

Karena penggantian metrik font dihitung menggunakan pengukuran yang berasal dari metadata font web (dan bukan font pengganti), font tersebut akan tetap sama, terlepas dari font mana yang digunakan sebagai font penggantian. Contoh:

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: "fallback for Poppins";
  src: local("Arial");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

@font-face {
  font-family: "another fallback for Poppins";
  src: local("Roboto");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

Cara kerja penyesuaian ukuran

Pengantar

Deskripsi CSS size-adjust menskalakan lebar dan tinggi glyph font secara proporsional. Misalnya, size-adjust: 200% menskalakan glyph font menjadi dua kali ukuran aslinya; size-adjust: 50% menskalakan glyph font menjadi setengah dari ukuran aslinya.

Dengan sendirinya, size-adjust memiliki aplikasi terbatas untuk meningkatkan penggantian font: dalam sebagian besar kasus, font pengganti harus dipersempit atau diperlebar sedikit (bukan diskalakan secara proporsional) agar cocok dengan font web. Namun, menggabungkan size-adjust dengan penggantian metrik font memungkinkan dua font cocok satu sama lain secara horizontal dan vertikal.

Berikut adalah cara size-adjust digunakan di stylesheet:

@font-face {
  font-family: "fallback for poppins";
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

Karena cara penghitungan size-adjust (yang dijelaskan di bagian berikutnya), nilai size-adjust (dan metrik font yang sesuai mengganti) akan berubah, bergantung pada font penggantian yang digunakan:

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

Catatan: Penggantian metrik font dan size-adjust dideklarasikan menggunakan persentase—tetapi persentase ini ditentukan secara berbeda: misalnya, size-adjust: 10% menskalakan font ke 1/10 ukuran aslinya; sedangkan ascent-override: 10% tidak serta-merta membuat font lebih kecil—melainkan, perubahan ini proporsi font (yaitu, ukuran peningkatan akan sama dengan 10% dari UPM).

Menghitung penyesuaian ukuran dan penggantian metrik font

Berikut adalah persamaan untuk menghitung penggantian size-adjust dan metrik font:

size-adjust = avgCharacterWidth of web font / avgCharacterWidth of fallback font
ascent-override = web font ascent / (web font UPM * size-adjust)
descent-override = web font descent / (web font UPM * size-adjust)
line-gap-override = web font line-gap / (web font UPM * size-adjust)

Sebagian besar input ini (yaitu, naik, turun, dan jeda baris) dapat dibaca langsung dari metadata font web. Namun, avgCharacterWidth perlu merupakan perkiraan.

Memperkirakan lebar karakter rata-rata

Secara umum, lebar karakter rata-rata hanya dapat diperkirakan—tetapi ada beberapa skenario yang dapat menghitungnya dengan tepat: misalnya, saat menggunakan font spasi tunggal atau saat konten string teks diketahui sebelumnya.

Catatan: Font dapat dijadikan spasi tunggal atau tetap dengan lebar tetap: dalam font spasi tunggal, semua karakter menempati jumlah ruang horizontal yang sama; dalam font dengan lebar tetap, lebar karakternya berbeda. Font dengan spasi tunggal biasanya digunakan di IDE, tetapi di web, font tersebut biasanya kurang umum dibandingkan font dengan lebar tetap.

Catatan: Agar lebih sederhana, artikel ini merujuk pada "lebar" glyph. Meskipun terminologi ini tidak salah per se—"maju", "lebar maju", atau "kemajuan horizontal" adalah terminologi yang biasanya digunakan di bidang tipografi.

Contoh pendekatan naif untuk menghitung avgCharacterWidth adalah mengambil lebar rata-rata semua karakter [a-z\s].

Lebar glyph Roboto

Namun, pembobotan semua karakter secara merata kemungkinan akan mengurangi lebar huruf yang sering digunakan (misalnya, e) dan kelebihan lebar huruf yang jarang digunakan (misalnya, z).

Pendekatan lebih kompleks yang meningkatkan akurasi adalah mempertimbangkan frekuensi huruf dan sebagai gantinya menghitung lebar rata-rata berbobot frekuensi dari [a-z\s] karakter. Artikel ini adalah referensi yang baik untuk frekuensi huruf dan rata-rata panjang kata teks bahasa Inggris.

Frekuensi huruf dalam bahasa Inggris

Catatan: Artikel ini membahas cara menghitung avgCharacterWidth untuk penggantian font yang akan digunakan dengan teks bahasa Inggris, tetapi konsep yang sama ini juga dapat diterapkan ke bahasa dan himpunan karakter lainnya. Kami ingin sekali mendengar pengalaman Anda menggunakan teknik ini dengan konten yang tidak berbahasa Inggris.

Catatan: Pendekatan lain yang memungkinkan untuk memperkirakan avgCharacterWidth adalah dengan menggunakan xAvgCharWidth. xAvgCharWidth adalah nilai yang telah terisi otomatis dan ada dalam tabel OS/2 font. Namun, perhatikan bahwa metrik ini tidak selalu benar—misalnya, banyak alat subsetelan font tidak mengupdate xAvgCharWidth saat glyph ditambahkan atau dihapus dari font. Selain itu, meskipun xAvgCharWidth dihitung dengan benar, metodologi untuk menghitung xAvgcharWidth telah berubah selama bertahun-tahun: nilai xAvgCharWidth akan bervariasi bergantung pada versi tabel OS/2 yang digunakan oleh font.

Memilih pendekatan

Kedua pendekatan yang dibahas dalam artikel ini masing-masing memiliki kelebihan dan kekurangan:

• Menggunakan penggantian metrik font sendiri adalah pendekatan yang baik untuk digunakan jika Anda mulai mengoptimalkan penggantian font. Meskipun ini lebih sederhana dari dua pendekatan tersebut—biasanya cukup ampuh untuk secara nyata mengurangi besarnya pergeseran tata letak terkait font.

• Di sisi lain, jika Anda menginginkan presisi yang lebih baik serta bersedia melakukan lebih banyak pekerjaan dan pengujian, memasukkan size-adjust adalah pendekatan yang baik untuk digunakan. Bila diimplementasikan dengan benar, pendekatan ini bisa secara efektif menghilangkan pergeseran tata letak terkait font.

Catatan: Anda mungkin bertanya-tanya mengapa Anda tidak bisa menetapkan line-height tetap, bukan menggunakan penggantian metrik font atau size-adjust. Meskipun line-height terkadang berhasil digunakan untuk mengurangi atau menghilangkan pergeseran tata letak terkait font—praktik ini tidak direkomendasikan. Penggantian metrik font dan size-adjust mengatasi akar masalah di balik ketidakcocokan font/font pengganti web—line-height tidak (line-height menetapkan tinggi kotak baris CSS). Selain itu, Anda mungkin mendapati bahwa menggunakan line-height untuk tujuan ini lebih membingungkan daripada yang Anda perkirakan. Artikel ini adalah ringkasan yang baik tentang hal-hal yang perlu diketahui saat menggunakan line-height.

Memilih font pengganti

Teknik yang dijelaskan dalam artikel ini mengandalkan penggunaan penggantian metrik font dan size-adjust untuk mengubah font lokal yang tersedia secara luas—bukan berupaya menemukan font lokal yang mendekati font web. Ketika memilih {i>font<i} lokal, penting untuk diingat bahwa sangat sedikit {i>font<i} yang memiliki ketersediaan lokal yang luas dan tidak akan ada satu {i>font <i}di semua perangkat.

Arial adalah font pengganti yang direkomendasikan untuk font sans-serif dan Times New Roman adalah font pengganti yang direkomendasikan untuk font serif. Namun, tak satu pun dari font ini yang tersedia di Android (Roboto adalah satu-satunya font sistem di Android).

Contoh di bawah ini menggunakan tiga font penggantian untuk memastikan cakupan perangkat cakupan lebar: font penggantian yang menargetkan perangkat Windows/Mac, font penggantian yang menargetkan perangkat Android, dan font penggantian yang menggunakan jenis font generik.

body {
  font-family: "Poppins", poppins-fallback, poppins-fallback-android, sans-serif;
}

/*
Poppins font metrics:
- ascent = 1050
- descent = 350
- line-gap = 100
- UPM: 1000
AvgCharWidth:
- Poppins: 538.0103768
- Arial: 884.1438804
- Roboto: 969.0502537
*/

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

Catatan: Ada font lokal lain yang dapat digunakan sebagai penggantian font, tetapi Anda harus mengetahui sistem operasi pengguna untuk melakukannya. Misalnya, "Calibri", "Lucinda Sans", dan "Impact" adalah font yang semuanya tersedia secara luas di Windows, tetapi tidak di sistem operasi lain.

Minta masukan

Hubungi kami jika ada masukan tentang pengalaman Anda menggunakan penggantian metrik font dan size-adjust.