Tutorial Cara Mengubah Warna Teks dan Jenis Font di HTML

Pemilihan warna pada teks dan jenis font yang diterapkan pada dokumen HTML yang kita buat merupakan salah satu hal penting yang perlu diperhatikan dan dipertimbangkan. Dimana font merupakan jenis huruf yang digunakan di dalam sebuah dokumen.

Ada beberapa hal yang harus kita perhatikan seperti apakah jenis font yang diterapkan sesuai dengan desain website, apakah jenis font yang diterapkan memudahkan pengunjung membaca konten di website, apakah jenis font tersebut sesuai dengan tema atau topik dari website ataupun kontennya dan apakah warna teks yang diterapkan sesuai dengan background serta tidak menyulitkan pengunjung untuk membaca teks tersebut dan sebagainya.

HTML sendiri menyediakan elemen – elemen yang khusus untuk mengatur penerapan font dan warna pada dokumen HTML. Ada banyak jenis font yang dapat kita gunakan tetapi kita juga harus ingat bahwa font yang akan ditampilkan pada web browser secara keseluruhan berasal dari komputer user. Tidak menjadi masalah jika browser yang digunakan berasal dari komputer kita tetapi jika dibuka di browser pada komputer lain bisa saja desain web yang sudah dirancang menjadi kacau karena jenis font yang diterapkan tidak tersedia pada komputer tersebut.

Oleh karena itulah digunakan font standar yang umumnya tersedia di Windows, Linux, Mac OS dan yang lainnya. Font standar umumnya didukung oleh mayoritas web browser jadi Anda tidak perlu khawatir. Berikut jenis – jenis font standar yang dapat Anda gunakan :

1. Jenis Font Serif

Font serif adalah jenis font yang memiliki kaki pada setiap hurufnya seperti Times New Roman dan Georgia. Font jenis ini cenderung rapid dan mudah dibaca sehingga umumnya digunakan untuk media cetak kertas.

2. Jenis Font Monospace

Font monospace adalah jenis font yang lebar setiap karakternya sama panjang seperti Courier, Courier New, dan Andale Mono. Karena sifatnya itulah, font ini umumnya digunakan untuk menulis program.

3. Jenis Font Sans-Serif

Font sans-serif adalah jenis font yang tidak mempunyai kaki pada setiap hurufnya seperti Arial, Verdana, Trebuchet MS, Helvetica, dan Calibri. Font ini sering digunakan sebagai jenis font pada website.

4. Jenis Font Cursive

Font cursive adalah jenis font yang menirus kaligrafi atau tulisan tangan seperti Comic Sans. Font ini biasanya digunakan untuk aspek tulisan yang tidak terlalu formal.

5. Jenis Font Fantasy

Font fantasy adalah jenis font yang bersifat visual dengan karakter font khusus seperti font matrix, disney dan yang lainnya serta jarang digunakan untuk teks halaman.

Agar Anda lebih memahami materi warna teks dan jenis font di HTML, mari simak penjelasan dibawah ini :

Element Font

Dengan tag font, Anda dapat mengatur ataupun mengubah warna dan ukuran suatu teks. Anda juga dapat menggunakan elemen font yang sudah disediakan oleh HTML.

Penggunaan elemen ini ditandai dengan tag dan diakhiri dengan tag . Pengubahan warna dan ukuran teks dilakukan dengan menggunakan atribut – atribut yang ada pada elemen font yaitu :

Atribut	Fungsi
Face	Menyatakan jenis font yang digunakan pada halaman web
Color	Menyatakan warna teks yang digunakan
Size	Menyatakan ukuran suatu teks dengan nilai 1 sampai 7

Berikut contoh kode penggunaan tag font di HTML :

<!DOCTYPE html>
<html>
 <head>
  <title>Penggunaan Elemen Font</title>
 </head>
 <body>
 <p align="justify"><font face="Courier New" color="green" size="3">Claudio Andres Bravo Munoz menandatangani kontrak sebagai kiper FC Barcelona pada musim panas 2014 berasal dari Real Sociedad. Lahir pada 13 April 1983, di kota kecil Viluco de Buin, di daerah Santiago Cile. Ia mulai bermain sepak bola sejak kecil, walaupun awalnya bukanlah sebagai seorang kiper, sebaliknya ia bermain sebagai seorang striker dan kemudian menjadi pemain bertahan.</font></p>
 </body>
