Font CSS

Dengan CSS kamu bisa membuat membuat font dan text tampil sesuai dengan yang kamu inginkan. Kamu bisa memodifikasi color, size, bahkan style dari font yang kamu gunakan.

Font color

Untuk merubah warna dari text kamu tidak perlu menuliskan code [font-color] tetapi kamu hanya cukup menuliskan code [color] saja. Hal ini dimaksudkan untuk memudahkan dan membuat simple dari penulisan code CSS bagi para coder CSS.

Code CSS font color:

h2 { color: red; }
h3 { color: #9000A1; }
h4 { color: rgb(0, 220, 98); }

Hasil code CSS font color:

Ini adalah header h2 dengan warna merah.

Ini adalah header h3 dengan warna hexadecimal #9000A1.

Ini adalah header h4 dengan warna rgb(0, 220, 98).

Pada tiga contoh diatas kita menggunakan tiga jenis warna yaitu nama warna, hexadecimal, dan RGB.

Font family

Font family bisa dibagi menjadi dua grup yaitu serif dan sans-serif. Font serif bisa dilihat dengan ciri ada garis kecil dibagian bawah dari setiap characternya.

Untuk memilih font apa yang ingin digunakan maka kamu bisa menggunakan font sans-serif yang lebih mudah dan jelas untuk dibaca.

Code CSS font family:

h2 { font-family: serif; }
h3 { font-family: sans-serif; }
h4 { font-family: arial; }

Hasil code CSS font family:

Ini adalah header h2 dengan font serif

Ini adalah header h3 dengan font sans-serif

Ini adalah header h4 dengan font arial

Font size

Untuk memodifikasi size dari sebuah font kamu bisa menggunakan tiga metode yaitu pixel, persen, dan keyword. Ada tiga perbedaan tampilan dari ketiga metode ini.

Yang pertama yaitu pixel, kalau kamu menggunakan pixel maka visitor dari web page kamu tidak bisa merubah ukuran dari font yang sudah kamu gunakan dengan browser yang mereka miliki.

Yang kedua yaitu persen, dengan persen maka kamu tidak perlu menetapkan berapa ukuran pasti sebuah font tetapi kamu cukup memberinya ukuran dalam persen yang nantinya tampilan font ini akan disesuaikan dengan web browser visitor.

Yang ketiga yaitu font size dengan keyword, hanya ada beberapa ukuran yang bisa kamu gunakan yaitu xx-large, x-large, large, medium, small, x-small, dan xx-small.

size
 percentage
  • satuan dalam persen
 keywords
  • xx-large
  • x-large
  • large
  • medium
  • small
  • x-small
  • xx-small

Code font size CSS:

h2 { font-size: 20px; }
h3 { font-size: 120%; }
h4 { font-size: x-large; }

Hasil code font size CSS:

Ini adalah header h2 dengan font size 20px

Ini adalah header h3 dengan font size 120%

Ini adalah header h4 dengan font size “x-large”

Font style

Font style CSS bisa kita gunakan untuk memformat font menjadi italic, normal, maupun oblique. Sebenarnya antara italic dan oblique hampir sama yaitu text akan dimiringkan sedikit.

Yang berbeda adalah kalau oblique maka tampilan text hanya akan dimiringkan ke arah kanan, sedangkan kalau italic adalah selain dimiringkan maka text akan ditampilkan dengan style atau bentuk yang berbeda, tetapi style yang digunakan tergantung jenis font yang digunakan.

Lihat perbedaan antara oblique dan italic disini.

Code CSS font style:

h2 { font-style: italic; }
h3 { font-style: oblique; }

Hasil code CSS font style:

Ini adalah font italic dengan header h2

Ini adalah font oblique dengan header h3

Font Weight

Font weight artinya adalah ketebalan dari sebuah font. Ukuran yang saya sarankan untuk kamu gunakan adalah kelipatan dari 100 misalkan saja 100, 200 atau seterusnya. Karena kalau kurang dari 100 maka perbedaannya tidak begitu terlihat. Pilihlah ukuran font weight dari 100 sampai 900.

Selain dengan angka, kamu juga bisa memakai keyword untuk value dari font weight. Keyword yang bisa kamu pakai untuk font-weight: bold, bolder, dan normal.

Code CSS font Weight:

h2 { font-weight: 100; }
h3 { font-weight: bolder; }

Hasil code CSS font weight:

Text ini menggunakan header h2 font weight 100

Text ini adalah header h3 menggunakan font-weight: bolder

Font variant

Dengan font-variant maka semua huruf akan dirubah menjadi small caps baik huruf besar maupun huruf kecil. Small caps ini merupakan kependekan dari small capital yang artinya huruf yang diberi modifikasi ini akan tampil sebagai huruf capital yang berukuran kecil.

Biasanya small caps ini digunakan untuk code nama unsur kimia atau running text supaya huruf besar yang diberi small caps ukurannya tidak berbeda jauh dengan huruf kecil di sebelahnya.

Code CSS font variant:

p { font-variant: small-caps; }

Hasil CSS font variant:

Text ini semuanya menggunakan small caps.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>