Tipografi

Jika Anda tidak menetapkan gaya apa pun untuk teks, browser akan menerapkan gaya defaultnya sendiri. Ini disebut stylesheet Agen Pengguna dan dapat bervariasi dari satu browser ke browser lainnya. Pengguna juga dapat menetapkan preferensi mereka sendiri untuk menampilkan teks.

Jika Anda tidak menetapkan panjang baris, browser akan membungkus baris teks di tepi layar. Jadi, teks di web sudah responsif secara default—teks mengalir sesuai dengan area pandang pengguna.

Tetapi hanya karena teks sesuai di layar bukan berarti teks tersebut mudah dibaca. Tipografi yang baik adalah tentang menyajikan teks dengan cara yang tepat. Ada lebih banyak hal mengenai tipografi daripada memilih {i>font<i} yang sesuai untuk digunakan. Anda perlu mempertimbangkan preferensi pengguna, ukuran teks, panjang baris, dan jarak antar baris teks.

Ukuran teks

Sulit untuk mengetahui berapa seharusnya ukuran teks pada web.

Jika seseorang menggunakan layar kecil, dapat dipastikan bahwa layarnya akan cukup dekat dengan mata mereka—sepanjang tangan.

Tetapi ketika layar menjadi semakin besar, semakin sulit untuk membuat koneksi itu. Layar seukuran laptop mungkin akan cukup dekat dengan pemirsa, tetapi monitor desktop layar lebar berukuran sama dengan layar televisi. Orang-orang duduk cukup jauh dari layar desktop, tetapi mereka duduk jauh dari televisi.

Namun, meskipun Anda tidak dapat mengetahui secara pasti seberapa jauh seseorang dari layar, Anda dapat mencoba menggunakan ukuran teks yang diharapkan akan sesuai. Gunakan ukuran teks yang lebih kecil untuk layar yang lebih kecil dan ukuran teks yang lebih besar untuk layar yang lebih besar.

Anda dapat menggunakan kueri media untuk mengubah properti font-size saat ukuran layar semakin lebar.

@media (min-width: 30em) {
  html {
    font-size: 125%;
  }
}

@media (min-width: 40em) {
  html {
    font-size: 150%;
  }
}

@media (min-width: 50em) {
  html {
    font-size: 175%;
  }
}

@media (min-width: 60em) {
  html {
    font-size: 200%;
  }
}

Menskalakan teks

Beralih di antara ukuran teks tetap pada titik henti sementara tertentu cukup gelisah. Pendekatan yang lebih responsif adalah membiarkan lebar perangkat pengguna memengaruhi ukuran teks.

Unit vw di CSS adalah singkatan dari "lebar area pandang". Menghubungkan ukuran font ke lebar area pandang berarti teks akan membesar dan menyusut secara proporsional dengan lebar browser. Hal ini mempersulit prediksi ukuran teks pada lebar tertentu, tetapi Anda tahu bahwa ukuran teks akan sesuai dengan lebar browser pengguna.

Anda tidak boleh menggunakan vw sendiri dalam deklarasi ukuran font.

html {
  font-size: 2.5vw;
}

Jika Anda melakukannya, pengguna tidak akan dapat mengubah ukuran teks. Teks akan dapat diubah ukurannya jika Anda menggabungkan unit relatif—seperti em, rem, atau ch. Fungsi calc() CSS sangat cocok untuk hal ini.

html {
  font-size: calc(0.75rem + 1.5vw);
}

Biarkan browser melakukan perhitungan. Hal ini menyulitkan untuk memprediksi dengan tepat ukuran teks yang akan digunakan pada lebar tertentu, tetapi Anda tahu bahwa ukuran teks akan berada dalam rentang yang tepat. Browser pengguna akan menangani perhitungan ukuran teks secara tepat.

Namun, kini ada kemungkinan teks akan terlalu kecil di layar sempit dan terlalu besar di layar lebar.

Menempel teks

