Font Weight
Font-weight styles for HTML tags such as <p> and <h1>.
font-bold
This text demonstrates bold. Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.
<p class="font-bold"></p>
The font-bold class sets the font-weight to bold.
font-[relative]
Experience Design Made Simple for Living Design Systems
font-lighter
Experience Design Made Simple for Living Design Systems
font-bolder
<h6 class="font-bolder"></h6>
Use the font-[relative] classes of font-bolder or font-lighter set the next adjacent font-weight relative to the current font-family.
font-[number]
Experience Design Made Simple for Living Design Systems
font-100
Experience Design Made Simple for Living Design Systems
font-200
Experience Design Made Simple for Living Design Systems
font-300
Experience Design Made Simple for Living Design Systems
font-400
Experience Design Made Simple for Living Design Systems
font-500
Experience Design Made Simple for Living Design Systems
font-600
Experience Design Made Simple for Living Design Systems
font-700
Experience Design Made Simple for Living Design Systems
font-800
Experience Design Made Simple for Living Design Systems
font-900
<h6 class="font-900"></h6>
Use a font-[number] class such as font-900 to define font-weight as a numerical value. Generally, font-500 would be a regular weight, while font-300 would be lighter or thinner, and font-700 heavier or more bold. These classes may not always work, depending on your fonts.
Reset
Experience Design Made Simple for Living Design Systems
<p class="font-bold">Experience Design Made Simple <span class="font-no-weight">for Living Design Systems</span></p>
The font-no-weight class removes the font-weight.