Font Weight
Controls the font weight of an element.
Widely available
This feature is well established and works across many devices and browser versions.
| Class | Style |
|---|---|
fw-100 | font-weight: 100; |
fw-200 | font-weight: 200; |
fw-300 | font-weight: 300; |
fw-400 | font-weight: 400; |
fw-500 | font-weight: 500; |
fw-600 | font-weight: 600; |
fw-700 | font-weight: 700; |
fw-800 | font-weight: 800; |
fw-900 | font-weight: 900; |
100
This weight is very light and is typically used for fine text.
Sphinx of black quartz, judge my vow.
200
This weight is light and is often used for subtle emphasis.
Sphinx of black quartz, judge my vow.
300
This weight is slightly bolder than light and is used for emphasis.
Sphinx of black quartz, judge my vow.
400
Initial value
This is the normal weight for body text.
Sphinx of black quartz, judge my vow.
500
This weight is medium and is often used for headings or important text.
Sphinx of black quartz, judge my vow.
600
This weight is semi-bold and is typically used for prominent headings.
600 for all headings. Learn more about it in the base styles docs.Sphinx of black quartz, judge my vow.
700
This weight is bold and is often used for major headings.
700 for elements like <b> and <strong>. Learn more about it in the base styles docs.Sphinx of black quartz, judge my vow.
800
This weight is extra bold and is typically used for very prominent text.
Sphinx of black quartz, judge my vow.
900
This weight is the heaviest and is often used for the most impactful text.
Sphinx of black quartz, judge my vow.
Using utility variants
Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.
Targeting different viewports
You can combine responsive breakpoints like sm:fw-*, md:fw-*, lg:fw-*, and xxl:fw-* to allow targeting specific utilities in different viewports.
Targeting hover states
Alternatively, you can apply :hover by using h:fw-* utility to override elements and change their values when hovering over them.