ComboStrap Styling - Boldness (Font Weight)

About

boldness is a typographic effect that sets the 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:

  • Input
This text is a **bold text**.
  • Output:

This text is a bold text.

Name or numerical Value

You can also set a precise value with the 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 itext component

  • Input
This text is a <itext boldness="black">black text</itext>
  • Output:

This text is a black text

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 text component

  • Input
<text boldness="light">
This text is a <itext boldness="bolder">bolder text</itext>
</text>
  • Output:

This text is a bolder text

Powered by ComboStrap