Tipografi responsif dan lancar dengan fitur CSS Dasar

Miriam Suzanne

Dipublikasikan: 16 Desember 2025

Desain web responsif adalah pendekatan untuk membangun situs yang terlihat bagus dan berfungsi dengan baik di berbagai browser, dimensi area pandang, perangkat, dan preferensi pengguna. Jika diterapkan pada tipografi, masalah utamanya adalah menyesuaikan font-size berdasarkan lebar browser, yang juga dapat berimplikasi pada nilai penspasian seperti line-height dan margin.

Sebagai desainer, sebaiknya pikirkan ruang yang tersedia di browser, dan sesuaikan tipografi Anda. Penting juga untuk diingat bahwa pengguna yang berbeda akan memiliki kebutuhan font-size yang berbeda di berbagai perangkat, bergantung pada keadaan pribadi di luar jangkauan atau pengetahuan Anda. Jadi, berbahaya untuk melakukan apa pun yang akan menghilangkan kontrol pengguna atas hasil akhir. Ada dua input utama yang dapat digunakan orang untuk memengaruhi ukuran font saat menjelajahi web:

• Menyediakan preferensi font-size default di semua situs.
• Memperbesar atau memperkecil situs berdasarkan per situs.

Tujuan demo ini adalah membuat tipografi responsif terhadap ukuran area pandang browser dan juga input pengguna. Namun, penting untuk dipahami bahwa semakin banyak tipografi Anda merespons area tampilan, semakin sedikit tipografi tersebut merespons preferensi pengguna. Jika Anda akan menerapkan tipografi responsif, Anda harus melakukannya dengan hati-hati, dan menguji bahwa hasilnya masih dapat diakses.

Menegosiasikan font-size dasar berdasarkan preferensi pengguna

Langkah pertama untuk menentukan tipografi apa pun secara online adalah menegosiasikan ukuran font awal berdasarkan preferensi font-size pengguna. Font ini akan digunakan untuk sebagian besar teks di halaman, dan sebagai dasar untuk ukuran font lainnya seperti judul. Opsi paling sederhana di sini adalah memberikan kontrol penuh kepada pengguna dengan menggunakan 1em, tanpa penyesuaian apa pun. Jika Anda tidak menetapkan nilai font-size lainnya, 1em merujuk pada preferensi pengguna. Di sisi lain, menyetel font-size dalam piksel atau unit absolut lainnya (dan bahkan unit relatif viewport) akan sepenuhnya menggantikan pengguna, yang harus dihindari.

Namun, kasus penggunaan yang berbeda memerlukan tipografi yang berbeda. Artikel mungkin lebih mudah dibaca dalam teks besar, sementara situs yang berisi banyak data mungkin memerlukan desain yang lebih ringkas dengan teks yang lebih kecil. Dalam kedua kasus tersebut, Anda mungkin ingin menyarankan nilai default yang sesuai dengan desain, sekaligus memungkinkan pengguna menyesuaikan hasilnya berdasarkan situasi unik mereka.

Opsi pertama: menghitung pengganda berdasarkan asumsi

Salah satu kompromi umum adalah menentukan font-size yang disesuaikan dalam unit em atau %, relatif terhadap font-size default pengguna. Umumnya, pendekatan ini dimulai dengan asumsi bahwa browser menyediakan setelan default 16px, dan sebagian besar pengguna akan membiarkan setelan default tersebut. Jika Anda merasa ukuran font 20px akan lebih cocok untuk situs Anda, maka font-size 1.25em atau 125% biasanya akan memberikan hasil yang Anda inginkan:

html {
  /* 20px preferred, 16px expected: 20/16 = 1.25 */
  font-size: 1.25em;
}

Anda juga dapat menggunakan fungsi calc() di sini untuk menunjukkan perhitungan, tetapi Anda tetap harus mengetahui persamaannya—ukuran target, dibagi dengan ukuran yang diharapkan, dikalikan dengan 1em:

html {
  font-size: calc(20 / 16 * 1em);
}

Pengguna dengan preferensi yang lebih besar atau lebih kecil akan memiliki kemampuan untuk memengaruhi hasil, karena default Anda kini relatif terhadap preferensi mereka—1,25 kali preferensi mereka dalam kasus ini. Namun, hal ini bisa menjadi aneh jika Anda dan pengguna sama-sama meminta default 20px, dan hasilnya adalah 25px—waktu default yang disesuaikan dikalikan 1,25 lagi—ukuran yang tidak diminta oleh siapa pun.

Opsi kedua: biarkan clamp() melakukan pekerjaan