</html>

Setelah kode diatas dijalankan pada browser maka akan terlihat seperti gambar dibawah ini :

Di dalam penggunaannya saat ini, tag hanya didukung oleh HTML 4.01 tetapi tidak didukung bahkah dihilangkan oleh HTML5. Hal itu dikarenakan penggunaan tag dapat diganti dengan CSS dimana fungsi CSS yang lebih unggul dan efisien dibanding tag .

Berikut contoh penggunaan CSS dalam pengaturan font di HTML :

<!DOCTYPE html>
<html>
 <head>
  <title>Penggunaan CSS - FONT di HTML</title>
 <style type="text/css">
   #p{
   color: #ff00ff;
   font-size: 20px;
   font-weight: bold;
   font-family:Rockwell, Calibri, Monospace;
   font-style : oblique; }

   #p1{
   color:#0000FF;
   font-size: 1em;
   font-weight: normal;
   font-variant: small-caps;
   font-family: Andale Mono;}
 </style>
 </head>
 <body>
 <p id="p">Contoh penggunaan CSS untuk mengatur font style pada suatu teks di HTML</p>
 <p id="p1">Contoh Berikutnya Ini</h5>
 </body>
</html>

Hasilnya akan terlihat seperti gambar dibawah ini :

Setelah Anda melihat kode CSS dan gambar tampilannya di browser, tentunya Anda memiliki banyak pertanyaan seperti apa fungsi dari properti – properti font yang ada pada kode diatas. Berikut saya berikan sedikit penjelasannya satu per satu (tapi ingat ya, kita tetap fokus di HTML dulu bukan CSS) :

A. CSS font size

Font size digunakan untuk menentukan ukuran dari karakter teks yang akan ditampilkan. Jadi, Anda bisa menerapkan ukuran font yang berbeda-beda untuk setiap teks yang ada pada dokumen HTML. Anda bisa menggunakan satuan pixel, em ataupun % untuk menentukan ukuran font-nya seperti contoh yang ada pada kode sebelumnya yaitu :

#p{ font-size: 20px; }
#p1{ font-size: 1em; }

Sangat disarankan untuk menggunakan satuan em daripada pixel dimana 1em sama dengan 16 pixel. Tapi jika anda lebih nyaman menggunakan pixel juga tidak masalah. Pada contoh #p1 { font-size: 1em; }, nilai pixel-nya adalah 16 pixel karena 16 pixel / 16 = 1em.

B. CSS font family

Font family digunakan untuk menentukan jenis font yang diterapkan pada dokumen HTML. Sebagai contoh lihatlah contoh penggunaan font-family pada kode sebelumnya yaitu :

#p{ font-family:Rockwell, Calibri, Monospace;}
#p1{ font-family: Andale Mono;}

Pada #p, terdapat tiga jenis font yaitu Rockwell, Calibri dan Monospace. Yang mana maksudnya adalah jenis font yang pertama kali akan diterapkan adalah Rockwell. Tetapi jika jenis font Rockwell tidak tersedia pada komputer user maka jenis font yang akan diterapkan menjadi Calibri. Kemudian, jika tidak tersedia juga barulah menerapkan Monospace yang merupakan font standar.

C. CSS font weight

Font weight digunakan untuk mencetak huruf tebal, berikut contohnya pada kode
sebelumnya:

#p{ font-weight: bold;}
#p1{ font-weight: normal};

D. CSS font style

Font style digunakan untuk membuat tek tercetak miring dimana Anda dapat menggunakan 3 nilai yaitu normal, italic dan oblique. Berikut contoh penggunaan font style :

#p{ font-style : oblique;} // Teks ditampilkan berbentuk condong
#p1{ font-style : normal;} // Teks ditampilkan biasa tanpa style
#p2(font-style : italic;} // Teks ditampilkan dalam huruf miring

E. CSS font variant

Font variant digunakan untuk mencetak teks dalam bentuk huruf kapital semua. Berikut contoh penggunaannya :

#p{ font-variant: normal;} // Teks normal
#p1{ font-variant: small-caps ;} // Teks ditampilkan dalam huruf kapital semua

Setelah membaca artikel diatas, saya harap Anda sudah bisa mengganti warna beserta jenis fontnya pada dokumen HTML anda. Tutorial HTML berikutnya mengenai cara membuat kutipan di HTML dengan menggunakan tag q dan blockquote.