Font Weight - Skelementor

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.