Pendekatan yang lebih bernuansa melibatkan fungsi perbandingan CSS, tanpa matematika apa pun. Daripada mengasumsikan 1em sama dengan 16px, dan melakukan konversi yang tidak dapat diandalkan dari px ke em, Anda dapat menganggap 1em sebagai variabel yang merujuk pada preferensi pengguna. Terlepas dari nilai piksel yang diwakili 1em, font-size max(1em, 20px) akan selalu menampilkan preferensi desain Anda (20px) dan preferensi pengguna (1em) yang lebih besar. Hal ini memungkinkan pengguna memilih ukuran font yang lebih besar, tetapi tidak lebih kecil.

Dengan beralih ke fungsi clamp(), Anda dapat mengizinkan pengguna menskalakan kedua arah, saat ukuran pilihan mereka terlalu jauh dari default yang Anda pilih. Misalnya, font-size clamp(1em, 20px, 1.25em) akan ditetapkan secara default ke 20px selama nilainya lebih besar daripada nilai default pengguna, tetapi tidak lebih dari 125% dari nilai defaultnya.

Hal ini memungkinkan desain Anda diprioritaskan saat mendekati preferensi pengguna, tetapi pengguna tetap memiliki prioritas saat preferensinya berada di luar rentang yang ditentukan. Tidak ada perhitungan konversi, tidak ada asumsi tentang ukuran preferensi pengguna, dan tidak ada perkalian nilai desainer dan pengguna.

Dengan menetapkannya sebagai font-size root pada elemen html, Anda kini dapat mereferensikan 1rem di mana saja di situs, sebagai ukuran dasar yang dinegosiasikan.

Menambahkan responsivitas

Untuk membuat font-size ini responsif terhadap area tampilan, salah satu opsi adalah menambahkan titik henti kueri media (atau kueri penampung). Misalnya, Anda dapat mengubah nilai yang di-clamp bergantung pada ukuran layar:

html {
  font-size: clamp(1em, var(--base-font-size, 16px), 1.25em);
  @media (width > 30em) { --base-font-size: 18px; }
  @media (width > 45em) { --base-font-size: 20px; }
}

Opsi lainnya adalah menambahkan unit viewport atau penampung ke nilai dasar statis:

html {
  font-size: clamp(1em, 16px + 0.25vw, 1.25em);
}

Satuan vw (lebar area pandang) atau vi (ukuran inline area pandang) mewakili 1% dari total area pandang—bagian browser yang merender situs Anda. Demikian pula, unit cqw dan cqi mewakili 1% dari penampung ukuran inline di halaman. Lihat demo kueri dan unit penampung untuk mengetahui detail selengkapnya.

Pendekatan ini sering disebut sebagai tipografi lancar, karena perubahan font-size bersifat konstan di berbagai lebar area tampilan, bukan melompat dari satu nilai ke nilai lain pada titik henti media atau penampung. Namun, jangan terganggu oleh kelancaran transisi—perbedaan tersebut umumnya hanya terlihat dalam pengujian, jika Anda menyesuaikan ukuran jendela dengan lancar. Efek tersebut jarang (atau bahkan tidak pernah) dilihat oleh pengguna. Meskipun pengguna dapat mengubah ukuran browser—atau tingkat zoom—secara rutin, mereka harus melakukan penyesuaian tersebut secara lambat dan lancar untuk melihat perbedaan antara titik henti sementara dan unit area tampilan. Hal ini hanya memengaruhi transisi, bukan hasil setelah pengubahan ukuran.

Keuntungan utama penskalaan font adaptif adalah tidak perlu menghitung atau menentukan titik henti sementara secara manual, sehingga memberikan hasil yang diinterpolasi pada ukuran tertentu. Anda hanya menetapkan titik awal (16px) dan laju perubahan (0.25vw akan memberikan peningkatan 0.25px dalam font-size untuk setiap peningkatan 100px dalam area tampilan), dan mungkin nilai minimum dan maksimum. Saat area tampilan memiliki lebar 1000px, font-size akan menjadi 16px + 2.5px atau 18.5px—tetapi penghitungan tersebut sepenuhnya ditangani oleh browser. Ini adalah pendekatan yang digunakan dalam demo, menggunakan unit cqi untuk menunjukkan responsivitas berbasis penampung. Jika digunakan pada elemen root (html), yang tidak memiliki penampung yang ditentukan, unit cqi masih merujuk pada ukuran area tampilan.