Anda mungkin tidak ingin teks menyusut dan membesar secara ekstrem. Anda dapat mengontrol tempat penskalaan dimulai dan diakhiri menggunakan fungsi clamp() CSS. Tindakan ini akan "menjepit" penskalaan ke rentang tertentu.

Fungsi clamp() mirip seperti fungsi calc(), tetapi memerlukan tiga nilai. Nilai tengah sama dengan nilai yang Anda teruskan ke calc(). Nilai pembuka menentukan ukuran minimum, dalam hal ini 1rem agar tidak lebih kecil dari ukuran font pilihan pengguna. Nilai penutup menentukan ukuran maksimum.

html {
  font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}

Sekarang ukuran teks mengecil dan membesar sesuai dengan layar pengguna, tetapi ukuran teks tidak akan pernah di bawah 1rem atau di atas 2rem.

Panjang baris

Web bukan merupakan media cetak, tetapi kita dapat mengambil pelajaran dari dunia percetakan dan menerapkannya di web.

Dalam buku klasiknya The Elements of Typographic Style, Robert Bringhurst menyampaikan hal ini tentang panjang garis (atau mengukur):

Apa pun yang terdiri dari 45 hingga 75 karakter secara luas dianggap sebagai panjang baris yang memuaskan untuk laman kolom tunggal yang diatur dalam wajah teks serif dalam ukuran teks. Baris sepanjang 66 karakter (yang menghitung huruf dan spasi) dianggap ideal. Untuk pekerjaan multi-kolom, rata-rata yang lebih baik adalah 40 hingga 50 karakter.

Anda tidak dapat menetapkan panjang baris secara langsung di CSS. Tidak ada properti line-length. Tetapi Anda dapat mencegah teks menjadi terlalu lebar dengan membatasi seberapa lebar container tersebut. Properti max-inline-size sangat cocok untuk hal ini.

Jangan setel panjang baris dengan unit tetap seperti px. Pengguna dapat meningkatkan dan menurunkan skala ukuran fontnya, dan panjang baris Anda juga harus disesuaikan. Gunakan unit relatif seperti rem atau ch.

article {
  max-inline-size: 700px;
}

article {
  max-inline-size: 66ch;
}

Menggunakan unit ch untuk lebar akan menyebabkan baris baru digabungkan pada karakter ke-66 pada ukuran font tersebut.

Tinggi baris

Meskipun tidak ada properti line-length di CSS, ada properti line-height.

Baris teks yang lebih pendek dapat memiliki nilai line-height yang lebih besar. Namun, jika Anda menggunakan nilai line-height yang besar untuk baris teks yang panjang, mata pembaca akan sulit beralih dari akhir satu baris ke awal baris berikutnya.

article {
  max-inline-size: 66ch;
  line-height: 1.65;
}
blockquote {
  max-inline-size: 45ch;
  line-height: 2;
}

Gunakan nilai tanpa unit untuk deklarasi line-height. Tindakan ini memastikan bahwa tinggi baris relatif terhadap font-size.

line-height: 24px;

line-height: 1.5;

Kombinasi dan skala

Ingatlah untuk memprioritaskan hierarki saat Anda membuat antarmuka pengguna untuk kejelasan dan alur halaman yang lebih baik. Cara yang bagus untuk melakukannya adalah dengan skala tipografi yang terintegrasi ke dalam sistem desain Anda.

Font web

Jenis huruf adalah suara untuk kata-kata Anda. Untuk waktu yang lama di web hanya ada sedikit opsi {i>font<i}. Font sistem adalah satu-satunya pilihan. Namun kini Anda dapat memilih font web yang sesuai dengan nuansa konten.

Gunakan @font-face untuk memberi tahu browser tempat menemukan file font web Anda. Gunakan woff2 sebagai format font web Anda. Hal ini didukung dengan baik dan memiliki peningkatan kinerja terbaik.

@font-face {
  font-family: Roboto;
  src: url('/fonts/roboto-regular.woff2') format('woff2');
}
body {
  font-family: Roboto, sans-serif;
}

