Series Mahir CSS #5 : Font CSS

Author Hilya Zea
25 Dec 2024
Css
Series Mahir CSS #5 : Font CSS

Halo, teman-teman! Apa kabar? Kali ini kita akan belajar tentang font CSS. Font adalah elemen penting dalam desain website karena memengaruhi bagaimana teks terlihat dan terbaca. Dengan memahami properti font di CSS, kamu bisa membuat teks di website lebih menarik dan sesuai dengan gaya yang diinginkan. Yuk, kita bahas dari dasar hingga tuntas!

Properti Font di CSS

CSS menyediakan berbagai properti untuk mengatur tampilan teks. Berikut adalah properti utama yang sering digunakan:

  1. font-family
    Properti ini digunakan untuk menentukan jenis font yang akan digunakan. Kamu bisa memilih font yang sudah tersedia di perangkat (web-safe fonts) atau mengimpor font dari sumber eksternal seperti Google Fonts.

    Contoh:

    p {
    font-family: Arial, sans-serif;
}

  2. font-size
    Mengatur ukuran font. Kamu bisa menggunakan satuan seperti px, em, %, atau rem.

    Contoh:

    h1 {
    font-size: 24px;
}

  3. font-weight
    Digunakan untuk menentukan ketebalan font. Nilainya bisa berupa:

    • normal
    • bold
    • lighter
    • Atau angka seperti 100, 200, hingga 900.

    Contoh:

    strong {
    font-weight: bold;
}

  4. font-style
    Mengatur gaya font seperti:

    • normal
    • italic
    • oblique

    Contoh:

    em {
    font-style: italic;
}

  5. line-height
    Mengatur jarak antar baris teks. Properti ini sangat penting untuk meningkatkan keterbacaan.

    Contoh:

    p {
    line-height: 1.5;
}

  6. letter-spacing
    Mengatur jarak antar huruf.

    Contoh:

    h2 {
    letter-spacing: 2px;
}

  7. text-transform
    Mengatur kapitalisasi teks. Nilainya bisa berupa:

    • uppercase (semua huruf besar).
    • lowercase (semua huruf kecil).
    • capitalize (huruf pertama setiap kata besar).

    Contoh:

    h3 {
    text-transform: uppercase;
}

Contoh Kombinasi Properti Font

Berikut adalah contoh penggunaan beberapa properti font secara bersamaan:

body {
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

h1 {
    font-size: 36px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 3px;
}

HTML:

<h1>Judul Besar</h1>
<p>Ini adalah paragraf dengan teks yang menggunakan font Roboto dan warna teks abu-abu.</p>

Menggunakan Google Fonts

Google Fonts adalah sumber populer untuk mendapatkan font gratis. Berikut cara menggunakannya:

  1. Pilih font di Google Fonts
  2. Salin link font ke dalam <head> file HTML 
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  3. Gunakan font di CSS 
    body {
    font-family: 'Roboto', sans-serif;
}

Tips dan Trik

  • Gunakan font yang mudah dibaca untuk teks utama, seperti Arial, Verdana, atau Roboto.
  • Hindari menggunakan terlalu banyak jenis font dalam satu halaman, cukup 2-3 saja untuk menjaga konsistensi.
  • Selalu cek fallback fonts untuk memastikan teks tetap terlihat meski font utama gagal dimuat.

Sekianlah belajar CSS tentang properti font. Dengan menguasai properti ini, kamu bisa membuat teks di website terlihat lebih profesional dan menarik. Artikel ini sangat berguna sebelum Anda melanjutkan ke tutorial CSS selanjutnya di www.code80vity.com. Sampai jumpa di tutorial berikutnya, dan jangan lupa untuk terus berlatih! ?

Tutorial Terkait Lainnya

Series Mahir CSS #14 : CSS Animation
Series Mahir CSS #14 : CSS Animation

Hai teman-teman! Kali ini kita akan membahas topik yang seru dan menarik, yaitu Animasi CSS! Dengan ...

Baca Tutorial
Series Mahir CSS #2 : Penulisan CSS
Series Mahir CSS #2 : Penulisan CSS

Hai, hai! Gimana nih, sudah siap belajar lebih jauh tentang CSS? Kali ini kita bakal bahas cara penu...

Baca Tutorial
Series Mahir CSS #8 : CSS Positioning
Series Mahir CSS #8 : CSS Positioning

Hai, teman-teman! Ketemu lagi di tutorial CSS kita. Kali ini kita bakal membahas tentang pengaturan ...

Baca Tutorial

Comments

Please login to post a comment.
No comments yet. Be the first to comment!
Previous Next
Tutorial Terkait
Series Mahir CSS #2 : Penulisan CSS
Series Mahir CSS #9 : CSS Border
Series Mahir CSS #13 : CSS Grid – Layout yang Lebih Terstruktur
Series Mahir CSS #7 : CSS Formating
Tutorial Terbaru
Python Dasar #10: Modul dan library
26 Dec 2024 Python
Python Dasar #9: Penggunaan File
26 Dec 2024 Python
Python Dasar #8: Exception Handling
26 Dec 2024 Python
Python Dasar #7: conditional Python
26 Dec 2024 Python
Python Dasar #6: List dan Dictionary di Python
26 Dec 2024 Python