Jika Anda lebih suka berpikir dalam hal font-size yang ditentukan pada ukuran area tampilan tertentu, pertimbangkan untuk menggunakan pendekatan kueri media yang lebih langsung, yang sedikit lebih jelas. Situasi menjadi rumit saat Anda mencoba menghitung unit area tampilan berdasarkan titik henti sementara yang diinginkan. Banyak orang melakukannya dengan menyalin dan menempelkan nilai dari alat pihak ketiga, tetapi kode yang dihasilkan jauh lebih sulit dipahami atau diubah secara langsung. Secara umum dengan CSS, opsi terbaik adalah opsi yang paling jelas menyatakan maksud Anda.

Peringatan: Perubahan area tampilan tidak selalu berarti hal yang sama.

Meskipun kueri media dan unit vi diterapkan dengan cara yang berbeda, kedua pendekatan ini didasarkan pada pengukuran area pandang yang sama. Jika area tampilan memiliki lebar 600px, maka 100vw akan sama dengan 600px, dan gaya di dalam kueri media (width > 500px) akan diterapkan.

Namun, apa artinya jika area pandang memiliki lebar 600px? Pada kenyataannya, piksel bukanlah satu ukuran tetap dengan satu makna dalam semua situasi. Meskipun terasa wajar jika area tampilan dengan lebih sedikit piksel di seluruhnya berada di layar yang lebih kecil (seperti ponsel), atau di jendela browser yang sempit, hal itu bukanlah asumsi yang dapat diandalkan. Faktanya, memperbesar dan memperkecil jendela browser akan memiliki dampak yang sama pada lebar area pandang yang diukur. Satu tindakan (melakukan zoom) mengubah ukuran piksel, sedangkan tindakan lainnya (mengubah ukuran) mengubah ukuran browser itu sendiri—tetapi keduanya mengubah jumlah piksel di seluruh lebar browser. Yang kita dapatkan dari pengukuran area pandang adalah hubungan antara ukuran piksel saat ini dan jendela browser saat ini.

Bagi pengguna, memperbesar dan mengubah ukuran memiliki tujuan yang sangat berbeda. Pengguna yang mengubah tingkat zoom mencoba memperbesar atau memperkecil konten halaman, tetapi pengguna yang mengubah ukuran browser hanya mengelola ruang di berbagai layar. Meskipun niat pengguna berbeda, hasil pengukuran CSS tetap sama. Saat jendela semakin kecil, atau piksel semakin besar, jumlah piksel di seluruh lebar browser akan berkurang.

Perbedaan ini membuat tipografi responsif menjadi tidak dapat diandalkan. Jika teks Anda disetel untuk mengubah ukuran hanya berdasarkan area tampilan atau penampung, maka zoom pengguna tidak akan berpengaruh.

Mengubah nilai unit relatif area pandang menjadi 1vw atau 100vw akan mengubah hubungan persis antara ukuran font dan area pandang. Font 1vw akan bertambah 1px untuk setiap 100px ukuran area pandang, sedangkan font 100vw akan memiliki ukuran yang sama persis dengan area pandang. Anda dapat mengubah nilai tersebut untuk membuat font tumbuh lebih lambat atau lebih cepat dalam kaitannya dengan browser. Namun, nilai relatif area pandang akan tetap konstan saat pengguna memperbesar atau memperkecil—sama sekali tidak responsif terhadap kontrol pengguna.

Demikian pula, 1vw maupun 100vw tidak memperhitungkan font-size default pengguna.

Menggunakan unit relatif viewport atau container dengan sendirinya untuk font-size selalu merugikan pengguna. Jika font-size sepenuhnya responsif terhadap penampungnya, font-size juga tidak dapat responsif terhadap setelan atau penyesuaian default pengguna. Meskipun dengan niat dan perlindungan terbaik, sebaiknya hindari mengambil kontrol font-size akhir dari pengguna. Hal ini tidak hanya memberikan pengalaman pengguna yang buruk, tetapi juga dapat melanggar panduan aksesibilitas yang sering kali diwajibkan oleh hukum. Secara khusus, bagian 1.4.4 Pedoman Aksesibilitas Konten Web mewajibkan "teks dapat diubah ukurannya tanpa teknologi pendukung hingga 200 persen".

Cara memastikan nilai font-size responsif terhadap zoom

