Font Weight

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 example sets the font weight to 100. This weight is very light and is typically used for fine text.

Sphinx of black quartz, judge my vow.

<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 example sets the font weight to 200. This weight is light and is often used for subtle emphasis.

Sphinx of black quartz, judge my vow.

<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 example sets the font weight to 300. This weight is slightly bolder than light and is used for emphasis.

Sphinx of black quartz, judge my vow.

<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 example sets the font weight to 400. This is the normal weight for body text.

Sphinx of black quartz, judge my vow.

<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 example sets the font weight to 500. This weight is medium and is often used for headings or important text.

Sphinx of black quartz, judge my vow.

<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 example sets the font weight to 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.

Sphinx of black quartz, judge my vow.

<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 example sets the font weight to 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.

Sphinx of black quartz, judge my vow.

<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 example sets the font weight to 800. This weight is extra bold and is typically used for very prominent text.

Sphinx of black quartz, judge my vow.

<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 example sets the font weight to 900. This weight is the heaviest and is often used for the most impactful text.

Sphinx of black quartz, judge my vow.

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

Conditional styles

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

Breakpoint variant

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

<div class="fw-500 md:fw-600 ..."></div>

Hover variant

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

<div class="fw-500 h:fw-600 ..."></div>