loading...

CSS Dasar: Font Styling

Font styling merupakan teknik CSS untuk memberikan style pada sebuah font. Perbedaan style untuk font dan text yaitu kalau font terkait dengan tulisannya, sedangkan text untuk properti pendukung. Properti CSS yang digunakan untuk mengatur sebuah font ada enam yaitu font-family, font-size, font-weight, font-variant, font-style, dan line-height.

Mari kita bereksperimen dengan script HTML yang udah tersambung secara eksternal dengan file CSS berikut.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Dasar</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Kata</h1>
	<h2>Kata-kata</h2>
   	<p>Kata-kata-kata</p>
</body>
</html>


Font-family: mengatur jenis font 

Value dari properti ini dibagi menjadi dua dalam satu kesatuan yaitu nama font dan generic family.


h1 {
	font-family: arial, verdana, sans-serif;
}

h2 {
	font-family: "times new roman", serif;
}

p {
	font-family: calibri, sans-serif;
}


Font-size: mengatur ukuran font

Properti ini memiliki value dengan satuan (px, %, em)

h1 {
	font-family: arial, verdana, sans-serif;
   font-size: 100px;
}

h2 {
	font-family: "times new roman", serif;
   font-size: 500%;
}

p {
	font-family: calibri, sans-serif;
   font-size: 5em;
}


Font-weight: mengatur ketebalan font

Properti ini memiliki 5 value (lighter, normal, 100-900, bold, bolder)

 h1 {
	font-family: arial, verdana, sans-serif;
   font-size: 100px;
   font-weight: lighter;
}

h2 {
	font-family: "times new roman", serif;
   font-size: 500%;
   font-weight: 500;
}

p {
	font-family: calibri, sans-serif;
   font-size: 5em;
   font-weight: bold;
}


Font-variant: mengubah font menjadi small caps

Properti ini memiliki dua value yaitu 'normal' dan 'small-caps'. Small caps yaitu font diubah menjadi huruf besar semua, namun yg semula huruf kecil akan menjadi huruf besar dengan ukuran yg lebih kecil.

h1 {
	font-family: arial, verdana, sans-serif;
   font-size: 100px;
   font-weight: lighter;
   font-variant: small-caps;
}

h2 {
	font-family: "times new roman", serif;
   font-size: 500%;
   font-weight: 500;
   font-variant: small-caps;
}

p {
	font-family: calibri, sans-serif;
   font-size: 5em;
   font-weight: bold;
   font-variant: normal;
}


Font-style: mengubah font menjadi bercetak miring

Ada tiga value, secara default yaitu 'normal', kemudian kalau 'italic' akan berubah miring jika ada tipe font miring, dan 'oblique' untuk memaksakan font regular menjadi miring sekian derajat.

h1 {
	font-family: arial, verdana, sans-serif;
   font-size: 100px;
   font-weight: lighter;
   font-variant: small-caps;
   font-style: normal;
}

h2 {
	font-family: "times new roman", serif;
   font-size: 500%;
   font-weight: 500;
   font-variant: small-caps;
   font-style: italic;
}

p {
	font-family: calibri, sans-serif;
   font-size: 5em;
   font-weight: bold;
   font-variant: normal;
   font-style: oblique;
}


Line-height: mengatur spasi antar baris

Properti ini memiliki value (px, %, em) yang sama dengan properti font-size namun kegunaannya yang berbeda.

h1 {
	font-family: arial, verdana, sans-serif;
   font-size: 100px;
   font-weight: lighter;
   font-variant: small-caps;
   font-style: normal;
   line-height: 5em;
}

h2 {
	font-family: "times new roman", serif;
   font-size: 500%;
   font-weight: 500;
   font-variant: small-caps;
   font-style: italic;
   line-height: 5px;
}

p {
	font-family: calibri, sans-serif;
   font-size: 5em;
   font-weight: bold;
   font-variant: normal;
   font-style: oblique;
   line-height: normal;
}

Terakhir agar lebih ringkas penulisan CSS Font tersebut, bisa kita menggunakan shorthand (singkatan) dengan diurutkan dari style, variant, weight, size, height, dan font-family.  Hasil penulisannya sebagai berikut:

h1 {
   font: normal small-caps lighter 100px/5em arial,verdana,sans-serif;
}

h2 {
   font: italic small-caps 500 500%/5px "times new roman",serif;
}

p {
   font: oblique normal bold 5em/normal calibri,sans-serif;
}


Ok cukup materi CSS kali ini, mari terus belajar dan jangan takut untuk mencoba. Materi selanjutya kita akan belajar Text-styling pada CSS. Semangat terus bung!


0 Comments

Leave a comment