Font Weight

Set the font weight for an element.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari

Usage

<p class="fw-100 ...">Weight 100</p>
<p class="fw-200 ...">Weight 200</p>
<p class="fw-300 ...">Weight 300</p>
<p class="fw-400 ...">Weight 400</p>
<p class="fw-500 ...">Weight 500</p>
<p class="fw-600 ...">Weight 600</p>
<p class="fw-700 ...">Weight 700</p>
<p class="fw-800 ...">Weight 800</p>
<p class="fw-900 ...">Weight 900</p>
Yumma CSS uses the value 600 for all headings. Learn more about it in the base styles docs.
Yumma CSS uses the value 700 for elements like <b> and <strong>. Learn more about it in the base styles docs.

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:fw-*
Small≥640px
md:fw-*
Medium≥768px
lg:fw-*
Large≥1024px
xxl:fw-*
Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:fw-*