Untuk memastikan bahwa font-size relatif terhadap area tampilan responsif terhadap zoom, nilai relatif terhadap area tampilan harus diterapkan sebagai penyesuaian terhadap nilai lainnya. Hal ini dapat dilakukan di CSS menggunakan fungsi calc() atau fungsi matematika lainnya yang menerima perhitungan, seperti min(), max(), dan clamp(). font-size calc(16px + 1vw) didasarkan pada ukuran area pandang, dan juga ukuran piksel saat ini (relatif terhadap zoom). Meskipun unit vw tidak akan terpengaruh oleh zoom, nilai dasarnya akan terpengaruh.

Hasilnya adalah font-size yang merespons ukuran area pandang dan setelan zoom pengguna. Jika pengguna melakukan zoom ke 200%, nilai dasar akan dirender dua kali lebih besar (32px), sementara nilai responsif tetap tidak berubah. Area pandang 1000px awalnya akan memberi Anda font-size sebesar 16px + 10px = 26px, tetapi pada zoom 200%, ukuran font hanya akan bertambah menjadi 42px, sedikit di atas 160%. Mungkin tidak terlihat seperti masalah yang ekstrem, tetapi semakin banyak font-size Anda didasarkan pada area tampilan, semakin kurang efektif zoom.

Pada layar kecil, font-size akan berasal terutama dari nilai piksel dasar, dan akan merespons dengan baik terhadap zoom. Namun, pada layar yang lebih besar, ukuran area tampilan menjadi sebagian besar ukuran font yang dirender, sehingga zoom kurang efektif. Hal ini menjadi sangat berbahaya pada saat zoom 500% (maksimum di sebagian besar browser) tidak lagi dapat memberikan peningkatan ukuran font 200% yang diperlukan oleh WCAG 1.4.4—tetapi bahkan sebelum itu, zoom yang tidak efektif dapat membuat frustrasi.

Di tepi kiri grafik (lebar area pandang 0), zoom 500% sepenuhnya efektif. Namun, efektivitas tersebut menurun dengan cepat seiring bertambahnya ukuran browser, dan unit area tampilan (yang tidak dapat di-zoom) menjadi faktor yang lebih besar dalam font-size. Jika lebar browser adalah 2040px, zoom maksimum 500% hanya dapat mencapai peningkatan ukuran font 200%. Setelah itu, zoom font efektif 200% tidak lagi dapat dilakukan.

Dengan memindahkan penghitungan ini ke dalam fungsi clamp(), dengan nilai min dan maks, Anda dapat menerapkan batas yang memastikan teks dapat di-zoom. Menurut Maxwell Barvian:

Jika ukuran font maksimum kurang dari atau sama dengan 2,5 kali ukuran font minimum, maka teks akan selalu lulus SC WCAG 1.4.4, setidaknya di semua browser modern.

Karena kueri @media dan @container didasarkan pada pengukuran yang sama dengan unit vw dan cqw, logika yang sama berlaku saat menggunakan titik henti sementara untuk mengubah ukuran font. Jika peningkatan ukuran terlalu drastis, zoom menjadi tidak efektif. Anda dapat bereksperimen dengan cara nilai ini berinteraksi dalam visualisasi berikut:

Cara memastikan nilai font-size responsif terhadap setelan default pengguna

Namun, calc(16px + 1vw) masih tidak responsif terhadap setelan font default pengguna. Untuk melakukannya, Anda dapat menetapkan nilai dasar—atau nilai minimum dan maksimum—menggunakan satuan em atau rem, bukan px. Dengan menggabungkan semuanya, Anda akan mendapatkan hasil yang sama dengan demo tertaut:

html {
  font-size: clamp(1em, 17px + 0.24vw, 1.125em);
}

Perhatikan bahwa:

• Nilai minimum dan maksimum menggunakan unit em, yang didasarkan pada preferensi pengguna (dan responsif terhadap zoom).
• Nilai vw tambahan dijaga seminimal mungkin, sehingga zoom tidak terlalu terpengaruh.
• Ukuran maksimum (1.125em) jauh di bawah 2,5 kali ukuran minimum (1em), sehingga memastikan nilai font-size efektif sebesar 200% selalu dapat dicapai.

Skala tipografi dengan pow()

Sebagian besar desain menggunakan lebih dari satu ukuran font. Skala tipografi menjelaskan hubungan antara beberapa ukuran font. Hal ini dapat dinyatakan sebagai ukuran dasar dan serangkaian pengganda untuk menghitung ukuran lainnya. CSS menyediakan skala tipografi bawaan yang relatif terhadap kata kunci medium, yang mengacu pada preferensi ukuran font pengguna, atau default 16px. Skala kata kunci lengkapnya adalah:

