Published on
Sabtu, 8 Juni 2024

CSS #3: Styling Teks & Font

avatar
Authors
Hizbullah Najihan
Instagram
@hizz.nn

Menyusun teks dalam desain web memerlukan pemahaman yang baik tentang berbagai jenis font, properti teks, dan cara mengimplementasikan font eksternal seperti Google Fonts dan @font-face. Dalam bagian ini, kita akan menjelaskan tipe-tipe font, properti teks, serta cara mengintegrasikan font dari sumber eksternal.

Tipe-Tipe Font

Font memainkan peran penting dalam menyampaikan pesan dan menciptakan suasana tertentu dalam desain web. Berikut adalah beberapa tipe font yang umum digunakan:

  • Serif: Font serif memiliki garis kecil di ujung huruf. Mereka sering digunakan dalam teks cetak seperti koran dan buku karena dianggap lebih mudah dibaca dalam blok teks yang panjang. Contoh font serif termasuk Times New Roman, Georgia, dan Garamond.
  • Sans-Serif: Font sans-serif tidak memiliki garis kecil di ujung huruf, sehingga memberikan tampilan yang lebih bersih dan modern. Font ini sering digunakan dalam desain web untuk teks yang lebih pendek atau sebagai heading. Contoh font sans-serif termasuk Arial, Helvetica, dan Verdana.
  • Monospace: Setiap karakter dalam font monospace memiliki lebar yang sama, membuatnya ideal untuk kode atau teks teknis. Contoh font monospace termasuk Courier, Consolas, dan Monaco.

Properti Teks

Untuk mengatur tampilan teks di halaman web, CSS menyediakan berbagai properti teks. Beberapa properti yang paling sering digunakan meliputi:

Color: Properti ini menentukan warna teks. Misalnya, color: #333; akan mengatur teks menjadi warna abu-abu gelap.

.teks {
  color: #333;
}

Font-Size: Properti ini menentukan ukuran teks. Misalnya, font-size: 16px; akan mengatur teks menjadi ukuran 16 piksel.

.teks {
  font-size: 16px;
}

Font-Weight: Properti ini menentukan ketebalan teks. Misalnya, font-weight: bold; akan membuat teks menjadi tebal.

.teks {
  font-weight: bold;
}

Text-Align: Properti ini menentukan perataan teks. Misalnya, text-align: center; akan mengatur teks agar rata tengah.

.teks {
  text-align: center;
}

Text-Decoration: Properti ini digunakan untuk menambahkan dekorasi pada teks seperti garis bawah, garis di atas, atau garis di tengah. Misalnya, text-decoration: underline; akan mengatur teks dengan garis bawah.

.teks {
  text-decoration: underline;
}

Penggunaan Google Fonts dan @font-face

Untuk memberikan variasi lebih pada tampilan teks, Anda dapat mengintegrasikan font eksternal ke dalam desain web. Dua metode yang populer adalah menggunakan Google Fonts dan @font-face.

Google Fonts

Menyediakan ratusan font yang dapat digunakan secara gratis dalam desain web. Berikut adalah langkah-langkah untuk menggunakan Google Fonts:

  1. Kunjungi Google Fonts.

  2. Pilih font yang Anda inginkan dan tambahkan ke koleksi Anda.

  3. Salin link <link> yang disediakan oleh Google Fonts dan tempelkan di bagian <head> dari HTML Anda:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  1. Gunakan font tersebut dalam CSS Anda:
body {
  font-family: 'Roboto', sans-serif;
}

@font-face

Jika Anda ingin menggunakan font yang tidak tersedia di Google Fonts atau ingin meng-host font Anda sendiri, Anda dapat menggunakan @font-face. Berikut adalah contoh penggunaan @font-face:

  1. Unduh font yang ingin Anda gunakan dan simpan dalam direktori proyek Anda.

  2. Tambahkan deklarasi @font-face dalam CSS Anda:

@font-face {
  font-family: 'MyCustomFont';
  src: url('/path/to/font.woff2') format('woff2'),
       url('/path/to/font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
  1. Gunakan font tersebut dalam CSS Anda:
body {
  font-family: 'MyCustomFont', sans-serif;
}

Dengan memahami dan menerapkan berbagai jenis font, properti teks, serta cara mengintegrasikan font eksternal, Kalian dapat meningkatkan tampilan dan keterbacaan desain web Anda.

Sumber