Cara Membuat Tipografi Responsif dengan CSS

Mengembangkan situs web dengan begitu banyak breakpoint bisa melelahkan. Ada banyak teknik baru untuk dipelajari di CSS, apakah Anda seorang developer berpengalaman atau developer tingkat menengah.

Tapi bagaimana Anda memulai dengan tipografi responsif? Berikut cara mengambil langkah-langkah untuk mengadaptasi halaman web ke ukuran layar apa pun.

Pentingnya Tipografi Responsif

Tipografi memainkan peran penting dalam pengembangan dan desain web dengan memastikan keterbacaan, kegunaan, dan estetika keseluruhan situs web. Semua orang menginginkan situs web yang responsif. Bukankah lebih bagus jika teks atau font secara otomatis disesuaikan dengan ukuran layar yang berbeda? Keuntungan lain dari tipografi responsif dalam pengembangan web adalah sebagai berikut;

• Ini meningkatkan pengalaman pengguna secara keseluruhan di berbagai perangkat atau ukuran layar dengan memastikan keterbacaan dan keterbacaan.
instagram viewer
• Ini meningkatkan aksesibilitas dengan mengakomodasi pengguna tunanetra atau disabilitas lainnya. Ini mengakomodasi berbagai preferensi pengguna, seperti ukuran font yang dapat disesuaikan.
• Tipografi yang konsisten di seluruh perangkat dan resolusi membantu mempertahankan identitas merek dan kesatuan visual.

Berikut adalah template kode yang dapat Anda salin ke editor kode Anda sebelum memulai, sehingga Anda dapat mengikuti teknik yang akan dibahas.

File Kode HTML

index.html
html>
<htmllang="en">
<kepala>
<metacharset="UTF-8">
<metanama="area pandang"isi="width=device-width, initial-scale=1.0">
<tautanrel="lembar gaya"href="style.css">
<judul> Tipografi Responsif judul>
kepala>
<tubuh>
<divkelas="wadah">
<h1> Lorem ipsum h1>
<P> Lorem ipsum dolor sit, amet consectetur adipisicing elite. Ut, obcaecati. Corporis quam, blanditiis odit optio dignissimos facilis magni doloribus adipisci at quaerat oluptas molestiae eius dicta officia quod eaque perspiciatis! 
P>
div>
tubuh>
html>

File Kode CSS

/*style.css*/
tubuh{
menampilkan: melenturkan;
membenarkan-konten: tengah;
menyelaraskan-item: tengah;
tinggi: 100vh;
}
.wadah{
lebar: 400px;
warna latar belakang: antiquewhite;
lapisan: 15px;
bayangan kotak:0 2px 5pxrgba(0,0,0, 0.1) ;
}
h1{
warna: hotpink;
}

Sekarang, mari jelajahi beberapa metode dan teknik yang efektif untuk menerapkan tipografi responsif menggunakan CSS

1. Menjepit

Ini adalah teknik tipografi CSS modern yang memungkinkan dan memastikan ukuran font suatu elemen tetap dalam kisaran tertentu. Fungsi penjepit “Clamp()” mengambil tiga parameter, nilai minimum, nilai ideal, dan nilai maksimum. Fungsi penjepit tidak terbatas pada tipografi. Dapat digunakan untuk gambar, kartu, video, dan media lainnya. Begini Cara kerjanya.

Penjepit (nilai min, nilai ideal, nilai maks):

h1{
ukuran huruf: penjepit(2rem, 5ay, 3rem);
}
P{
ukuran huruf: penjepit(1rem, 3ay, 2rem);
}

Dalam contoh ini, ukuran font untuk heading dan paragraf diatur menggunakan fungsi “clamp()”. Untuk tajuk "h1", nilai minimum disetel ke "2rem" memastikan ukuran font tidak akan di bawah dua kali ukuran font root. Nilai ideal atau pilihan diatur ke "5vw", yaitu 5% dari lebar viewport sehingga responsif terhadap ukuran layar yang berbeda. Nilai maksimum diatur ke "3 rem" memastikan ukuran font tidak akan lebih besar dari tiga kali ukuran font root. Begitu juga sebaliknya untuk penataan paragraf.

