[ @sdxc/u/typography ]
font-weight
Applies font-weight.
import { weight } from "@sdxc/u/typography";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.weight("semibold") | css({ fontWeight: 600 }) |
u.weight(550) | css({ fontWeight: 550 }) |
Examples
Basic example
Use weight(name), like weight("medium") or weight("bold"), to set the font weight of an element:
weight("light")
The quick brown fox jumps over the lazy dog.
weight("normal")
The quick brown fox jumps over the lazy dog.
weight("medium")
The quick brown fox jumps over the lazy dog.
weight("semibold")
The quick brown fox jumps over the lazy dog.
weight("bold")
The quick brown fox jumps over the lazy dog.
<div mix={[...]}>
<div>
<p mix={[...]}>weight("light")</p>
<p mix={[weight("light"), text("xl")]}>The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<p mix={[...]}>weight("normal")</p>
<p mix={[weight("normal"), text("xl")]}>The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<p mix={[...]}>weight("medium")</p>
<p mix={[weight("medium"), text("xl")]}>The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<p mix={[...]}>weight("semibold")</p>
<p mix={[weight("semibold"), text("xl")]}>The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<p mix={[...]}>weight("bold")</p>
<p mix={[weight("bold"), text("xl")]}>The quick brown fox jumps over the lazy dog.</p>
</div>
</div>Numeric weights
Pass a number from 1 to 1000, like weight(550), for a weight between the named steps when the font is variable:
weight(350)
Aa
weight(450)
Aa
weight(550)
Aa
weight(650)
Aa
weight(750)
Aa
<div mix={[...]}>
<div>
<p mix={[...]}>weight(350)</p>
<p mix={[weight(350), text("3xl")]}>Aa</p>
</div>
<div>
<p mix={[...]}>weight(450)</p>
<p mix={[weight(450), text("3xl")]}>Aa</p>
</div>
<div>
<p mix={[...]}>weight(550)</p>
<p mix={[weight(550), text("3xl")]}>Aa</p>
</div>
<div>
<p mix={[...]}>weight(650)</p>
<p mix={[weight(650), text("3xl")]}>Aa</p>
</div>
<div>
<p mix={[...]}>weight(750)</p>
<p mix={[weight(750), text("3xl")]}>Aa</p>
</div>
</div>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.weight("semibold"))Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.weight("semibold"))Signature
u.weight(value?: FontWeightValue)