Font Weight

Controls the font weight of an element.

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.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-lg fw-100 p-4 rad-1 ta-c tc-slate">Sphinx of black quartz, judge my vow.</p>
</div>

200

This weight is light and is often used for subtle emphasis.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-lg fw-200 p-4 rad-1 ta-c tc-slate">Sphinx of black quartz, judge my vow.</p>
</div>

300

This weight is slightly bolder than light and is used for emphasis.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-lg fw-300 p-4 rad-1 ta-c tc-slate">Sphinx of black quartz, judge my vow.</p>
</div>

400

Initial value

This is the normal weight for body text.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-lg fw-400 p-4 rad-1 ta-c tc-slate">Sphinx of black quartz, judge my vow.</p>
</div>

500

This weight is medium and is often used for headings or important text.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-lg fw-500 p-4 rad-1 ta-c tc-slate">Sphinx of black quartz, judge my vow.</p>
</div>

600

This weight is semi-bold and is typically used for prominent headings.

Yumma CSS uses the value 600 for all headings. Learn more about it in the base styles docs.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-lg fw-600 p-4 rad-1 ta-c tc-slate">Sphinx of black quartz, judge my vow.</p>
</div>

700

This weight is bold and is often used for major headings.

Yumma CSS uses the value 700 for elements like <b> and <strong>. Learn more about it in the base styles docs.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-lg fw-700 p-4 rad-1 ta-c tc-slate">Sphinx of black quartz, judge my vow.</p>
</div>

800

This weight is extra bold and is typically used for very prominent text.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-lg fw-800 p-4 rad-1 ta-c tc-slate">Sphinx of black quartz, judge my vow.</p>
</div>

900

This weight is the heaviest and is often used for the most impactful text.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-lg fw-900 p-4 rad-1 ta-c tc-slate">Sphinx of black quartz, judge my vow.</p>
</div>

Using utility variants

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Using media queries

You can combine responsive breakpoints like sm:fw-*, md:fw-*, lg:fw-*, and xxl:fw-* to allow targeting specific utilities in different viewports.

Using hover states

Alternatively, you can apply :hover by using h:fw-* utility to override elements and change their values when hovering over them.