Typography

Font Weight

Utilities for sets the font weight.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
font-hairline	font-weight: 100	Text
font-thin	font-weight: 200	Text
font-light	font-weight: 300	Text
font-normal	font-weight: 400	Text
font-medium	font-weight: 500	Text
font-semibold	font-weight: 600	Text
font-bold	font-weight: 700	Text
font-extrabold	font-weight: 800	Text
font-black	font-weight: 900	Text

Usage

Set font-weight to an element.

<div class="font-light">
  ...
</div>

HTML

.dummy {
  @extend
    .font-light;
}

SCSS

Set font-weight with Google Fonts. (See Font Family).

<div class="font-roboto font-light">
  ...
</div>

HTML

.dummy {
  @extend
    .font-roboto,
    .font-light;
}

SCSS