Ketebalan huruf (font weight) merupakan tingkatan tebal huruf yang berlaku pada suatu huruf (font). Nilai ketebalan huruf biasanya diaplikasikan pada suatu teks yang mempunyai nilai lebih dan dianggap penting sehingga perlu diberikan penekanan. Ketebalan huruf juga dapat diaplikasikan pada seluruh teks, saat menjumpai font tertentu yang digunakan mempunyai tingkat ketebalan di bawah normal atau font-nya terlalu tipis.
Berbagai jenis font (huruf) diciptakan oleh desainernya dengan nilai ketebalan tertentu sesuai dengan tema dan karakter font tersebut. Dengan menggunakan CSS, font tersebut dapat diatur nilai ketebalannya sesuai dengan keperluan.
Nilai ketebalan huruf pada suatu font dapat diatur menggunakan properti CSS font-weight. Properti ini akan memberikan nilai ketebalan huruf berdasarkan dengan nilai yang diberikan.
Penulisan property font-weight :
font-weight: normal | number | bold | bolder | lighter | inherit;
Nilai normal akan menghasilkan tampilan ketebalan huruf dalam bentuk default. Nilai number merupakan nilai berupa angka dari 100 sampai dengan 1000 yang menunjukkan nilai ketebalan huruf. Nilai bold akan menghasilkan huruf dengan ketebalan bold standart. Nilai bolder dan lighter merupakan nilai ketebalan relative sesuai dengan nilai ketebalan elemen induknya. Dan nilai inherit merupakan nilai global yang akan menerapkan nilai sesuai dengan elemen indknya.
Sebagai contoh misalnya :
p {font-weight: 400;}
p {font-weight: 700;}
p {font-weight: bold;}
p {font-weight: lighter;}
Ketebalan huruf mempunyai nilai satuan yang berbeda dengan satuan yang berlaku pada CSS. Satuan yang biasa digunakan dalam menetapkan ukuran dimesi elemen seperti satuan px (pixel), pt, px, mm, em dan lainnya.
Nilai satuan ketebalan huruf pada CSS awal mulanya hanya menggunakan nilai dalam bentuk angka mulai dari angka 100 sampai dengan 1000. Kemudian seiring perkembangannya, mulai diperkenalkan nilai satuan dalam bentuk teks (nama ketebalan), seperti normal, bold dan lainnya.
Berikut hubungan antara nilai angka dengan nilai pada font spesifikasi serta konversinya dalam bentuk nama ketebalan pada CSS :
| Nilai | Open Type (Font) Specification | Nama Ketebalan (CSS) |
|---|---|---|
| 100 | Thin (Hairline) | - |
| 200 | Extra Light | - |
| 300 | Light | - |
| 400 | Regular | Normal |
| 500 | Medium | - |
| 600 | Semi Bold | - |
| 700 | Bold | Bold |
| 800 | Extra Bold | - |
| 900 | Heavy Bold | - |
| 950 | Ultra Bold | - |
Berikut contoh pengaturan ketebalan huruf dengan berbagai nilai :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<title>Font Weight CSS</title>
<style>
p{
font-size:20px;
border: solid 1px magenta;
padding:5px;
margin: 5px;
}
.versi{
color: red;
}
</style>
</head>
<body>
<p style="font-weight:normal;">Kindness makes you the most beautifull person in the world, no matter what you look like <span class="versi">(normal)</span>.</p>
<p style="font-weight:bold;">Kindness makes you the most beautifull person in the world, no matter what you look like <span class="versi">(bold)</span>.</p>
<p style="font-weight:100;">Kindness makes you the most beautifull person in the world, no matter what you look like <span class="versi">(100)</span>.</p>
<p style="font-weight:200;">Kindness makes you the most beautifull person in the world, no matter what you look like <span class="versi">(200)</span>.</p>
<p style="font-weight:300;">Kindness makes you the most beautifull person in the world, no matter what you look like <span class="versi">(300)</span>.</p>
<p style="font-weight:400;">Kindness makes you the most beautifull person in the world, no matter what you look like <span class="versi">(400)</span>.</p>
<p style="font-weight:500;">Kindness makes you the most beautifull person in the world, no matter what you look like <span class="versi">(500)</span>.</p>
<p style="font-weight:600;">Kindness makes you the most beautifull person in the world, no matter what you look like <span class="versi">(600)</span>.</p>
<p style="font-weight:700;">Kindness makes you the most beautifull person in the world, no matter what you look like <span class="versi">(700)</span>.</p>
<p style="font-weight:800;">Kindness makes you the most beautifull person in the world, no matter what you look like <span class="versi">(800)</span>.</p>
<p style="font-weight:900;">Kindness makes you the most beautifull person in the world, no matter what you look like <span class="versi">(900)</span>.</p>
<p style="font-weight:1000;">Kindness makes you the most beautifull person in the world, no matter what you look like <span class="versi">(1000)</span>.</p>
</body>
</html>
Hasil Script :
Kindness makes you the most beatifull person in the world, no matter what you look like (normal).
Kindness makes you the most beautifull person in the world, no matter what you look like (normal).
Kindness makes you the most beautifull person in the world, no matter what you look like (bold).
Kindness makes you the most beautifull person in the world, no matter what you look like (100).
Kindness makes you the most beautifull person in the world, no matter what you look like (200).
Kindness makes you the most beautifull person in the world, no matter what you look like (300).
Kindness makes you the most beautifull person in the world, no matter what you look like (400).
Kindness makes you the most beautifull person in the world, no matter what you look like (500).
Kindness makes you the most beautifull person in the world, no matter what you look like (600).
Kindness makes you the most beautifull person in the world, no matter what you look like (700).
Kindness makes you the most beautifull person in the world, no matter what you look like (800).
Kindness makes you the most beautifull person in the world, no matter what you look like (900).
Kindness makes you the most beautifull person in the world, no matter what you look like (1000).
Secara default, nilai huruf normal (standart) pada CSS merujuk pada satuan angka 400 dan nilai bold pada satuan angka 700.
Terdapat satuan angka mulai dari 100 sampai dengan 1000. Namun jika melihat tampilan huruf secara visual, penggunaan satuan angka tersebut tidak begitu efektif. Dan yang berlaku hanya dua buah nilai saja yaitu tampilan versi normal (100 - 500) dan tampilan versi bold (600-1000).
Satuan ketebalan huruf dengan nilai bolder (lebih tebal) dan lighter (lebih tipis) merupakan satuan relative yang nilainya sangat tergantung pada nilai ketebalan huruf pada elemen induknya. Nilai aktual ketebalan huruf yang diterapkan pada suatu elemen sangat bervariasi, tergantung nilai ketebalan huruf pada elemen induknya.
Tabel berikut menunjukan nilai aktual ketebalan huruf dan korelasinya terhadap ketebalan pada elemen induknya.
| Ketebalan Elemen Induk | Nilai Aktual Bolder | Nilai Aktual Lighter |
|---|---|---|
| Normal (400) | 700 | 100 |
| Bold (700) | 900 | 400 |
| 100 | 400 | 100 |
| 200 | 400 | 100 |
| 300 | 400 | 100 |
| 400 | 700 | 100 |
| 500 | 700 | 100 |
| 600 | 900 | 400 |
| 700 | 900 | 400 |
| 800 | 900 | 700 |
| 900 | 900 | 700 |
Berikut penggunaan satuan bolder dan lighter dengan beberapa nilai pada elemen induknya :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<title>Font Weight CSS</title>
<style>
div, p{
font-size:20px;
border: solid 1px magenta;
padding:5px;
margin: 10px 0;
}
.normal{
font-weight:normal;
}
.tebal{
font-weight:bold;
}
</style>
</head>
<body>
<div class="normal">Paragraf induk dengan ketebalan normal
<p style="font-weight:lighter;">Paragraf dengan ketebalan lighter</p>
<p style="font-weight:bolder;">Paragraf dengan ketebalan bolder</p>
</div>
<div class="tebal">Paragraf induk dengan ketebalan bold
<p style="font-weight:lighter;">Paragraf dengan ketebalan lighter</p>
<p style="font-weight:bolder;">Paragraf dengan ketebalan bolder</p>
</div>
</body>
</html>
Tutorial CSS
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Previous Page
