Bagaimana cara membuat teks menjadi tebal di css?

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;}

Memahami Nilai Pada Ketebalan Huruf (Font Weight)

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 :

NilaiOpen Type (Font) SpecificationNama Ketebalan (CSS)100Thin (Hairline)-200Extra Light-300Light-400RegularNormal500Medium-600Semi Bold-700BoldBold800Extra Bold-900Heavy Bold-950Ultra Bold-

Berikut contoh pengaturan ketebalan huruf dengan berbagai nilai :

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

Font Weight CSS


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).

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).

Menggunakan Satuan Relative Bolder Dan Lighter

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 IndukNilai Aktual BolderNilai Aktual LighterNormal (400)700100Bold (700)900400100400100200400100300400100400700100500700100600900400700900400800900700900900700

Bagaimana cara membuat teks menjadi tebal CSS?

Bagaimana cara membuat teks tebal?

Apa itu font

Bagaimana cara membuat text tebal HTML?