Font Weight

Utility classes for controlling an element's font-weight.


When writing Less, you can set an element's font-weight by using a @fw-[weight] variable (ex. p { font-weight: @fw-normal; }). Variables are useful when writing scoped Less where an immutable class with !important isn't required or desired.

Type CSS Var Less Var Deprecated Less Var Output
Thin var(--fw-thin) @fw-thin @font-weight--thin 100
Light var(--fw-light) @fw-light @font-weight--light 200
Normal var(--fw-normal) @fw-normal @font-weight--normal 400
Medium var(--fw-medium) @fw-medium @font-weight--medium 500
Bold var(--fw-bold) @fw-bold @font-weight--bold 700
Black var(--fw-black) @fw-black @font-weight--black 900
Unset var(--fw-unset) @fw-unset @font-weight--unset unset


Starting in v5.8.0, Dialtone began providing immutable type classes, meaning they include an !important to override CSS specificity. All previous class names still exist, but are considered deprecated and should not be used moving forward. They will be removed in a future version.

Class Deprecated Class Output
.d-fw-thin .d-font-weight--thin font-weight: 100 !important;
.d-fw-light .d-font-weight--light font-weight: 200 !important;
.d-fw-normal .d-font-weight--normal font-weight: 400 !important;
.d-fw-medium .d-font-weight--medium font-weight: 500 !important;
.d-fw-bold .d-font-weight--bold font-weight: 700 !important;
.d-fw-black .d-font-weight--black font-weight: 900 !important;
.d-fw-unset .d-font-weight--unset font-weight: unset !important;

This paragraph's font weight is thin.


This paragraph's font weight is light.


This paragraph's font weight is normal.


This paragraph's font weight is medium.


This paragraph's font weight is bold.


This paragraph's font weight is black.


This paragraph's font weight has been reset using unset.

<p class="d-fw-thin"></p>
<p class="d-fw-light"></p>
<p class="d-fw-normal"></p>
<p class="d-fw-medium"></p>
<p class="d-fw-bold"></p>
<p class="d-fw-black"></p>
<p class="d-fw-unset"></p>