Tipografi

Jika Anda tidak menentukan 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 menentukan panjang baris, browser akan menggabungkan baris teks di tepi layar. Jadi, teks di web bersifat responsif secara default—teks mengalir agar sesuai dengan area pandang pengguna.

Tetapi hanya karena teks yang pas di layar tidak berarti teks tersebut nyaman untuk dibaca. Tipografi yang baik adalah cara terbaik untuk menampilkan teks Anda dengan cara yang sesuai. Tipografi tidak hanya sekadar memilih font yang sesuai untuk digunakan. Anda perlu mempertimbangkan preferensi pengguna, ukuran teks, panjang baris, dan jarak antarbaris teks.

Ukuran teks

Sulit untuk mengetahui ukuran teks yang tepat di web.

Jika seseorang menggunakan layar kecil, layarnya mungkin akan cukup dekat dengan matanya—dengan jarak satu telapak tangan.

Namun, seiring dengan semakin besarnya layar, koneksi tersebut menjadi lebih sulit. Layar berukuran laptop mungkin akan cukup dekat dengan penonton, tetapi monitor desktop layar lebar berukuran sekitar sama dengan layar televisi. Orang-orang duduk dengan jarak satu lengan dari layar desktop, tetapi mereka duduk jauh lebih jauh dari televisi.

Namun, meskipun Anda tidak dapat mengetahui dengan pasti jarak 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 antara ukuran teks tetap pada titik henti sementara tertentu cukup gelisah. Pendekatan yang lebih responsif adalah dengan 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 sesuai dengan lebar browser. Hal ini menyulitkan untuk memprediksi 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 dalam satuan 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 penghitungan. 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 penghitungan ukuran teks yang tepat.

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

Teks yang dikencangkan

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

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

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

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

Panjang baris

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

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

Apa pun dari 45 hingga 75 karakter secara luas dianggap sebagai panjang baris yang memuaskan untuk halaman satu kolom yang ditetapkan dalam tampilan 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. Namun, Anda dapat mencegah teks menjadi terlalu lebar dengan membatasi lebar penampung. Properti max-inline-size sangat cocok untuk hal ini.

Jangan menetapkan panjang baris dengan unit tetap seperti px. Pengguna dapat menskalakan ukuran font mereka ke atas dan ke bawah, dan panjang baris Anda akan 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 disambungkan 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 satuan untuk deklarasi line-height Anda. Hal ini memastikan bahwa tinggi baris relatif terhadap font-size.

line-height: 24px;

line-height: 1.5;

Kombinasi dan skala

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

Font web

Jenis huruf seperti suara untuk kata-kata Anda. Selama ini, hanya ada sedikit opsi font di web. Font sistem adalah satu-satunya opsi. Namun, sekarang Anda dapat memilih font web yang cocok dengan nuansa konten Anda.

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

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

Namun, setiap file font web yang Anda tambahkan berpotensi menurunkan pengalaman pengguna karena meningkatkan waktu pemuatan halaman. Ingat, desain bukan hanya tentang tampilan piksel akhir. Kecepatan 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 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 pengalihan dari font sistem ke font web. Anda dapat memilih untuk tidak menampilkan teks sama sekali hingga font web dimuat. Anda dapat memilih untuk segera menampilkan font sistem, lalu beralih ke font web setelah dimuat. Kedua strategi tersebut memiliki kekurangannya. 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 mengalami pergeseran konten yang mengganggu di 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 pergeseran 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 swap jika Anda masih ingin font web menggantikan 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 menggunakan banyak ketebalan atau gaya yang berbeda dari typeface yang sama, Anda mungkin akan menggunakan banyak file font terpisah—file font terpisah untuk setiap ketebalan atau gaya.

Font variabel mengatasi masalah ini dengan menggunakan satu file. Alih-alih memiliki file terpisah untuk reguler, tebal, ekstra tebal, dan sebagainya, file font variabel responsif. File ini berisi semua informasi yang diperlukan untuk ditampilkan di seluruh spektrum ketebalan 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 ketebalan 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 berkaitan dengan menghormati perangkat dan koneksi jaringan pengguna. Hasil akhirnya adalah desain yang terasa tepat, terlepas dari bagaimana desain tersebut dilihat.

Setelah Anda menguasai teks responsif, saatnya mempelajari gambar responsif.

Memeriksa pemahaman Anda

Uji pengetahuan Anda tentang tipografi