Belajar CSS Font dan Tipografi Lengkap

Tipografi adalah elemen penting dalam desain web karena memengaruhi cara pengguna membaca dan memahami konten di halaman. Dalam CSS, pengaturan font dan teks dapat dilakukan dengan berbagai properti yang memberikan fleksibilitas dalam menentukan tampilan teks, seperti jenis huruf, ukuran, ketebalan, jarak antar huruf, serta gaya teks lainnya. Artikel ini akan membahas secara lengkap tentang CSS Font dan Tipografi, mulai dari dasar hingga praktik terbaik untuk digunakan di dunia nyata.

Baca juga: Cara Mengatur Warna di CSS: HEX, RGB, dan HSL

Apa Itu Font dan Tipografi di CSS?

CSS Font dan tipografi mengacu pada teknik mengatur tampilan teks di halaman web. Dengan CSS, kamu dapat mengontrol aspek visual teks seperti:

• Jenis huruf (font-family)
• Ukuran huruf (font-size)
• Gaya huruf (font-style)
• Ketebalan huruf (font-weight)
• Jarak antar huruf dan baris
• Perataan teks (text-align)
• Dekorasi teks (text-decoration)

Dengan memahami properti ini, kamu bisa menciptakan pengalaman membaca yang nyaman, konsisten, dan sesuai dengan identitas merek atau desain website.

Mengatur Jenis Huruf dengan font-family

Properti font-family digunakan untuk menentukan jenis huruf yang akan digunakan. Kamu dapat menentukan satu atau beberapa font sebagai cadangan jika font utama tidak tersedia.

body {
    font-family: 'Arial', 'Helvetica', sans-serif;
}Code language: CSS (css)

Kamu juga bisa menggunakan font dari Google Fonts untuk menambah variasi tipografi yang menarik:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
    font-family: 'Roboto', sans-serif;
}Code language: CSS (css)

💡 Tips: Selalu sediakan font fallback seperti sans-serif, serif, atau monospace agar teks tetap terbaca jika font utama gagal dimuat.

Mengatur Ukuran Huruf dengan font-size

Properti font-size menentukan ukuran teks. Nilainya bisa menggunakan satuan seperti px, em, rem, %, atau vw.

p {
    font-size: 16px;
}
h1 {
    font-size: 2.5rem;
}Code language: CSS (css)

🔍 Catatan: Gunakan rem agar ukuran font responsif terhadap ukuran root HTML dan mudah diatur dalam desain yang fleksibel.

Mengatur Ketebalan Huruf dengan font-weight

Properti font-weight digunakan untuk mengatur ketebalan teks. Nilainya bisa berupa kata kunci (normal, bold) atau angka (100–900).

strong {
    font-weight: bold;
}
h2 {
    font-weight: 600;
}Code language: CSS (css)

Mengatur Gaya Huruf dengan font-style

Gunakan properti font-style untuk membuat teks miring (italic) atau normal.

em {
    font-style: italic;
}Code language: CSS (css)

Selain itu, font-style juga dapat digunakan dalam shorthand font:

p {
    font: italic 16px/1.5 'Georgia', serif;
}Code language: CSS (css)

Mengatur Jarak dan Spasi Teks

Beberapa properti penting untuk mengatur jarak teks antara huruf, kata, dan baris adalah:

p {
    line-height: 1.6; /* jarak antar baris */
    letter-spacing: 1px; /* jarak antar huruf */
    word-spacing: 2px; /* jarak antar kata */
}Code language: CSS (css)

✅ Tips: Pengaturan spasi yang tepat membantu meningkatkan keterbacaan teks, terutama pada paragraf panjang.

Mengatur Perataan dan Transformasi Teks

Perataan Teks (text-align)

h1 {
    text-align: center;
}
p {
    text-align: justify;
}Code language: CSS (css)

Transformasi Huruf (text-transform)

h2 {
    text-transform: uppercase;
}Code language: CSS (css)

Dekorasi Teks (text-decoration)

a {
    text-decoration: none;
}Code language: CSS (css)

Line Height dan Readability

Line-height adalah faktor penting dalam kenyamanan membaca. Gunakan nilai 1.5 hingga 1.8 untuk teks paragraf agar tidak terlalu rapat atau renggang.

body {
    line-height: 1.7;
}Code language: CSS (css)

Menggunakan Shorthand font di CSS

Kamu bisa menyingkat beberapa properti font menjadi satu baris menggunakan shorthand font:

p {
    font: italic bold 16px/1.6 'Roboto', sans-serif;
}Code language: CSS (css)

Format shorthand:

font: [font-style] [font-weight] [font-size]/[line-height] [font-family];Code language: HTTP (http)

Menggunakan Web Font dan Import Font

CSS mendukung web fonts yang memungkinkan penggunaan font khusus tanpa menginstal di perangkat pengguna.

@font-face {
    font-family: 'MyFont';
    src: url('fonts/MyFont.woff2') format('woff2');
}

body {
    font-family: 'MyFont', sans-serif;
}Code language: CSS (css)

📘 Tips SEO & Desain: Gunakan hanya beberapa font (maksimal 2–3) agar halaman tetap cepat dimuat dan tampilan tetap profesional.

Responsivitas dan Aksesibilitas Font

Untuk tampilan di berbagai perangkat, gunakan satuan relative seperti em atau rem. Contoh:

h1 {
    font-size: 3rem;
}
p {
    font-size: 1rem;
}Code language: CSS (css)

👓 Aksesibilitas: Pastikan kontras warna teks dan latar belakang cukup tinggi agar mudah dibaca oleh semua pengguna.

Kesimpulan

Belajar CSS Font dan Tipografi adalah langkah penting dalam memahami desain web yang baik. Dengan menguasai berbagai properti seperti font-family, font-size, font-weight, dan text-align, kamu bisa menciptakan tampilan teks yang indah, mudah dibaca, dan profesional. Jangan lupa juga memanfaatkan Google Fonts dan memastikan responsivitas agar desain tetap optimal di berbagai perangkat.