Perbaikan penggantian font

Katie Hempenius
Katie Hempenius
X

Ringkasan

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

Jika Anda lebih suka melewatkan artikel ini, berikut beberapa alat yang dapat Anda gunakan untuk mulai menggunakan API ini dengan segera:

Alat framework:

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

Alat non-framework:

  • Fontaine: Fontaine adalah library yang secara 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-nilai ini dapat disalin dan ditempelkan ke stylesheet.

Latar belakang

Font penggantian adalah tampilan font yang digunakan saat bentuk 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 lebih cepat (yaitu, dengan menggunakan font-display: swap). Hasilnya, konten halaman lebih mudah dibaca dan berguna—namun, secara historis, hal ini mengakibatkan ketidakstabilan tata letak: pergeseran tata letak biasanya terjadi saat font pengganti 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 font web.

Perbaikan penggantian font

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

Cara kerja penggantian metrik font

Pengantar

Penggantian metrik font memberikan cara untuk mengganti pertambahan, penurunan, dan celah baris font:

  • Ascent mengukur jarak terjauh yang direntangkan oleh glyph font di atas dasar pengukuran.
  • Turunan mengukur jarak terjauh yang direntangkan glyph font di bawah dasar pengukuran.
  • Kesenjangan garis, juga disebut "awal", mengukur jarak antara baris teks yang berurutan.

Diagram yang menggambarkan peningkatan, penurunan, dan celah garis font.

Penggantian metrik font dapat digunakan untuk mengganti naik, turun, dan line-gap font fallback agar cocok dengan kenaikan, penurunan, dan celah baris font web. Hasilnya, font web dan font penggantian yang disesuaikan akan selalu memiliki dimensi vertikal yang sama.

Penggantian metrik font digunakan di 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 membuat 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

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 tersebut.

Membaca tabel font

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

Screenshot kotak dialog Font Information di FontForge. Kotak dialog menampilkan metrik font seperti 'Typo Ascent', 'Typo Descent', dan 'Typo Line Gap'.
Menggunakan FontForge untuk melihat metadata font

Berikut adalah beberapa alat yang dapat Anda gunakan untuk membaca metadata font:

  • fontkit adalah mesin font yang dibuat untuk Node.js. Cuplikan kode ini menunjukkan cara menggunakan fontkit untuk menghitung penggantian metrik font.
  • Capsize adalah library untuk mengubah ukuran font dan 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 yang 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.

Memahami tabel font

Anda mungkin melihat bahwa konsep seperti "naik" dirujuk oleh beberapa metrik—misalnya, ada metrik hheaAscent, typoAscent, dan winAscent. Ini adalah hasil dari sistem operasi yang berbeda yang menggunakan pendekatan yang berbeda terhadap rendering font: program di perangkat OSX umumnya menggunakan metrik font hhea*—sedangkan program di perangkat Windows umumnya menggunakan metrik font typo* (juga disebut sebagai sTypo*) atau 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 "salah ketik" jika "USE_TYPO_METRICS" telah ditetapkan, jika tidak, akan menggunakan metrik dari tabel "menang".
Firefox Menggunakan metrik dari tabel "salah ketik" jika "USE_TYPO_METRICS" telah ditetapkan, jika tidak, akan menggunakan metrik dari tabel "hhea". Menggunakan metrik dari tabel "salah ketik" jika "USE_TYPO_METRICS" telah ditetapkan, jika tidak, akan menggunakan metrik dari tabel "menang".
Safari Menggunakan metrik dari tabel "hhea". Menggunakan metrik dari tabel "salah ketik" jika "USE_TYPO_METRICS" telah ditetapkan, jika tidak, akan menggunakan metrik dari tabel "menang".

Untuk informasi selengkapnya tentang cara kerja metrik font di berbagai 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. Repositori ini memberikan informasi tentang jenis font yang berlaku dan tidak berlaku.

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

Menggunakan penggantian metrik font

Karena penggantian metrik font dihitung menggunakan pengukuran yang berasal dari metadata font web (dan bukan font penggantian), penggantian tersebut tetap sama terlepas dari font mana yang digunakan sebagai font pengganti. 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 secara proporsional menskalakan lebar dan tinggi glyph font. Misalnya, size-adjust: 200% menskalakan glyph font menjadi dua kali ukuran aslinya; size-adjust: 50% menskalakan glyph font menjadi setengah dari ukuran aslinya.

Diagram yang menampilkan hasil penggunaan 'sesuaikan ukuran: 50%' dan 'sesuaikan ukuran: 200%'.

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

Berikut ini cara penggunaan size-adjust 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 size-adjust dihitung (yang dijelaskan di bagian berikutnya), nilai size-adjust (dan penggantian metrik font terkait) 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%;
}

Menghitung penyesuaian ukuran dan penggantian metrik font

Berikut adalah persamaan untuk menghitung size-adjust dan penggantian 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, pendakian, turunan, dan celah baris) dapat dibaca langsung dari metadata font web. Namun, avgCharacterWidth harus diperkirakan.

Memperkirakan lebar karakter rata-rata

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

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

Grafik yang membandingkan lebar glyph Roboto [a-zs] individual.
Lebar glyph Roboto

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

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

Grafik yang menunjukkan frekuensi huruf untuk bahasa Inggris.
Frekuensi huruf dalam bahasa Inggris

Memilih pendekatan

Dua 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 adalah pendekatan yang lebih sederhana di antara dua pendekatan ini—ini biasanya cukup ampuh untuk mengurangi besarnya pergeseran tata letak terkait font.

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

Memilih font pengganti

Teknik yang dijelaskan dalam artikel ini bergantung pada penggunaan penggantian metrik font dan size-adjust untuk mentransformasi font lokal yang tersedia secara luas—alih-alih mencoba menemukan font lokal yang sangat mendekati font web. Saat memilih font lokal, ingat bahwa sangat sedikit font yang memiliki ketersediaan lokal secara luas dan tidak ada font tunggal yang akan ada 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, font ini tidak tersedia di Android (Roboto adalah satu-satunya font sistem di Android).

Contoh di bawah ini menggunakan tiga font penggantian untuk memastikan cakupan perangkat yang luas: font penggantian yang menargetkan perangkat Windows/Mac, font pengganti 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%;
}

Minta masukan

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