Font

Classes

The three namespaces share the font- prefix, so a name must be unique among them. A name defined in more than one reports AMBIGUOUS_TOKEN and generates no CSS.

Values

Families are ordered fallback lists, sizes are rem lengths and weights are numeric requests. Pixel equivalents assume a 16px root font size. The rendered face and available weights depend on the fonts loaded by the page.

Family

Size

Weight

One prefix, independent properties

font-serif, font-4xl and font-semibold write font-family, font-size and font-weight respectively. They can be combined because they set different properties; none is a complete type treatment.

Every row starts with font-sans, font-2xl and font-regular. The result replaces only the class for the named property. The available fonts determine the rendered faces.

Text description

1. The baseline text uses the sans family, 1.5rem size and weight 400, with a 16px root font size.
2. The font-serif row changes only font-family. The font-4xl row changes only font-size, to 2.25rem. The font-semibold row changes only font-weight, to 600.
3. Each result uses the same words. A common unitless line-height of 1.5 keeps the samples readable; these font classes do not set line-height.
4. The samples render real preset CSS with available system fonts. They do not imply that a family class downloads a font file.

A size class leaves line height and letter spacing to their own declarations or inheritance. Use text-<name> when all three metrics should come from one treatment. Family and weight remain separate in either form.

A family token names fonts; it does not download them. The preset sans, mono and serif stacks begin with the optional --font-sans, --font-mono and --font-serif hooks. The Typography guide owns loading fonts and choosing a site-wide stack.

Keep custom keys distinct across the three namespaces. If both --font-family-brand and --font-size-brand exist, font-brand is ambiguous. An explicit native declaration such as (font-size:var(--font-size-brand)) names the intended property and variable.

See Text treatments and namespace resolution and native font selection.

Usage

Set a heading in a larger size and medium weight, and a code sample in the mono family.

<h3 class="… font-2xl font-medium">Release notes</h3><p class="… font-sm">Install the new version with <code class="… font-mono font-xs">npm i @master/css</code>.</p>

@layer theme {  :root,  :host {    --font-family-mono: var(--font-mono, ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;    --font-weight-medium: 500;    --font-size-xs: .75rem;    --font-size-sm: .875rem;    --font-size-2xl: 1.5rem  }}@layer utilities {  .font-mono {    font-family: var(--font-family-mono)  }  .font-2xl {    font-size: var(--font-size-2xl)  }  .font-sm {    font-size: var(--font-size-sm)  }  .font-xs {    font-size: var(--font-size-xs)  }  .font-medium {    font-weight: var(--font-weight-medium)  }}

Customize

Each namespace takes its own tokens: --font-family-display creates font-display, and --font-size-hero creates font-hero.

@theme {  --font-family-display: "Inter Display", var(--font-family-sans);  --font-size-hero: 4rem;}

@layer theme {  :root,  :host {    --font-family-sans: var(--font-sans, ui-sans-serif), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"  }  :root,  :host {    --font-family-display: "Inter Display", var(--font-family-sans);    --font-size-hero: 4rem  }}@layer utilities {  .font-display {    font-family: var(--font-family-display)  }  .font-hero {    font-size: var(--font-size-hero)  }}

See theme directives and Typography.