Font Weight

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

Variables

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

Classes

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;
.d-fw-thin

This paragraph's font weight is thin.

.d-fw-light

This paragraph's font weight is light.

.d-fw-normal

This paragraph's font weight is normal.

.d-fw-medium

This paragraph's font weight is medium.

.d-fw-bold

This paragraph's font weight is bold.

.d-fw-black

This paragraph's font weight is black.

.d-fw-unset

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>