Tipografi

Jika Anda tidak menentukan gaya apa pun untuk teks, browser akan menerapkan gaya defaultnya sendiri. Gaya ini disebut stylesheet Agen Pengguna, dan dapat bervariasi dari browser ke browser. 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 responsif secara default—teks akan mengalir agar sesuai dengan area pandang pengguna.

Namun, hanya karena teks sesuai dengan layar tidak berarti teks tersebut nyaman dibaca. Tipografi yang baik adalah tentang menyajikan teks Anda dengan cara yang tepat. Tipografi bukan hanya tentang 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, kemungkinan besar layar tersebut akan cukup dekat dengan mata mereka—sepanjang tangan.

Namun, seiring dengan semakin besarnya layar, semakin sulit untuk membuat koneksi tersebut. Layar berukuran laptop mungkin akan cukup dekat dengan penonton, tetapi monitor desktop layar lebar memiliki ukuran yang sama dengan layar televisi. Orang duduk sejauh lengan dari layar desktop, tetapi mereka duduk jauh dari televisi.

Meskipun Anda tidak dapat mengetahui dengan 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%;
  }
}

Penskalaan teks

Beralih antara ukuran teks tetap pada titik henti sementara tertentu cukup tidak stabil. 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 bertambah besar dan mengecil sebanding dengan lebar browser. Hal ini membuat sulit untuk memprediksi ukuran teks pada lebar tertentu, tetapi Anda tahu bahwa ukuran teks akan sesuai dengan lebar browser pengguna.

Anda tidak boleh menggunakan vw saja 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 mencampurnya dengan unit relatif—seperti em, rem, atau ch. Fungsi CSS calc() sangat cocok untuk hal ini.

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

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

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

Mengapit teks

Anda mungkin tidak ingin teks Anda mengecil dan bertambah besar secara ekstrem. Anda dapat mengontrol tempat penskalaan dimulai dan berakhir menggunakan fungsi CSS clamp(). "Mengapit" penskalaan ke rentang tertentu.

Fungsi clamp() 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 berada di bawah ukuran font pilihan pengguna. Nilai penutup menentukan ukuran maksimum.

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

Sekarang ukuran teks mengecil dan bertambah besar sebanding dengan layar pengguna, tetapi ukuran teks tidak akan pernah lebih kecil dari 1rem atau lebih besar dari 2rem.

Panjang baris

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

Dalam buku klasiknya The Elements of Typographic Style, Robert Bringhurst mengatakan hal berikut tentang panjang baris (atau ukuran):

Apa pun dari 45 hingga 75 karakter secara luas dianggap sebagai panjang baris yang memuaskan untuk halaman satu kolom yang ditetapkan dalam jenis teks serif dalam ukuran teks. Baris 66 karakter (menghitung huruf dan spasi) secara luas dianggap ideal. Untuk pekerjaan beberapa kolom, rata-rata yang lebih baik adalah 40 hingga 50 karakter.

Anda tidak dapat menetapkan panjang baris 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 tetapkan panjang baris dengan unit tetap seperti px. Pengguna dapat meningkatkan dan menurunkan skala ukuran font, dan panjang baris Anda 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 berpindah 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 Anda. Hal ini memastikan 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 dibuat ke dalam sistem desain Anda.

Font web

Jenis huruf seperti suara untuk kata-kata Anda. Untuk waktu yang paling lama di web, hanya ada beberapa opsi font. Font sistem adalah satu-satunya opsi. Namun, kini Anda dapat memilih font web yang sesuai dengan nuansa konten Anda.

Gunakan @font-face untuk memberi tahu browser tempat menemukan file font web Anda. Gunakan woff2 sebagai format font web Anda. Format 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 kualitas pengalaman pengguna karena meningkatkan waktu muat 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 browser untuk mulai mendownload file font sesegera mungkin. Tambahkan elemen link ke head dokumen Anda 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 CSS font-display 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 menampilkan font sistem segera, lalu beralih ke font web setelah dimuat. Kedua strategi memiliki kelemahannya. Jika Anda menunggu hingga font web didownload sebelum menampilkan teks apa pun, pengguna mungkin akan menatap halaman kosong untuk 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 tidak stabil 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 mengganti font sistem setiap kali font web akhirnya dimuat.

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

Gunakan nilai font-display 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 ketebalan atau gaya yang berbeda dari jenis huruf yang sama, Anda mungkin akan menggunakan banyak file font terpisah—file font terpisah untuk setiap ketebalan atau gaya.

Font variabel memecahkan masalah ini dengan menggunakan satu file. Daripada memiliki file terpisah untuk varian reguler, tebal, sangat tebal, dan lainnya, file font variabel bersifat responsif. File ini berisi semua informasi yang diperlukan untuk ditampilkan di seluruh spektrum ketebalan atau gaya.

Artinya, satu file font variabel lebih besar daripada satu file font reguler, tetapi satu file font variabel mungkin lebih kecil daripada beberapa file font reguler. 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 yang Anda buat sebagai desainer. Tipografi responsif juga menghormati perangkat dan koneksi jaringan pengguna. Hasil akhirnya adalah desain yang terasa tepat, apa pun cara tampilannya.

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

Uji pemahaman Anda

Uji pengetahuan Anda tentang tipografi