cara mengatur font dengan CSS

Pada tutorial sebelumnya saya telah membahas tentang cara merubah warna background dengan CSS. Pada kesempatan kali ini saya akan membahas tentang cara mengatur font dengan CSS.

Font adalah jenis huruf yang digunakan di dalam sebuah dokumen. Pada aplikasi pengolah kata seperti Microsoft Word, terdapat puluhan bahkan ratusan jenis font yang bisa kita pilih. Font-font ini berasal dari sistem Windows atau dari beberapa aplikasi lain. Pada tutorial ini saya akan menjelaskan cara melakukan pengaturan font dengan CSS, seperti merubah jenis font, mengatur ukuran font, mengatur warna font dan bentuk font(tulisan miring, huruf tebal). Sebelum masuk ke pembahasan tentang cara mengatur font dengan CSS, saya akan menguraikan jenis-jenis font standar pada CSS.

Jenis-jenis Font Standar CSS

Font Standar / Font Generik adalah jenis font yang umumnya tersedia pada hampir semua sistem. Berdasarkan ’bentuknya’, font standar/font generik terbagi menjadi 5 jenis, yaitu serif, sans-serif, monospace, cursive, dan fantasy.

1. Font Serif
   Font serif adalah jenis font yang memiliki ‘kaki’ pada setiap hurufnya. Contoh font serif adalah Times New Roman dan Georgia. Font ini biasanya digunakan untuk media cetak kertas karena akan terkesan rapi dan mudah dibaca.
2. Font Sans-serif
   Font sans-serif adalah font yang tidak memiliki ‘kaki’ pada setiap ujung karakternya. Contoh font sans-serif adalah Arial, Verdana, Trebuchet MS, Helvetica, dan Calibri. Font sans-serif sering digunakan di media elektronik seperti web.
3. Font Monospace
   Font monospace adalah font yang lebar setiap karakternya sama panjangnya. Contoh font monospace adalah Courier, Courier New, dan Andale Mono. Biasanya font ini digunakan untuk hal yang bersifat teknis, seperti penulisan contoh kode program.
4. Font Cursive
   Font cursive adalah font yang ‘meniru’ tulisan tangan atau kaligrafi. Contoh font cursive adalah Comic Sans. Font ini biasanya digunakan untuk aspek tulisan yang tidak terlalu ‘formal’.
5. Font Fantasy
   Font fantasy adalah font yang bersifat visual dengan karakter font khusus seperti font disney, matrix, dan lain-lain. Font fantasy jarang digunakan untuk text halaman.

Cara Mengubah Jenis Font

Beberapa syntax CSS yang sering digunakan untuk mengatur dan mengubah font:

• font-size = digunakan untuk mengatur ukuran font.
• font-weight = digunakan untuk mengatur ketebalan font.
• font-family = digunakan untuk mengubah jenis font.
• font-style = digunakan untuk memberikan gaya pada font.
• font-color = digunakan untuk merubah warna font.

Berikut adalah contoh penggunaan syntax CSS untuk mengatur font. Silahkan Anda buat file HTML dengan nama “index.html”.

Silahkan simpan file HTML diatas dengan nama “index.html”, kemudian buat satu file css dengan nama “style.css”.

Silahkan simpan file css diatas dengan nama “style.css”, pastikan file “style.css” disimpan dalam satu folder dengan file “index.html”. Kemudian jalankan file “index.html” menggunakan browser kesayangan Anda.

Jika tidak terjadi kesalahan, maka hasilnya seperti berikut:

Dari gambar diatas kita bisa melihat bahwa untuk merubah ukuran font bisa menggunakan perintah “font-size”, untuk mengatur lebar font menggunakan perintah “font-weight”, untuk merubah jenis font menggunakan perintah “font-family”, untuk mengatur gaya font menggunakan “font-style”, untuk merubah warna font menggunakan “color”.

Demikian tutorial tentang cara mengatur font dengan CSS, silahkan bagikan atau share artikel ini jika dirasa ada yang membutuhkan.