Typography

02 · Typography

Text is set in Public Sans, and code and numeric labels in DM Mono (both under the SIL Open Font License). Component body text is 14px (text-sm); heading tags automatically get the ink color and a slight negative letter spacing.

Public Sans · DM Mono

Headings

The h1–h6 tags take only their color (gray-900, zinc-100 in the dark theme) and -0.011em letter spacing from the theme layer; you set size and weight with text-* and font-* classes. The mapping below is used throughout the panel.

LIVE EXAMPLE

<div class="space-y-4">
    <p class="text-4xl font-bold tracking-tight">Monthly sales · 4xl / 40px</p>
    <p class="text-3xl font-bold tracking-tight">Monthly sales · 3xl / 32px</p>
    <h1 class="text-2xl font-semibold">Page title · 2xl / 26px</h1>
    <h2 class="text-xl font-semibold">Section title · xl / 21px</h2>
    <h3 class="text-lg font-semibold">Subsection · lg / 18px</h3>
    <h4 class="text-base font-semibold">Card title (large) · base / 16px</h4>
    <h5 class="text-sm font-semibold">Card title · sm / 14px</h5>
    <h6 class="text-xs font-semibold tracking-wide text-gray-500 uppercase dark:text-zinc-400">Section label · xs / 12px</h6>
</div>

Prop	Values
`text-*`	2xl (page) \| xl (section) \| lg \| base \| sm (card)
`font-*`	semibold (headings) \| bold (large numbers and display text)

Text sizes

Each text-* size is defined with its own line height, so you do not need to add leading-*. Table, form and card content uses text-sm, field descriptions use text-xs, and small uppercase labels such as table headers use text-2xs.

LIVE EXAMPLE

<div class="space-y-3">
    <p class="text-base">Lead text (base / 16px). The panel lets teams manage orders, follow shipments and track reports.</p>
    <p class="text-sm">Body text (sm / 14px). Tables, forms and card content use this size.</p>
    <p class="text-xs text-gray-500 dark:text-zinc-400">Help text (xs / 12px). Descriptions below fields.</p>
    <p class="text-2xs font-semibold tracking-wider text-gray-400 uppercase dark:text-zinc-500">Small label (2xs / 11px)</p>
</div>

Prop	Values
`text-*`	2xs \| xs \| sm \| base \| lg \| xl \| 2xl \| 3xl \| 4xl

Weights

The recommended font load includes four weights of Public Sans. Body text uses font-normal, prominent values in table cells and labels use font-medium, headings use font-semibold, and large numbers use font-bold.

LIVE EXAMPLE

<div class="space-y-1 text-lg">
    <p class="font-normal">Regular 400 · Customer record</p>
    <p class="font-medium">Medium 500 · Customer record</p>
    <p class="font-semibold">Semibold 600 · Customer record</p>
    <p class="font-bold">Bold 700 · Customer record</p>
</div>

Prop	Values
`font-*`	normal \| medium \| semibold \| bold

Numbers and code

Use tabular-nums for digits stacked in columns; every digit is set at the same width. The code, kbd and pre tags use DM Mono automatically; for values such as codes, dates and order numbers you can also use the font-mono class.

LIVE EXAMPLE

<div class="space-y-2">
    <p class="text-2xl font-semibold tabular-nums">1,248 · 3,106 · 96</p>
    <p class="font-mono text-sm">ORD-1042 · 2026-10-07</p>
    <p class="text-sm">Inline <code class="rounded-sm bg-gray-100 px-1.5 py-0.5 text-[0.85em] text-gray-900 dark:bg-zinc-800 dark:text-zinc-100">acun:table</code>, a <a href="#" class="font-medium text-brand-600 hover:underline dark:text-brand-400">link</a>, <strong>bold</strong> and <em>italic</em>.</p>
</div>

Prop	Values
`tabular-nums`	Equal-width digits
`font-mono`	DM Mono

Brand type

In layouts, the app name next to the logo is set with font-brand. It defaults to Public Sans; if your app uses a separate font for its brand name, change only this variable.

LIVE EXAMPLE

<span class="font-brand text-[15px] font-bold tracking-tight text-gray-900 dark:text-zinc-100">Acme</span>

Prop	Values
`font-brand`	Brand type family (default: Public Sans)

Loading the fonts

The package ships no font files; your app loads Public Sans and DM Mono. Add a font service link to the layouts' head slot, or host the files yourself.

BLADE

{{-- In the head slot of the acun:layout.* components --}}
<acun:slot:head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap">
</acun:slot:head>

Changing the font

Font families come from the --font-sans, --font-mono and --font-brand variables in @theme. Redefine them in your app's CSS to change the font of every component.

CSS

/* app.css — after the @import '@acunsoft/acun-ui-core'; line */
@theme {
    --font-brand: 'Poppins', ui-sans-serif, system-ui, sans-serif;
}

Prop	Values
`--font-sans · --font-mono · --font-brand`	Font family variables

API

Props and slots

The values the component accepts.

Prop	Default	Description
`font-sans`	`Public Sans`	All text
`font-mono`	`DM Mono`	code, kbd, pre, numeric labels
`font-brand`	`Public Sans`	Brand name next to the logo
`text-2xs`	`11px / 16px`	Small uppercase labels, table headers
`text-xs`	`12px / 18px`	Help text, badges
`text-sm`	`14px / 22px`	Body text, forms and tables
`text-base`	`16px / 24px`	Lead text, large card titles
`text-lg`	`18px / 26px`	Subsection titles
`text-xl`	`21px / 28px`	Section titles
`text-2xl`	`26px / 34px`	Page titles
`text-3xl`	`32px / 40px`	Display headings
`text-4xl`	`40px / 48px`	Large display headings