font-thin…font-black (100–900) — the nine standard weights. This family contains 9 generated classes in Nakshora 3.0.
Classes#
| Class | Generated CSS |
|---|---|
font-thin | font-weight: 100; |
font-extralight | font-weight: 200; |
font-light | font-weight: 300; |
font-normal | font-weight: 400; |
font-medium | font-weight: 500; |
font-semibold | font-weight: 600; |
font-bold | font-weight: 700; |
font-extrabold | font-weight: 800; |
font-black | font-weight: 900; |
Example#
example
<p class="font-medium">Emphasis without size changes</p>Responsive & variants#
Every class here accepts screen prefixes (sm: … xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.
Best practices#
- UI standard: font-medium (500) for labels, font-semibold (600) for headings
- Your font must ship the weight or the browser fakes it
Common mistakes#
- Loading a 9-weight font for 2 used weights — subset!
Related#
colors/index|Text color · utilities/typography/font-size|Font size