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 #3 : Background CSS
Series Mahir CSS #3 : Background CSS

Halo, teman-teman! Apa kabar hari ini? Semoga semangatnya tetap membara untuk belajar CSS. Kali ini ...

Baca Tutorial
Series Mahir CSS #16 : Responsive Design
Series Mahir CSS #16 : Responsive Design

Halo lagi! Kali ini kita akan bahas tentang Responsive Design. Ini adalah teknik penting dalam penge...

Baca Tutorial
Series Mahir CSS #17 : CSS Custom Properties
Series Mahir CSS #17 : CSS Custom Properties

Hai, selamat datang kembali! Kali ini kita akan belajar tentang CSS Custom Properties, atau yang leb...

Baca Tutorial

Comments

Please login to post a comment.
No comments yet. Be the first to comment!
Previous Next
Tutorial Terkait
Series Mahir CSS #15 : CSS Transition
Series Mahir CSS #13 : CSS Grid – Layout yang Lebih Terstruktur
Series Mahir CSS #10 : List dengan CSS
Series Mahir CSS #11 : CSS Float
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