Css3 (Foto: Text Formatting: Text-Align, Text-Decoration, Text-Transform, Letter-Spacing.)

Responsive Typography: Menguasai Satuan vw, vh, rem, dan em

Pada era awal desain web, kita terbiasa menggunakan satuan px (piksel) untuk mengatur ukuran teks. Sayangnya, piksel bersifat kaku (statis). Teks berukuran 16px akan tampak sama besarnya di layar raksasa maupun di layar smartphone yang sempit, yang sering kali merusak tata letak atau membuat tulisan sulit dibaca.

Untuk mengatasi masalah ini, CSS modern menyediakan satuan relatif yang beradaptasi dengan lingkungannya: vw, vh, rem, dan em. Mari kita bedah fungsi masing-masing agar tipografi di SatuMedia (riwara.id) terlihat sempurna!

1. Satuan Viewport: vw dan vh (Responsif terhadap Layar)

Satuan ini menjadikan ukuran jendela browser (viewport) sebagai patokan utamanya.

• vw (Viewport Width): 1vw sama dengan 1% dari total lebar layar.

• vh (Viewport Height): 1vh sama dengan 1% dari total tinggi layar.

Kapan Digunakan?

Sangat cocok untuk Judul Utama (Headline) atau teks rak sasa pada Hero Banner yang Anda ingin selalu proporsional dengan lebar layar, tanpa peduli seberapa besar atau kecil layarnya.

Kelemahan & Solusinya:

Jika Anda hanya menggunakan font-size: 5vw;, teks bisa menjadi terlalu kecil hingga tidak terbaca di HP, dan terlalu raksasa di monitor PC.

Solusi Pro: Selalu gabungkan vw dengan fungsi clamp() yang sudah kita pelajari sebelumnya!

.hero-headline { /* Teks minimal 24px, idealnya 5vw, tapi maksimal 48px */ font-size: clamp(24px, 5vw, 48px);
}

2. Satuan Root & Parent: rem dan em (Responsif terhadap Sistem)

Ini adalah satuan yang paling direkomendasikan untuk teks konten, paragraf, dan elemen antarmuka.

A. Satuan rem (Root EM)

rem selalu berpatokan pada ukuran font elemen paling akar di HTML (yaitu tag ). Secara default di hampir semua browser, ukuran font akar ini adalah 16px.

• 1rem = 16px

• 2rem = 32px

• 0.5rem = 8px

Keunggulan Mutlak rem:

rem sangat ramah aksesibilitas. Jika pembaca Anda memiliki gangguan penglihatan dan menyetel ukuran font default browser mereka menjadi lebih besar (misal 20px), maka seluruh elemen yang menggunakan rem di website Anda akan ikut membesar secara proporsional. Teks yang memakai px statis tidak akan ikut membesar!

B. Satuan em (Element/Parent EM)

Berbeda dengan rem yang melihat ke "Akar", em berpatokan pada ukuran font elemen pembungkusnya (parent).

Jika sebuah

/* 1. Reset font size akar ke 100% (agar mengikuti settingan browser user) */
html { font-size: 100%; /* Umumnya sama dengan 16px */
} /* 2. Artikel Utama */
.article-content { font-size: 1rem; /* 16px */ line-height: 1.6; color: #333;
} /* 3. Judul Artikel */
.article-content h2 { font-size: 2.5rem; /* 40px (16 x 2.5) */ /* Margin bawah menggunakan 'em' agar jarak proporsional dengan besarnya judul */ margin-bottom: 0.5em; } /* 4. Tombol Interaktif */
.btn-read-more { font-size: 1.25rem; /* 20px */ /* Padding menggunakan 'em'. Jika font-size tombol ini nanti diubah, padding akan otomatis menyesuaikan diri! */ padding: 0.5em 1em; background-color: #004a99; color: white; border-radius: 4px;
}