Metode untuk menyesuaikan {i>font<i} dengan preferensi pengguna Anda, sehingga mereka merasa nyaman membaca konten Anda.
Menghadirkan pengguna ke dalam proses desain adalah momen yang menyenangkan bagi pengguna, desainer, dan developer. Pengguna dapat mendapatkan pengalaman Anda dan mulai menikmati konten dengan lancar. Preferensi mereka diintegrasikan secara mendalam ke hasil desain.
Postingan blog ini membahas penggunaan kueri media CSS dengan font variabel untuk menyesuaikan
pengalaman membaca lebih lanjut. Kualitas dan ketebalan font dapat disesuaikan
dengan font-variation-settings
, yang memungkinkan penyesuaian mikro dengan berbagai preferensi
dan konteks, seperti preferensi untuk mode gelap atau kontras tinggi. Kita dapat mengambil
preferensi ini dan menyesuaikan font variabel untuk pengalaman pengguna tersebut.
- Mode gelap akan mendapatkan gradasi yang sedikit lebih rendah.
- Kontras tinggi akan mendapatkan font yang lebih tebal.
- Kontras rendah mendapatkan font yang lebih tipis.
Ikuti terus untuk memahami setiap bagian CSS dan font variabel yang memungkinkan momen yang bermakna ini.
Menyiapkan
Untuk membantu berfokus pada nilai setelan CSS dan variasi font, tetapi juga memberi kita sesuatu untuk dibaca dan dilihat, berikut markup yang dapat Anda gunakan untuk melihat pratinjau pekerjaan:
<h1>Variable font weight based on contrast preference</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Officia, quod? Quidem, nemo aliquam, magnam rerum distinctio
itaque nisi nam, cupiditate dolorum ad sint. Soluta nemo
labore aliquid ex, dicta corporis.
</p>
Tanpa menambahkan CSS apa pun, ukuran font sudah disesuaikan dengan preferensi pengguna.
Berikut adalah video dari demo lain yang menunjukkan bagaimana setelan font-size
dalam piksel akan
menghapus preferensi pengguna, dan alasan Anda harus menetapkan ukuran font dalam rem:
Terakhir, untuk memusatkan dan mendukung demo, sedikit CSS:
@layer demo.support {
body {
display: grid;
place-content: center;
padding: var(--size-5);
gap: var(--size-5);
}
h1 {
text-wrap: balance;
}
}
Penyiapan demo ini memungkinkan Anda mulai menguji dan menerapkan fitur UX tipografi yang rapi ini.
Memuat font variabel Roboto Flex
Strategi adaptif bergantung pada font variabel dengan sumbu yang bermakna untuk
penyesuaian, khususnya Anda memerlukan GRAD
dan wght
. Preferensi pengguna adaptif
target dalam artikel ini adalah untuk skema warna dan kontras, yang keduanya
akan menyesuaikan sumbu ini agar sesuai dengan preferensi yang diinginkan pengguna.
Muat font variabel menggunakan @font-face
API CSS:
@font-face {
font-family: "Roboto Flex";
src: url('https://assets.codepen.io/2585/RobotoFlex') format('truetype');
}
Selanjutnya, terapkan font ke beberapa konten. CSS berikut menerapkannya ke semuanya:
@layer demo.support {
body {
font-family: Roboto Flex;
}
}
Properti khusus CSS dan kueri media untuk meraih kemenangan
Setelah font dimuat, Anda dapat membuat kueri untuk preferensi pengguna dan menyesuaikan setelan font variabel agar cocok.
Setelan jika tidak ada preferensi (default)
Gaya awal berikut akan menjadi gaya default, atau cara lain untuk melihatnya, gaya untuk pengguna tanpa preferensi apa pun.
@layer demo {
body {
--base-weight: 400;
--base-grade: 0;
font-variation-settings:
"wght" var(--base-weight),
"GRAD" var(--base-grade)
;
}
}
Setelan jika preferensi adalah kontras tinggi
Untuk pengguna yang telah menunjukkan preferensi untuk kontras tinggi di setelan
sistem mereka, tingkatkan nilai --base-weight
dari 400
menjadi 700
:
@layer demo {
@media (prefers-contrast: more) {
body {
--base-weight: 700;
}
}
}
Sekarang ada lebih banyak kontras saat membaca.
Setelan jika preferensinya adalah untuk kontras rendah
Untuk pengguna yang telah menunjukkan preferensi kontras rendah di setelan
sistem mereka, turunkan nilai --base-weight
dari 400
menjadi 200
:
@layer demo {
@media (prefers-contrast: less) {
body {
--base-weight: 200;
}
}
}
Sekarang kontrasnya lebih sedikit saat membaca.
Setelan saat preferensi adalah mode gelap
@layer demo {
@media (prefers-color-scheme: dark) {
body {
--base-grade: -25;
}
}
}
Sekarang perbedaan persepsi terang pada gelap vs gelap pada terang telah diperhitungkan.
Kini semua jadi satu
@layer demo {
body {
--base-weight: 400;
--base-grade: 0;
font-variation-settings:
"wght" var(--base-weight),
"GRAD" var(--base-grade)
;
}
@media (prefers-contrast: more) {
body {
--base-weight: 700;
}
}
@media (prefers-contrast: less) {
body {
--base-weight: 200;
}
}
@media (prefers-color-scheme: dark) {
body {
--base-grade: -25;
}
}
}
Atau, untuk bersenang-senang, bersama dengan penyusunan CSS:
@layer demo {
body {
--base-weight: 400;
--base-grade: 0;
font-variation-settings:
"wght" var(--base-weight),
"GRAD" var(--base-grade)
;
@media (prefers-contrast: more) { --base-weight: 700 }
@media (prefers-contrast: less) { --base-weight: 200 }
@media (prefers-color-scheme: dark) { --base-grade: -25 }
}
}
Hasilnya adalah pengalaman membaca yang menyesuaikan font agar sesuai dengan preferensi pengguna. Kode sumber lengkap tersedia di bawah di Codepen.