Skip to main content

​
Weight Scale

Weights are aligned with standard numeric values so you can map them to any font family that supports the range.

Font weight utilities

ClassWeightCSSUsage notes
.font-thin100font-weight: 100;Ultra-fine hero overlays
.font-extralight200font-weight: 200;Light captions on dark backgrounds
.font-light300font-weight: 300;Subtle supporting text
.font-normal400font-weight: 400;Default body copy
.font-medium500font-weight: 500;Navigation, cards, CTAs
.font-semibold600font-weight: 600;Section headings and key metrics
.font-bold700font-weight: 700;Primary headings and buttons
.font-extrabold800font-weight: 800;Emphasis on hero headings
.font-black900font-weight: 900;Large display typography
<div class="space-y-2">
  <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 with the right font files. Ensure your Elementor site loads weight variants that match the utilities you plan to use.
  • Keep contrast accessible. Heavy weights improve legibility at smaller sizes; lighter weights need larger sizes or higher contrast.
  • Use restraint. Stick to two or three weights per page to maintain a cohesive voice.
Combine .font-semibold with .text-fluid-3xl for marketing headlines. The fluid scale handles sizing while the semi-bold weight keeps text readable across breakpoints.