Tetapi, setiap file {i>font web<i} yang Anda tambahkan berpotensi mengurangi pengalaman pengguna karena meningkatkan waktu muat halaman. Ingat, desain bukan hanya tentang tampilan piksel akhir. Seberapa cepat piksel tersebut digambar adalah bagian penting dari pengalaman pengguna. Pengalaman yang terasa cepat adalah pengalaman pengguna yang baik.

Pemuatan font

Anda dapat meminta agar browser mulai mendownload file font sesegera mungkin. Tambahkan elemen link ke head dokumen yang mereferensikan file font web Anda. Atribut rel dengan nilai preload memberi tahu browser untuk memprioritaskan file tersebut. Atribut as dengan nilai font memberi tahu browser tentang jenis file ini. Atribut type memungkinkan Anda menjadi lebih spesifik.

<link href="/fonts/roboto-regular.woff2" type="font/woff2" 
  rel="preload" as="font" crossorigin>

Anda harus menyertakan atribut crossorigin meskipun Anda menghosting file font sendiri.

Gunakan properti font-display CSS untuk memberi tahu browser cara mengelola peralihan dari font sistem ke font web. Anda dapat memilih untuk tidak menampilkan teks sama sekali hingga font web dimuat. Anda dapat memilih untuk langsung menampilkan font sistem, lalu beralih ke font web setelah dimuat. Kedua strategi tersebut memiliki kekurangan. Jika Anda menunggu hingga {i>font<i} web diunduh sebelum menampilkan teks apa pun, pengguna mungkin akan mendapati diri mereka menatap laman kosong dalam waktu yang sangat lama. Jika Anda menampilkan teks dalam font sistem terlebih dahulu, lalu beralih ke font web, pengguna mungkin akan mengalami pergeseran konten yang terlihat pada halaman.

Kompromi yang baik adalah menunggu sebentar sebelum menampilkan teks apa pun. Jika font web dimuat sebelum waktu tersebut habis, teks akan ditampilkan menggunakan font web tanpa perubahan konten. Jika font web masih belum dimuat setelah waktu habis, teks akan ditampilkan menggunakan font sistem sehingga setidaknya pengguna dapat membaca konten.

Gunakan nilai font-display dari swap jika Anda masih ingin font web mengganti font sistem setiap kali font web akhirnya dimuat.

body {
  font-family: Roboto, sans-serif;
  font-display: swap;
}

Gunakan nilai font-display dari fallback jika Anda ingin tetap menggunakan font sistem setelah teks dirender.

body {
  font-family: Roboto, sans-serif;
  font-display: fallback;
}

Font variabel

Jika Anda menggunakan banyak bobot atau gaya yang berbeda dari jenis huruf yang sama, Anda mungkin akan menggunakan banyak {i>file<i} {i>font<i} yang terpisah—file {i>font<i} terpisah untuk setiap ketebalan atau gaya.

Font variabel dapat mengatasi masalah ini dengan menggunakan satu file. Alih-alih memiliki file terpisah untuk reguler, tebal, ekstra tebal, dan sebagainya, file font variabel responsif. Data ini berisi semua informasi yang perlu ditampilkan di seluruh spektrum bobot atau gaya.

Artinya, satu file font variabel berukuran lebih besar daripada satu file font biasa, tetapi satu file font variabel mungkin akan lebih kecil daripada beberapa file font biasa. Jika Anda menggunakan banyak bobot yang berbeda, font variabel dapat memberikan peningkatan performa yang besar.

Tipografi yang baik di web bukan hanya tentang pilihan jenis huruf yang Anda buat sebagai seorang desainer. Tipografi responsif juga berhubungan dengan perangkat pengguna dan koneksi jaringan. Hasil akhirnya adalah desain yang terasa benar tidak peduli bagaimanapun dilihat.

Setelah Anda menguasai teks responsif, kini saatnya mempelajari gambar responsif.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang tipografi