type

Basic example

Use type(name) to set the sans family together with a step's font size and line height, like type("2xl") for a heading:

<article mix={[font("serif"), ...]}>
	<h3 mix={[type("2xl"), weight("bold")]}>A field guide to winter birds</h3>
	<p>
		Chickadees stay put all winter, caching seeds in bark and moss and remembering thousands of
		hiding places well into spring.
	</p>
</article>

Choosing a step

Pass any step of the text scale, from type("xs") for fine print to type("4xl") for a page title:

<div mix={[...]}>
	<h3 mix={[type("xl"), weight("semibold")]}>Your order has shipped</h3>
	<p mix={[type("base")]}>It left our warehouse this morning and should arrive by Thursday.</p>
	<p mix={[type("xs"), fg("neutral.muted")]}>Order #10482 · Tracking updates every hour</p>
</div>

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:

type("10xl")

Customizing font families

Redefine a --ui-font-* variable to change a family, or declare a new one:

:root {
	--ui-font-display: "Inter Display", ui-sans-serif, system-ui, sans-serif;
}

declare module "@sdxc/u" {
	interface FontFamilies {
		display: true;
	}
}

The new name is then accepted wherever the scale is:

font("display")

Customizing line heights

Each named line height reads a --ui-leading-* variable before its built-in value, so a theme retunes one by declaring it:

:root {
	--ui-leading-relaxed: 1.7;
}

Every call that names the step now reads the new value:

leading("relaxed")