---json
{
    "description": "boldness is a typographic effect that sets the font weight. It defines the width of a character outlines relative to its height. It's also known as strongness.",
    "page_id": "dd0i74454dynry3c00imf",
    "title": "How to set the Boldness (Font Weight \/ Strong)"
}
---
====== ComboStrap Styling - Boldness (Font Weight) ======

===== About =====
''boldness'' is a [[docs:content:typo|typographic effect]] that sets the [[docs:styling:font|font]] weight. It defines the width of a character outlines relative to its height.
===== Syntax =====

==== Double Star ====

With the ''double star'', you can set quickly the font weight (boldness) to the value ''bold''

Example:
<webcode name="Default" frameborder="0">
  * Input
<code dw>
This text is a **bold text**.
</code>
  * Output:
</webcode>


\\
\\
<note warning>
You cannot use this syntax with only space before it on a line because it will be seen as a [[:docs:lists:list|list element]].
</note>
==== Name or numerical Value ====
You can also set a precise value with the [[docs:content:typo|typographic attribute]] ''boldness'' that accepts a name or a numerical value.

The following names are supported and any numerical value.

^ Name ^ Numerical values ^
| ''Thin'' | 100 |
| ''Extra-light'' | 200 |
| ''Light'' | 300 |
| ''Normal'' | 400 |
| ''Medium'' | 500 |
| ''Semi-bold'' | 600 |
| ''Bold'' | 700 |
| ''Extra-bold'' | 800 |
| ''Black'' | 900 |
| ''Extra-black'' | 950 |

Example with the [[docs:content:itext|itext component]]
<webcode name="Default" frameborder="0">
  * Input
<code dw>
This text is a <itext boldness="black">black text</itext>
</code>
  * Output:
</webcode>


==== Superlatif (More or less than)  ====

You can also set a superlatif that is set according to the ''boldness'' of the parent.

We accepts the following values:
  * ''bolder'': bolder than the parent
  * ''lighter'': lighter than the parent



Example with the [[docs:block:text|text component]]
<webcode name="Default" frameborder="0">
  * Input
<code dw>
<text boldness="light">
This text is a <itext boldness="bolder">bolder text</itext>
</text>
</code>
  * Output:
</webcode>