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; |
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>