• xx-small: 3/5 (0,6)
• x-small: 3/4 (0,75)
• small: 8/9 (0,89)
• medium: 1 (ukuran dasar yang dikalikan dengan ukuran lainnya)
• large: 6/5 (1.2)
• x-large: 3/2 (1,5)
• xx-large: 2/1 (2)
• xxx-large: 3/1 (3)

Skala ini relatif terhadap default pengguna, bukan font-size root, sehingga tidak berfungsi dengan baik setelah Anda mengubah font-size root situs Anda. Sebagian besar penulis akhirnya membuat ulang skala huruf yang serupa dengan properti kustom—terkadang menggunakan nama ukuran kaus yang sama, dan terkadang lebih memilih serangkaian langkah naik dan turun dalam skala matematika. Ada banyak alat pihak ketiga untuk membuat skala ini berdasarkan rasio umum, yang sebagian besar dipinjam dari skala musik barat:

html {
  /* musical ratios */
  --minor-second: calc(16/15);
  --major-second: calc(9/8);
  --minor-third: calc(6/5);
  --major-third: calc(5/4);
  --perfect-fourth: calc(4/3);
  --augmented-fourth: sqrt(2);
  --perfect-fifth: calc(3/2);
  --major-sixth: calc(5/3);

  /* the golden ratio*/
  --golden-ratio: calc((1 + sqrt(5)) / 2);
}

Namun, Anda tidak memerlukan alat eksternal untuk membuat skala sendiri di CSS—fungsi pow() baru dapat membuat skala untuk Anda—dengan 1rem sebagai ukuran dasar Anda sendiri.

html {
  /* choose a ratio */
  --scale: 1.2;

  /* generate the scale using pow() */
  --xx-small: calc(1rem * pow(var(--scale), -0.5));
  --x-small: calc(1rem * pow(var(--scale), -0.25));
  --small: calc(1rem * pow(var(--scale), -0.125));
  --medium: 1rem;
  --large: calc(1rem * pow(var(--scale), 1));
  --x-large: calc(1rem * pow(var(--scale), 2));
  --xx-large: calc(1rem * pow(var(--scale), 3));
  --xxx-large: calc(1rem * pow(var(--scale), 4));

  /* change the ratio for different viewport sizes */
  @media (width > 50em) {
    --scale: var(--perfect-fourth);
  }
}

Anda tidak harus menggunakan langkah-langkah utuh agar skala tetap konsisten. Faktanya, skala tipografi 12pt umum menggunakan sekitar 5 pecahan per langkah. Meskipun ukuran besar di sini menggunakan langkah-langkah utuh dalam skala, ukuran kecil menggunakan pecahan untuk menskalakan pada kecepatan yang lebih lambat.

Mixin dan fungsi CSS memungkinkan untuk memadatkan logika tersebut lebih jauh, sementara alat bawaan lainnya seperti progress() mempermudah pembuatan skala yang menyesuaikan secara lancar dari satu nilai ke nilai lainnya. Namun, fitur tersebut berada di luar cakupan demo ini.

Merespons ukuran penampung dalam halaman

Anda dapat membuat semua perhitungan ini berfungsi dalam kueri penampung dengan menggunakan unit cqi sebagai pengganti vw atau vi, tetapi juga membantu untuk mempertahankan font-size pengguna di elemen html, sehingga setiap penampung pengaturan huruf dapat merujuk kembali ke preferensi pengguna tersebut sebagai 1rem. Dalam demo, Anda akan melihat bahwa seluruh skala huruf diterapkan ke body, bukan elemen html root untuk huruf global, lalu direset berdasarkan ukuran penampung untuk setiap elemen dengan atribut type-set.

Hal ini selalu menjadi pertimbangan dengan ukuran font relatif terhadap penampung. Anda mendapatkan ukuran font yang lebih lancar untuk setiap elemen dalam konteks, tetapi dengan mengorbankan konsistensi di seluruh halaman. Mana yang lebih penting bagi Anda akan bergantung pada spesifikasi kasus penggunaan Anda. Ingatlah bahwa tipografi adaptif itu sendiri adalah pertukaran, yang membuat kontrol pengguna seperti zoom menjadi kurang efektif.

Meskipun tipografi responsif dan skala tipografi adalah alat yang bagus untuk desainer, Anda tidak perlu mempersulitnya jika tidak perlu. Skala huruf bawaan dan default pengguna juga merupakan opsi yang bagus. Namun, jika Anda memilih tipografi responsif (atau lancar), pastikan untuk menguji perilaku hasilnya dalam kaitannya dengan setelan default pengguna dan setelan zoom yang berbeda. Selamat menikmati!