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 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 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 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 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 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 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 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 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 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-* to allow 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>