Praktik terbaiknya adalah menggunakan lebar viewport "vw" atau persentase "%" untuk nilai ideal, karena ini memungkinkan properti menskalakan secara proporsional berdasarkan ruang yang tersedia, membuat desain lebih responsif. Pastikan bahwa Anda tahu unit CSS mana yang harus Anda gunakan untuk skenario Anda.

Ini adalah teknik tipografi yang paling umum digunakan oleh pengembang. Ini melibatkan pembuatan kueri media untuk setiap breakpoint. Ini memungkinkan Anda untuk menerapkan gaya tertentu berdasarkan ukuran layar yang berbeda. Berikut ilustrasinya:

/* Ukuran font default */
h1{
ukuran huruf: 38px;
}
P{
ukuran huruf: 20px;
}
/* Font-size untuk layar kecil */
@media (lebar maks:800px){
h1{
ukuran huruf: 32px;
}
P{
ukuran huruf: 18px;
}
}
/* Font-size untuk layar yang lebih kecil */
@media (lebar maks:400px){
h1{
ukuran huruf: 28px;
}
P{
ukuran huruf: 15px;
}
}

Dalam contoh ini, tajuk dan paragraf disetel ke nilai default masing-masing "38px" hingga "20px". Kemudian, kondisi diatur untuk ukuran layar yang lebih kecil agar tata letak responsif pada ponsel. Anda dapat membuat kueri media sebanyak yang Anda suka berdasarkan desain dan daya tanggap yang Anda inginkan, di antara banyak lainnya trik CSS kueri media yang harus Anda ketahui.

3. Properti Khusus CSS

Juga dikenal sebagai variabel khusus CSS, ini menyimpan nilai yang dapat digunakan kembali di seluruh penataan gaya Anda. Ini dapat digunakan untuk tipografi untuk memungkinkan pengelolaan dan penyesuaian yang mudah. Ini sebuah contoh.

:akar {
--heading-font-size: 3rem;
--paragraph-font-size: 1.5rem;
}
h1{
ukuran huruf: var(--heading-font-size);
}
P{
ukuran huruf: var(--paragraph-font-size);
}
@media (lebar maks:800px){
:akar {
--heading-font-size: 2rem;
--paragraph-font-size: 0.9rem;
}
}
@media (lebar maks:400px){
:akar {
--heading-font-size: 1.5rem;
--paragraph-font-size: 0.8rem;
}
}

Dalam contoh ini, properti CSS diatur pada level root, yang memungkinkan kita untuk mengaksesnya secara global. --heading-font-size dan --paragraph-font-size masing-masing adalah nama deskriptif untuk heading dan paragraf, dengan nilai default yang diberikan untuk keduanya. Teknik ini dapat digunakan kembali untuk berbagai kueri media untuk memastikan konsistensi di seluruh papan.

Praktik Terbaik Tipografi Responsif

Ini adalah praktik umum di kalangan pengembang untuk menggunakan lebar viewport (vw) secara langsung untuk melakukan tipografi. Meskipun sederhana dan tampak berfungsi, ia menjadi kecil pada ukuran layar kecil dan sangat besar pada ukuran layar besar. Ini juga terjadi saat Anda memperbesar dan memperkecil halaman Anda. Jika bisa, hindari menggunakan viewport secara langsung seperti ini;

h1{
ukuran huruf: 2vh;
 }

Selalu uji dan pastikan tipografi Anda dapat dibaca di berbagai ukuran layar dan selalu uji kompatibilitas browser. Pertimbangkan keterbacaannya, dan pastikan ukuran font tidak terlalu kecil atau terlalu besar

Tipografi Responsif Kunci Desain Web yang Dapat Dibaca

Tipografi responsif memainkan peran penting dalam desain dan pengembangan web. Dengan menerapkan metode dan teknik seperti penjepitan, kueri media, dan properti khusus CSS, Anda dapat memastikan skala tipografi Anda di berbagai ukuran layar dan perangkat. Ada begitu banyak teknik untuk dijelajahi saat mencoba membuat daya tanggap menggunakan CSS--gunakan teknik ini untuk mulai mengembangkan keahlian di bidang ini.