Menyesuaikan tipografi ke preferensi pengguna dengan CSS

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

Adam Argyle

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.