Wawancara Frontend: Bagaimana cara menggunakan font-size-adjust untuk menjaga keterbacaan teks fallback?

Permintaan dan konteks

Sebuah sistem desain menggunakan font merek, tetapi kondisi jaringan, lisensi, atau cakupan skrip dapat membuat peramban menggunakan fallback. Jelaskan bagaimana font-size-adjust dapat mengurangi lonjakan ukuran huruf kecil (lowercase) yang terlihat dan perbedaannya dengan penyesuaian ukuran teks otomatis di perangkat seluler (text autosizing).

Hal yang diuji oleh pewawancara

• Pemahaman bahwa x-height dan ukuran font adalah metrik yang berbeda.
• Kemampuan untuk menentukan kalibrasi fallback, pemuatan, dan batasan peningkatan progresif (progressive enhancement).
• Kemampuan untuk menggabungkan konsistensi visual, cakupan skrip, dan pemeriksaan aksesibilitas.

Pertanyaan untuk diklarifikasi terlebih dahulu

1. Skrip apa saja yang dicakup oleh font utama dan font fallback?
2. Apakah tujuannya untuk mengurangi lonjakan saat waktu pemuatan, atau untuk menjaga font fallback permanen tetap terbaca?
3. Apakah penyesuaian ukuran teks otomatis di seluler diizinkan, dan token ukuran serta line-height apa saja yang sudah ada?

Jawaban 30 detik

font-size-adjust mengalibrasi tinggi relatif huruf kecil menggunakan metrik font. Saya akan mengukur font utama dan fallback, lalu menggunakan rasio eksplisit atau from-font secara progresif. Properti ini tidak dapat membuat lebar glif, line height, atau metrik CJK menjadi identik, sehingga saya akan menguji skrip, zoom, kegagalan pemuatan, dan pengaturan penglihatan rendah (low-vision). text-size-adjust adalah kontrol terpisah untuk penyesuaian ukuran teks otomatis di seluler, bukan alat kalibrasi font fallback.

Pembahasan mendalam langkah demi langkah

1. Memisahkan ukuran dari x-height

font-size-adjust menjaga huruf kecil pada tinggi terbaca yang sebanding dengan font utama. Dua font yang diatur ke 16px dapat memiliki x-height yang berbeda, membuat fallback terlihat lebih kecil atau lebih besar. Properti ini menyesuaikan metrik relatif; bukan mereproduksi rupa huruf (typeface) utama.

2. Memilih rasio eksplisit atau from-font

Nilai eksplisit berfungsi ketika tim telah mengukur metrik utama. Dengan from-font, peramban yang mendukung dapat membaca metrik dari font yang tersedia dan mengurangi konstanta yang disesuaikan secara manual. Matriks peramban dan berkas font tetap memerlukan verifikasi.

3. Menjaga kalibrasi tetap dekat dengan token tipografi

:root {
  --body-size: 1rem;
}

body {
  font-family: "Brand Sans", "Fallback Sans", sans-serif;
  font-size: var(--body-size);
  font-size-adjust: from-font;
  line-height: 1.5;
}

Properti ini memengaruhi elemen dan turunannya. Menjaganya tetap dekat dengan token tipografi body mencegah komponen yang tidak terkait menciptakan nilai kompensasi sendiri. Font stack yang mudah dibaca tetap menjadi fallback ketika properti ini tidak didukung.

4. Menangani urutan pemuatan

Kalibrasi tidak menghilangkan setiap perubahan yang disebabkan oleh pertukaran (swap) font. Gabungkan dengan kebijakan font-display yang disengaja, keputusan preload, dan fallback yang dapat diterima. Ukur keterbacaan awal, reflow teks, dan status font akhir secara terpisah; jangan menyembunyikan konten hanya demi mengejar pergerakan nol.

5. Menguji skrip dan lokal

Rasio huruf kecil Latin bukan merupakan representasi universal untuk teks bahasa Mandarin, Jepang, Arab, atau campuran. Buat sampel yang dilokalkan dan periksa tanda baca, angka, ketebalan (weight), pelipatan teks (wrapping), dan line height. Gunakan token khusus lokal bila diperlukan, alih-alih memperlakukan satu rasio sebagai kebenaran global.

