Font Weight

Dial in typographic emphasis using .font-* utilities from ultra-thin to ultra-black.

Overview

Use font-* classes to control emphasis without changing the size scale.

Class	Weight	CSS	Usage notes
.font-thin	100	font-weight: 100;	Ultra-fine display use
.font-extralight	200	font-weight: 200;	Light editorial accents
.font-light	300	font-weight: 300;	Subtle supporting text
.font-normal	400	font-weight: 400;	Default body copy
.font-medium	500	font-weight: 500;	Labels and UI controls
.font-semibold	600	font-weight: 600;	Section headings
.font-bold	700	font-weight: 700;	Primary headings and buttons
.font-extrabold	800	font-weight: 800;	Strong emphasis
.font-black	900	font-weight: 900;	Display typography

Example

<div class="elementor-element">
  <p class="text-base font-light text-gray">
    Designed for Elementor
  </p>
  <h2 class="text-3xl font-bold text-black">
    Craft polished typographic systems
  </h2>
  <p class="text-base font-normal text-gray-dark">
    Mix `.font-medium` for UI labels with `.font-semibold` or `.font-bold` for headings.
  </p>
</div>

Recommendations

• Pair font weights with font files that are actually loaded on the site.
• Use heavier weights for small UI labels and lighter weights only when contrast and size support them.
• Keep most pages to two or three weight choices for a cleaner voice.

Combine .font-semibold with .text-3xl or .text-4xl for marketing headlines. The bundled text scale already handles responsive sizing behavior where it ships.