Menyesuaikan tipografi ke preferensi pengguna dengan CSS

Metode untuk menyesuaikan {i>font<i} dengan pengguna Anda pengguna, agar mereka merasa nyaman membaca konten Anda.

Adam Argyle

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.