6. Membedakannya dari text-size-adjust

text-size-adjust mengontrol pembesaran teks peramban di viewport seluler. Properti ini tidak mengalibrasi x-height fallback. Identifikasi apakah masalahnya ada pada metrik font atau perilaku tata letak seluler sebelum memilih properti, dan hindari menonaktifkan perilaku aksesibilitas hanya untuk memperbaiki masalah yang salah.

7. Menentukan kriteria penerimaan yang dapat diamati

Catat keberhasilan pemuatan font, perubahan tata letak, pemotongan teks akibat zoom, dan keterbacaan di bawah pengaturan font pengguna pada peramban dan perangkat target yang sebenarnya. Sertakan pemeriksaan regresi visual, pembaca layar (screen reader), keyboard, dan kontras tinggi dalam gerbang rilis (release gate).

Contoh jawaban

Saya akan memperlakukan ini sebagai tata kelola metrik tipografi. Saya akan mengambil sampel x-height font utama dan fallback, menerapkan rasio eksplisit atau from-font di dekat token body, dan mempertahankan stack yang andal. Ini dapat meningkatkan keterbacaan relatif huruf kecil tetapi tidak dapat menjamin lebar, line height, atau tata letak CJK campuran yang setara, jadi saya akan menguji pemuatan font yang berhasil maupun gagal, berbagai skrip, zoom peramban, dan perangkat seluler. Autosizing seluler adalah ranah text-size-adjust. Kriteria penerimaan akan menggunakan bukti tata letak, pemotongan teks, keterbacaan, dan aksesibilitas, bukan sekadar satu tangkapan layar.

Kesalahan umum

• Mengklaim bahwa font-size-adjust membuat setiap font berukuran sama persis.
• Menganggap from-font dijamin di setiap peramban dan berkas font.
• Menonaktifkan pembesaran seluler dengan text-size-adjust: none sebagai perbaikan umum.
• Hanya menguji layar pertama berbahasa Inggris dan tidak pernah menguji skrip lokal atau kegagalan pemuatan.
• Hanya melihat metrik tata letak sambil mengabaikan zoom, pengaturan font pengguna, dan pembaca layar.

Pertanyaan lanjutan dan jawabannya

Bagaimana jika desain juga membutuhkan lebar yang sama persis?

Nyatakan bahwa properti ini hanya menangani metrik tinggi relatif. Pilih fallback yang lebih mendekati, sesuaikan spasi, atau desain ulang pelipatan teks; jangan berjanji bahwa satu rasio dapat menyelesaikan setiap metrik.

Bagaimana cara melakukan penurunan fungsi (degrade) saat from-font tidak tersedia?

Pertahankan stack dan ukuran default agar tetap mudah dibaca, lalu gunakan deteksi fitur atau progressive enhancement untuk nilai eksplisit. Perlakukan perilaku yang tidak didukung sebagai kondisi peramban yang normal, bukan alasan untuk memblokir teks.

Bagaimana cara mencegah pergantian font menggeser tombol?

Sediakan ruang yang cukup, kalibrasikan fallback, dan ukur lebar sebelum dan sesudah font utama dimuat. Tindakan penting tidak boleh bergantung pada teks tersembunyi atau autosizing yang tidak terduga.

Haruskah halaman CJK menggunakan nilai yang sama?

Jangan menggunakannya kembali secara membabi buta. CJK tidak dipetakan ke konsep x-height huruf kecil yang sama, jadi validasi font lokal dan sampel line height secara independen.

Bagaimana Anda menunjukkan bahwa aksesibilitas tidak terganggu?

Uji zoom peramban, preferensi font sistem, urutan fokus setelah reflow, output pembaca layar, dan kontras tinggi. Tangkapan layar piksel tetap bukanlah bukti yang cukup.

Bagaimana Anda mendiskusikan dukungan peramban dalam wawancara?

Berikan matriks peramban target dan rencana deteksi fitur, dengan font stack yang mudah dibaca saat tidak didukung. Hindari mengklaim dukungan universal tanpa adanya matriks atau bukti pengujian.