Perbaikan penggantian font

Katie Hempenius

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 memilih untuk tidak membaca artikel ini, berikut beberapa alat yang dapat Anda gunakan untuk segera mulai menggunakan API ini:

Alat framework:

• @next/font: Mulai Next 13, next/font 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 membuat dan menyisipkan penggantian font yang cocok secara otomatis ke dalam stylesheet yang digunakan oleh aplikasi Nuxt Anda.

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 ini dapat disalin dan ditempel ke dalam stylesheet Anda.

Latar belakang

Font pengganti adalah tampilan font yang digunakan saat tampilan font utama belum dimuat, atau tidak memiliki glif 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—tetapi, secara historis, hal ini mengorbankan 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 tampilan font pengganti yang menggunakan jumlah ruang yang sama dengan font web.

Penggantian font yang ditingkatkan

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

Cara kerja penggantian metrik font

Pengantar

Penggantian metrik font menyediakan cara untuk mengganti kenaikan, penurunan, dan spasi baris font:

• Ascent mengukur jarak terjauh yang diperluas glyph font di atas dasar pengukuran.
• Descent mengukur jarak terjauh yang diperluas glyph font di bawah garis dasar.
• Jarak baris, juga disebut "leading", mengukur jarak antarbaris teks yang berurutan.

Penggantian metrik font dapat digunakan untuk mengganti kenaikan, penurunan, dan spasi baris font pengganti agar cocok dengan kenaikan, penurunan, dan spasi baris font web. Akibatnya, 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 menghasilkan nilai penggantian 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 lain, 1000 (petak 1000x1000) atau 2048 (petak 2048x2048) sejauh ini adalah yang paling populer. Penting untuk mengetahui UPM agar dapat menempatkan metrik lainnya dalam perspektif. Misalnya, kenaikan 900 berarti hal yang sangat berbeda, bergantung pada apakah font memiliki UPM 1000 atau 2048.

Misalnya, berikut 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 berikutnya dalam artikel ini menjelaskan cara mendapatkan nilai ini.

Membaca tabel font

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

Menggunakan FontForge untuk melihat metadata font

Berikut 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 ukuran dan tata letak font. 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.

Catatan: Beberapa library JavaScript terkait font memperkirakan kenaikan, penurunan, dan spasi baris dengan menggambar glyph ke kanvas dan mengukur hasilnya. Namun, pendekatan ini kurang akurat dibandingkan 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. 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*.

Catatan: Secara lebih spesifik, 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 agar desainer dapat menetapkan preferensi antara penggunaan metrik typo* dan win*.

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

	Mac	Windows
Kromium	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 mengetahui informasi selengkapnya tentang cara kerja metrik font di seluruh sistem operasi, lihat artikel tentang metrik vertikal.

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 yang berlaku dan tidak berlaku untuk hal ini.

Jika Anda menggunakan font yang memerlukan 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.

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

• Jika USE_TYPO_METRICS diaktifkan, font akan dirender menggunakan metrik hhea di 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 di perangkat OSX dan metrik win di perangkat Windows.
• Untuk menghitung tinggi garis 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 sama.

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 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 ukuran aslinya.

size-adjust sendiri memiliki aplikasi terbatas untuk meningkatkan penggantian font: dalam sebagian besar kasus, font penggantian perlu dipersempit atau sedikit diperlebar (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 cara size-adjust digunakan dalam 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%;
}

Catatan: Penggantian metrik font dan size-adjust dideklarasikan menggunakan persentase—tetapi persentase ini ditentukan secara berbeda: misalnya, size-adjust: 10% menskalakan font menjadi 1/10 ukuran aslinya; sedangkan ascent-override: 10% tidak selalu membuat font lebih kecil—sebaliknya, ascent-override: 10% mengubah proporsi font (yaitu, ukuran kenaikan akan sama dengan 10% UPM).

Menghitung penggantian metrik font dan penyesuaian ukuran

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, naik, turun, dan spasi baris) dapat dibaca langsung dari metadata font web. Namun, avgCharacterWidth perlu diperkirakan.

Mengalikan lebar karakter rata-rata

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

Catatan: Font dapat berupa spasi tunggal atau lebar tetap: dalam font spasi tunggal, semua karakter menggunakan ruang horizontal yang sama; pada font dengan lebar tetap, karakter memiliki lebar yang berbeda. Font dengan spasi lebar sama biasanya digunakan di IDE—tetapi di web, font ini biasanya kurang umum daripada font dengan lebar tetap.

Catatan: Untuk memudahkan, artikel ini merujuk pada "lebar" glyph. Meskipun sebenarnya terminologi ini tidak salah—"maju", "lebar maju", atau "pergerakan horizontal" adalah terminologi yang biasanya digunakan dalam bidang tipografi.

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

Lebar glyph Roboto

Namun, memberi bobot yang sama pada semua karakter kemungkinan akan membuat lebar huruf yang sering digunakan (misalnya, e) menjadi lebih kecil dan lebar huruf yang jarang digunakan (misalnya, z) menjadi lebih besar.

Pendekatan yang lebih kompleks yang meningkatkan akurasi adalah dengan mempertimbangkan frekuensi huruf dan menghitung lebar rata-rata karakter [a-z\s] yang diberi bobot frekuensi. Artikel ini adalah referensi yang baik untuk frekuensi huruf dan panjang kata rata-rata 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 kumpulan karakter lainnya. Kami sangat ingin mendengar pengalaman Anda menggunakan teknik ini dengan konten yang bukan dalam bahasa Inggris.

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

Memilih pendekatan

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

• Menggunakan penggantian metrik font saja adalah pendekatan yang baik untuk digunakan jika Anda baru mulai mengoptimalkan penggantian font. Meskipun ini adalah pendekatan yang lebih sederhana dari kedua pendekatan tersebut, pendekatan ini biasanya cukup efektif untuk mengurangi magnitudo pergeseran tata letak terkait font secara signifikan.

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

Catatan: Anda mungkin bertanya-tanya mengapa Anda tidak dapat menetapkan line-height tetap, bukan menggunakan penggantian metrik font atau size-adjust. Meskipun line-height terkadang dapat berhasil digunakan untuk mengurangi atau menghilangkan pergeseran tata letak terkait font—praktik ini tidak direkomendasikan. Penggantian metrik font dan size-adjust mengatasi masalah utama di balik ketidakcocokan font web/font pengganti—line-height tidak (line-height menetapkan tinggi kotak baris CSS). Selain itu, Anda mungkin menemukan bahwa menggunakan line-height untuk tujuan ini lebih membingungkan daripada yang Anda perkirakan. Artikel ini adalah ringkasan yang bagus tentang hal-hal yang perlu diperhatikan 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 mencoba menemukan font lokal yang mendekati font web. Saat memilih font lokal, penting untuk diingat bahwa sangat sedikit font yang memiliki ketersediaan lokal yang luas dan tidak ada satu font pun 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, kedua font ini tidak tersedia di Android (Roboto adalah satu-satunya font sistem di Android).

Contoh di bawah menggunakan tiga font penggantian untuk memastikan cakupan perangkat yang luas: font penggantian yang menargetkan perangkat Windows/Mac, font penggantian yang menargetkan perangkat Android, dan font penggantian yang menggunakan keluarga 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 untuk melakukannya, Anda harus mengetahui sistem operasi pengguna. Misalnya, "Calibri", "Lucinda Sans", dan "Impact" adalah font yang tersedia secara luas di Windows—tetapi tidak di sistem operasi lainnya.

Permintaan masukan

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