Metode untuk menyesuaikan {i>font<i} dengan pengguna Anda pengguna, agar mereka merasa nyaman membaca konten Anda.
Membawa pengguna ke dalam proses desain adalah saat yang menyenangkan bagi pengguna, desainer dan pengembang. Pengguna dapat membuka pengalaman Anda dan memulai dengan lancar menikmati konten, preferensi mereka sangat terintegrasi dengan hasil desain.
Postingan blog ini membahas penggunaan kueri media CSS dengan font variabel untuk menyesuaikan
pengalaman membaca lebih jauh lagi. Tingkat dan ketebalan font dapat disesuaikan
dengan font-variation-settings
, yang memungkinkan microtuning dengan berbagai preferensi
dan konteks, seperti preferensi mode gelap atau kontras tinggi. Kita bisa mengambil
preferensi ini dan menyesuaikan {i>font<i} variabel
untuk pengalaman pengguna tersebut.
- Mode gelap akan mendapatkan gradasi yang sedikit lebih rendah.
- Kontras tinggi menggunakan 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 penyiapan
Untuk membantu fokus pada nilai setelan variasi font dan CSS, serta memberi kita sesuatu untuk dibaca dan dilihat, inilah markup yang dapat Anda gunakan untuk melihat pratinjau karya:
<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, ukuran font sudah adaptif dengan preferensi pengguna.
Berikut adalah video dari demo lain yang menunjukkan cara menyetel font-size
dalam piksel
menyesuaikan preferensi pengguna, dan mengapa Anda harus mengatur ukuran {i>font<i} dalam {i>rems<i}:
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;
}
}
Pengaturan demo ini memungkinkan Anda untuk mulai menguji dan menerapkan UX tipografi yang rapi ini aplikasi baru.
Memuat font variabel Roboto Flex
Strategi adaptif tergantung pada {i>font<i} variabel dengan sumbu yang berarti untuk
penyesuaian, khususnya Anda memerlukan GRAD
dan wght
. Pengguna adaptif target
preferensi 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 API @font-face
CSS:
@font-face {
font-family: "Roboto Flex";
src: url('https://assets.codepen.io/2585/RobotoFlex') format('truetype');
}
Selanjutnya, terapkan {i>font<i} ke beberapa konten. CSS berikut menerapkannya pada semuanya:
@layer demo.support {
body {
font-family: Roboto Flex;
}
}
Properti khusus CSS dan kueri media untuk kemenangan
Setelah font dimuat, Anda dapat membuat kueri untuk preferensi pengguna dan menyesuaikan variabel setelan font agar sesuai.
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 preferensinya adalah untuk kontras tinggi
Untuk pengguna yang telah menunjukkan preferensi terhadap kontras tinggi dalam sistem mereka
setelan, tingkatkan nilai --base-weight
dari 400
menjadi 700
:
@layer demo {
@media (prefers-contrast: more) {
body {
--base-weight: 700;
}
}
}
Sekarang lebih kontras saat membaca.
Setelan jika preferensinya adalah untuk kontras rendah
Untuk pengguna yang telah menunjukkan preferensi terhadap kontras rendah dalam sistem mereka
setelan, turunkan nilai --base-weight
dari 400
menjadi 200
:
@layer demo {
@media (prefers-contrast: less) {
body {
--base-weight: 200;
}
}
}
Sekarang kontras saat membaca menjadi lebih sedikit.
Setelan saat preferensi untuk mode gelap
@layer demo {
@media (prefers-color-scheme: dark) {
body {
--base-grade: -25;
}
}
}
Sekarang perbedaan persepsi cahaya pada gelap dengan gelap pada terang telah diperhitungkan.
Kini menjadi 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 {i>font<i} agar sesuai dengan bahasa pengguna preferensi Anda. Kode sumber lengkapnya tersedia di bawah ini di Codepen.