Advan- Mengubah font di website menggunakan CSS merupakan salah satu cara paling efektif untuk memperindah tampilan halaman websitemu. Font yang elegan bisa memberikan kesan profesional sekaligus membuat pengguna lebih nyaman saat membaca konten. Kalau kamu sedang mencari cara yang praktis dan efektif untuk mengubah font menggunakan CSS, kamu datang ke tempat yang tepat! Di artikel ini, kita akan membahas langkah-langkah detail yang mudah diikuti agar websitemu tampil lebih elegan dan menarik.
Tampilan website yang menarik bukan hanya soal desain grafis, tetapi juga pilihan font. Dengan mengubah font di website menggunakan CSS, kamu bisa menciptakan suasana yang sesuai dengan brand atau tema websitemu. Dari font yang minimalis hingga yang artistik, semua bisa disesuaikan menggunakan CSS.
1. Memahami Dasar CSS untuk Mengubah Font
Sebelum memulai, kamu perlu paham dasar-dasar CSS. CSS atau Cascading Style Sheets adalah bahasa yang digunakan untuk mengatur tampilan sebuah website, termasuk mengubah font. Langkah pertama yang bisa kamu lakukan adalah mempelajari cara memasukkan properti font dalam CSS:
Gunakan Properti Font-Family
Properti utama yang digunakan untuk mengubah font di website menggunakan CSS adalah font-family. Dengan properti ini, kamu bisa memilih berbagai jenis font, baik dari default font system atau font dari Google Fonts. Berikut contoh sederhana:
body {
font-family: ‘Arial’, sans-serif;
}
Pada contoh di atas, font default dari websitemu akan berubah menjadi “Arial”. Jika browser tidak mendukung font tersebut, maka akan otomatis menggunakan font jenis sans-serif.
Google Fonts dan CSS
Jika kamu ingin tampilan yang lebih elegan, kamu bisa menggunakan font dari Google Fonts. Ini adalah cara praktis untuk mendapatkan berbagai pilihan font yang menarik. Misalnya, untuk menggunakan font “Roboto”, kamu cukup memasukkan kode ini di dalam file HTML:
<link href=”https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap” rel=”stylesheet”>
Setelah itu, tambahkan properti font-family di CSS seperti berikut:
body {
font-family: ‘Roboto’, sans-serif;
}
Dengan cara ini, font di websitemu akan langsung berubah sesuai yang kamu inginkan.
Baca Juga: Apa Itu CSS dan Bagaimana Cara Kerjanya dalam Web Development yang Modern?
2. Menentukan Ukuran dan Gaya Font yang Elegan
Mengubah font di website menggunakan CSS bukan hanya soal jenis font, tapi juga ukuran dan gaya. Ukuran font yang ideal membuat teks lebih mudah dibaca, sementara gaya font bisa memberikan nuansa yang berbeda pada kontenmu.
Ukuran Font yang Proporsional
Menggunakan ukuran font yang pas sangat penting. Biasanya, ukuran font untuk paragraf berkisar antara 16px hingga 18px. Tapi, kamu bisa menyesuaikannya dengan layout dan desain websitemu. Contoh penggunaannya di CSS adalah:
p {
font-size: 18px;
}
Selain itu, kamu juga bisa menggunakan satuan rem atau em, yang lebih responsif terhadap berbagai ukuran layar.
Menambahkan Gaya pada Font
Untuk membuat teks lebih menonjol, kamu bisa menambahkan gaya seperti bold atau italic. Ini bisa dilakukan menggunakan properti font-weight dan font-style. Contohnya:
h1 {
font-weight: bold;
font-style: italic;
}
3. Mengatur Spasi dan Tinggi Baris untuk Kenyamanan
Selain jenis dan ukuran font, pengaturan spasi dan tinggi baris juga berpengaruh terhadap tampilan teks di websitemu. Dengan CSS, kamu bisa mengatur jarak antar huruf dan tinggi baris agar teks lebih mudah dibaca.
Mengatur Spasi Antar Huruf
Untuk memberikan sedikit ruang antar huruf, kamu bisa menggunakan properti letter-spacing. Misalnya, jika kamu ingin memberikan sedikit spasi pada heading, cukup tambahkan:
h1 {
letter-spacing: 2px;
}
Mengatur Tinggi Baris
Tinggi baris atau line-height juga berperan penting dalam kenyamanan membaca. Idealnya, tinggi baris berkisar antara 1.5 hingga 2 kali dari ukuran font. Berikut contohnya:
p {
line-height: 1.6;
}
Baca Juga: Tutorial Membuat Layout Grid Sederhana dengan HTML dan CSS Langkah Demi Langkah
Mengubah font di website menggunakan CSS memang bisa meningkatkan keindahan tampilan websitemu, apalagi jika kamu memilih font yang sesuai dengan tema website. Tapi selain tampilan yang menarik, kamu juga butuh performa laptop yang mumpuni untuk mendesain website dengan lancar. Di sini, Advan Laptop Soulmate hadir sebagai solusi! Laptop ini hadir dengan performa terbaik, mendukung multitasking dan desain website yang membutuhkan kinerja optimal.***
Editor: Andik Chefasa