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.
