[ @sdxc/u/typography ]
font-size
Applies font-size from the named text scale (xs through 9xl, or an app-extended name), resolving the same token as u.text()'s font-size half but touching only font-size, leaving line-height fully caller-set.
import { fontSize } from "@sdxc/u/typography";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.fontSize("lg") | css({ fontSize: "var(--ui-text-lg, 1.125rem)" }) |
Examples
Basic example
Use fontSize(name) with a step of the text scale, like fontSize("sm") or fontSize("2xl"), to set the font size of an element:
fontSize("sm")
The quick brown fox jumps over the lazy dog.
fontSize("base")
The quick brown fox jumps over the lazy dog.
fontSize("lg")
The quick brown fox jumps over the lazy dog.
fontSize("xl")
The quick brown fox jumps over the lazy dog.
fontSize("2xl")
The quick brown fox jumps over the lazy dog.
<div mix={[...]}>
<div>
<p mix={[...]}>fontSize("sm")</p>
<p mix={[fontSize("sm")]}>The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<p mix={[...]}>fontSize("base")</p>
<p mix={[fontSize("base")]}>The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<p mix={[...]}>fontSize("lg")</p>
<p mix={[fontSize("lg")]}>The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<p mix={[...]}>fontSize("xl")</p>
<p mix={[fontSize("xl")]}>The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<p mix={[...]}>fontSize("2xl")</p>
<p mix={[fontSize("2xl")]}>The quick brown fox jumps over the lazy dog.</p>
</div>
</div>Display sizes
The upper steps of the scale, from fontSize("4xl") to fontSize("9xl"), size headlines and large figures:
fontSize("4xl")
Quarterly report
fontSize("6xl")
$48,210
fontSize("8xl")
97%
<div mix={[...]}>
<div>
<p mix={[...]}>fontSize("4xl")</p>
<p mix={[fontSize("4xl"), leading("none"), weight("bold")]}>Quarterly report</p>
</div>
<div>
<p mix={[...]}>fontSize("6xl")</p>
<p mix={[fontSize("6xl"), leading("none"), weight("bold")]}>$48,210</p>
</div>
<div>
<p mix={[...]}>fontSize("8xl")</p>
<p mix={[fontSize("8xl"), leading("none"), weight("bold")]}>97%</p>
</div>
</div>Setting the line height
fontSize() touches only the font size, so pair it with leading() to choose the line height yourself, or reach for text() to set both:
fontSize("lg"), leading("tight")
The ferry left at dawn, and by the time the fog lifted we could see the island: a low green line, a lighthouse, and one road climbing from the harbour to the church.
fontSize("lg"), leading("loose")
The ferry left at dawn, and by the time the fog lifted we could see the island: a low green line, a lighthouse, and one road climbing from the harbour to the church.
<div mix={[maxIs(96), ...]}>
<div>
<p mix={[...]}>fontSize("lg"), leading("tight")</p>
<p mix={[fontSize("lg"), leading("tight")]}>
The ferry left at dawn, and by the time the fog lifted we could see the island: a low
green line, a lighthouse, and one road climbing from the harbour to the church.
</p>
</div>
<div>
<p mix={[...]}>fontSize("lg"), leading("loose")</p>
<p mix={[fontSize("lg"), leading("loose")]}>
The ferry left at dawn, and by the time the fog lifted we could see the island: a low
green line, a lighthouse, and one road climbing from the harbour to the church.
</p>
</div>
</div>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.fontSize("lg"))Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.fontSize("lg"))Customizing your theme
Customizing text sizes
Redefine a --ui-text-* variable to change a step, or declare a new one with the line height it sets beside it:
:root {
--ui-text-10xl: 10rem;
--ui-leading-10xl: 1;
}declare module "@sdxc/u" {
interface TextSizes {
"10xl": true;
}
}The new name is then accepted wherever the scale is:
fontSize("10xl")Signature
u.fontSize(name: TextSizeName | (string & {}))