CSS font-size-customize kini berada di Dasar Pengukuran

Rachel Andrew

Dipublikasikan: 23 Juli 2024

Properti font-size-adjust CSS tersedia di Chrome hari ini, dan menjadi bagian dari Dasar Pengukuran yang Baru Tersedia. Properti ini dapat membantu mencegah pergeseran tata letak saat font pengganti dimuat, dan memastikan keterbacaan font pengganti pada ukuran font yang lebih kecil. Properti font-size-adjust adalah bagian dari Interop 2024, sehingga ini adalah pencapaian lain untuk upaya meningkatkan interoperabilitas platform web.

Permasalahan

Saat Anda membandingkan dua font yang disetel ke ukuran yang sama, bergantung pada bentuk dan ukuran glif, teks yang ditampilkan dapat menghabiskan jumlah ruang yang sangat berbeda. Sebagai contoh, demo berikut menampilkan teks dalam Verdana dan Arial, yang keduanya disetel ke 16 piksel.

Teks ditampilkan pada 16 piksel dalam Verdana dan Arial.

Perbedaan ukuran ini disebabkan oleh fakta bahwa nilai aspek, tinggi huruf kecil jika dibandingkan dengan huruf besar dalam font, bervariasi di antara font.

Hal ini dapat menyebabkan dua masalah saat font dengan nilai aspek yang berbeda digunakan sebagai penggantian. Pertama, jumlah ruang yang digunakan oleh font akan berubah. Kedua, pilihan font pengganti Anda mungkin kurang mudah dibaca daripada font yang ditentukan pertama kali, terutama pada ukuran font kecil. Hal ini karena tinggi relatif huruf kecil terhadap huruf besar adalah faktor utama dalam keterbacaan.

Manfaat font-size-adjust

Properti font-size-adjust memungkinkan Anda menyesuaikan font pengganti agar lebih cocok dengan font pertama. Contoh berikut menunjukkan dua font yang ditampilkan sebelumnya, kali ini font kedua telah disesuaikan agar cocok dengan font pertama.

Menggunakan font-size-adjust.

Contoh ini menggunakan satu nilai, angka, yang menyesuaikan font menggunakan metrik font default ex-height. Ini adalah rasio tinggi x, tinggi x kecil dalam font terhadap ukuran font. Anda juga dapat menentukan metrik font yang digunakan. Pada contoh berikutnya, saya telah menormalisasi font menggunakan kata kunci ch-width, selain angka.

Menggunakan font-size-adjust dengan metrik font lebar ch.

Untuk melihat semua nilai yang memungkinkan, lihat dokumentasi MDN untuk font-size-adjust.

Sebaiknya lihat situs Anda menggunakan font pengganti dan lihat apakah sedikit penyesuaian dengan font-size-adjust dapat membantu pembaca yang menggunakan font pengganti mendapatkan pengalaman yang lebih baik, terutama sekarang font tersebut tersedia di mana saja.