Tutorial CSS : Cara Mengatur Font
• 11 min read • 3869 views
Tutorial CSS : Cara Mengatur Font
Font adalah elemen penting dalam desain web yang berperan besar dalam menentukan estetika dan keterbacaan konten. Dalam tutorial ini, kita akan membahas cara mengatur font menggunakan CSS (Cascading Style Sheets), sebuah bahasa yang digunakan untuk mendesain tampilan halaman web. Menguasai teknik-teknik dasar pengaturan font di CSS, seperti memilih jenis font, mengatur ukuran, gaya, berat, dan warna, akan memberikan fleksibilitas yang lebih besar dalam mendesain halaman web yang menarik dan mudah dibaca. Mari kita jelajahi berbagai properti CSS yang dapat digunakan untuk mengontrol tampilan teks dan meningkatkan pengalaman pengguna di situs web Anda.
Table of Contents
Mengatur Jenis Font di CSS
Untuk mengatur jenis font pada sebuah halaman web, kita bisa menggunakan properti `font-family`. Properti ini memungkinkan kita memilih berbagai jenis font yang akan digunakan untuk elemen teks. Berikut adalah beberapa cara untuk mengatur jenis font menggunakan properti `font-family`:
Contoh:
```css
body {
font-family: Arial, sans-serif;
}
```
Artinya:
Kita akan mengatur jenis font untuk seluruh elemen `<body>` menggunakan font Arial. Jika Arial tidak tersedia, browser akan menggunakan jenis font sans-serif lainnya.
Selain menetapkan satu jenis font, kita juga dapat memberikan beberapa jenis font sebagai cadangan. Ini berguna jika font utama tidak tersedia di perangkat pengguna.
Contoh dengan Font Cadangan:
```css
h1 {
font-family: "Times New Roman", Times, serif;
}
```
Artinya:
Kita mengatur jenis font untuk elemen `<h1>` menggunakan font "Times New Roman". Jika tidak tersedia, browser akan mencoba menggunakan Times, dan jika Times juga tidak tersedia, akan menggunakan font serif generik.
Baca Juga
Menetapkan Font dari Google Fonts:
Untuk menggunakan font dari layanan seperti Google Fonts, kita perlu menambahkan link ke font tersebut di bagian `<head>` dari HTML kita.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Font Family</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<h1>Contoh Penggunaan Font Family</h1>
<p>Ini adalah contoh paragraf dengan font Roboto dari Google Fonts.</p>
</body>
</html>
```
Artinya:
Kita mengimpor font Roboto dari Google Fonts dan menetapkannya sebagai font utama untuk seluruh teks pada halaman.
Contoh Penggunaan Font Family:
Mari kita buat file HTML baru dengan nama `font-family.html`, kemudian isi dengan kode berikut:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Font Family</title>
<style>
h1 {
font-family: 'Georgia', serif;
color: darkgreen;
}
.font-alternate {
font-family: 'Courier New', Courier, monospace;
}
.font-google {
font-family: 'Roboto', sans-serif;
}
</style>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
</head>
<body>
<h1>Contoh Font Family</h1>
<p class="font-alternate">Ini adalah paragraf dengan font monospace.</p>
<p>Ini adalah paragraf dengan font serif standar.</p>
<p class="font-google">Ini adalah paragraf dengan font Roboto dari Google Fonts.</p>
</body>
</html>
```
Setelah itu, buka file `font-family.html` dengan web browser Anda untuk melihat hasilnya. Dengan demikian, Anda telah mempelajari cara mengatur jenis font menggunakan CSS, baik dengan font standar maupun font yang diimpor dari Google Fonts.
Mengatur Ketebalan Font di CSS
Mengatur ketebalan font pada halaman web merupakan salah satu aspek penting dalam desain tipografi. Ketebalan font dapat memberikan penekanan pada teks tertentu, membantu menciptakan hierarki visual, dan meningkatkan keterbacaan. Untuk mengatur ketebalan font, kita menggunakan properti `font-weight` di CSS. Properti ini memberikan fleksibilitas dalam menentukan tingkat ketebalan teks, baik menggunakan nilai konstan maupun angka tertentu.
Nilai-Nilai `font-weight` yang Valid:
- `
lighter`: Menjadikan font lebih tipis dari berat normal. - `
normal`: Mengatur font pada ketebalan standar, yang biasanya memiliki nilai 400. - `
bold`: Membuat font lebih tebal dari berat normal, biasanya dengan nilai 700. - `
bolder`: Menjadikan font lebih tebal dari `bold`. - Rentang angka dari 100 hingga 900: Angka yang lebih kecil (misalnya, 100, 200) menghasilkan font yang lebih tipis, sementara angka yang lebih besar (misalnya, 800, 900) menghasilkan font yang lebih tebal.
Contoh Penggunaan `font-weight`:
Misalnya, jika kita ingin membuat teks paragraf lebih tebal, kita bisa menggunakan kode berikut:
```css
p {
font-weight: bold;
}
```
Artinya, kita akan mengatur ketebalan font semua elemen `<p>` menjadi lebih tebal.
Selain nilai konstan seperti `bold` dan `normal`, kita juga bisa menggunakan rentang angka untuk menentukan ketebalan secara lebih spesifik. Ini sangat berguna ketika kita menggunakan font yang mendukung berbagai tingkat ketebalan.
Contoh Penggunaan dengan Rentang Angka:
```css
p {
font-weight: 600;
}
```
Dalam contoh ini, kita mengatur ketebalan font elemen `<p>` pada nilai 600, yang biasanya sedikit lebih tebal dari `normal` tetapi tidak setebal `bold`.
Latihan Praktik:
Untuk lebih memahami penggunaan `font-weight`, mari kita buat file HTML baru dengan nama `font-weight.html`. Isi file tersebut dengan kode berikut:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Font Weight</title>
<style>
h1 {
font-weight: bold;
}
.light {
font-weight: lighter;
}
.normal {
font-weight: normal;
}
.bold {
font-weight: bold;
}
.extra-bold {
font-weight: 900;
}
</style>
</head>
<body>
<h1>Contoh Font Weight</h1>
<p class="light">Font Weight berfungsi untuk menentukan ketebalan font. Contoh ini menggunakan nilai 'lighter' yang menjadikan teks lebih tipis dari normal.</p>
<p class="normal">Ini adalah contoh paragraf dengan font-weight normal, yang merupakan ketebalan standar teks.</p>
<p class="bold">Ini adalah contoh paragraf dengan font-weight bold, menjadikan teks lebih tebal dari normal.</p>
<p class="extra-bold">Ini adalah contoh paragraf dengan font-weight 900, memberikan ketebalan ekstra pada teks.</p>
</body>
</html>
```
Setelah menulis kode di atas, buka file `font-weight.html` dengan web browser Anda untuk melihat hasilnya. Dengan berbagai contoh di atas, Anda dapat melihat bagaimana perubahan nilai `font-weight` memengaruhi ketebalan teks.
Mengapa Mengatur Ketebalan Font Penting ?
Mengatur ketebalan font tidak hanya penting untuk estetika, tetapi juga untuk fungsionalitas. Berikut beberapa alasan mengapa pengaturan ketebalan font penting:
- Penekanan Visual: Menggunakan font tebal (bold) untuk judul, subjudul, atau poin penting dapat menarik perhatian pembaca dan memudahkan mereka dalam memahami struktur konten.
- Hierarki Informasi: Penggunaan berbagai tingkat ketebalan dapat membantu menciptakan hierarki visual yang jelas, membedakan antara informasi utama dan informasi tambahan.
- Aksesibilitas: Teks yang lebih tebal sering kali lebih mudah dibaca oleh orang dengan gangguan penglihatan, sehingga meningkatkan aksesibilitas situs web.
- Estetika dan Branding: Ketebalan font yang tepat dapat memperkuat identitas visual dan konsistensi merek, membuat desain lebih profesional dan menarik.
Dengan memahami dan mempraktikkan penggunaan `font-weight` di CSS, Anda dapat meningkatkan tampilan dan keterbacaan halaman web, memberikan pengalaman yang lebih baik bagi pengguna.
Mengatur Font Style di CSS
Properti `font-style` digunakan untuk mengatur gaya teks, khususnya untuk membuat teks menjadi miring. Gaya miring sering digunakan untuk memberikan penekanan atau menandai teks yang memiliki makna khusus, seperti kutipan atau istilah asing. Nilai yang valid untuk properti `font-style` adalah:
- `
normal`: Menampilkan teks dengan gaya normal, tanpa kemiringan. - `
italic`: Menampilkan teks dengan gaya miring (italic). - `
oblique`: Menampilkan teks dengan gaya miring yang mirip dengan italic, tetapi biasanya lebih serong.
Contoh Penggunaan:
Misalnya, jika kita ingin membuat teks dalam elemen `<blockquote>` menjadi miring, kita bisa menggunakan kode berikut:
```css
blockquote {
font-style: italic;
}
```
Artinya, kita akan mengatur semua elemen `<blockquote>` dengan gaya font miring.
Latihan Praktik:
Untuk lebih memahami penggunaan `font-style`, mari kita buat file HTML baru dengan nama `font-style.html`. Isi file tersebut dengan kode berikut:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Font Style</title>
<style>
blockquote {
font-style: italic;
font-size: larger;
color: dodgerblue;
}
cite {
font-size: small;
font-style: normal;
color: fuchsia;
}
</style>
</head>
<body>
<h1>Contoh Font Style</h1>
<blockquote>
"Hidup itu sebentar. Kamu harus bisa tersenyum saat merasakan kepedihan atau kita tak akan pernah melanjutkan hidup".
<cite>~ Jeff Ross</cite>
</blockquote>
</body>
</html>
```
Setelah menulis kode di atas, buka file `font-style.html` dengan web browser Anda untuk melihat hasilnya. Dengan contoh di atas, kita bisa melihat bagaimana penggunaan `font-style` mengubah tampilan teks.
Penjelasan Kode:
- `
<blockquote>`: Teks dalam elemen ini akan ditampilkan dengan gaya miring, ukuran font lebih besar, dan warna biru cerah (`dodgerblue`). Ini memberikan penekanan visual yang jelas pada kutipan. - `
<cite>`: Teks dalam elemen ini akan ditampilkan dengan ukuran font kecil, gaya font normal, dan warna fuchsia. Ini membedakan teks kutipan dari teks penulis kutipan.
Mengapa Mengatur Font Style Penting?
- Penekanan dan Konteks: Menggunakan gaya miring untuk kutipan, istilah asing, atau kata-kata penting membantu pembaca memahami konteks dan memberikan penekanan yang tepat.
- Estetika: Font style dapat meningkatkan estetika desain halaman, membuat teks lebih menarik dan variatif.
- Konsistensi: Menggunakan gaya font yang konsisten untuk elemen tertentu seperti kutipan atau referensi memperkuat struktur visual dan meningkatkan keterbacaan.
Dengan memahami dan mempraktikkan penggunaan `font-style` di CSS, Anda dapat membuat teks di halaman web Anda lebih bervariasi dan menarik secara visual, sekaligus membantu pembaca dalam memahami konteks dan makna teks.
- Sejarah dan Tips Belajar CSS
- Tutorial CSS Part 2 : Bentuk Dasar Sintaks
- Tutorial CSS : Jenis-jenis Selektor
- Tutorial CSS : Cara Penulisan
- Tutorial CSS : Cara Mewarnai Teks
- Tutorial CSS - Pembuatan Background
- Tutorial CSS : Text Formatting
- Tutorial CSS: Cara Membuat Garis di CSS
- Tutorial CSS : Cara Mengatur Font
- Tutorial CSS : Box Model
- Tutorial CSS: Menentukan Ukuran Elemen dengan Satuan yang Tepat
- 6 Manfaat Belajar CSS untuk Programmer
- 7 Proyek Mini CSS untuk Meningkatkan Skill Kamu
- 6 Properti CSS yang Paling Sering Digunakan dan Cara Mengoptimalkannya
- 5 Efek Animasi CSS yang Akan Membuat Situs Web Kamu Lebih Menarik
- 6 Tips Dasar Coding CSS yang Jarang Diketahui Banyak Orang
Last updated on June 03, 2026
