Typography

Type scale and text utility classes for @bnotk/dsx.

Live Preview

Import

<link rel="stylesheet" href="@bnotk/dsx/css/typography.css">

Or use the full bundle:

<link rel="stylesheet" href="@bnotk/dsx/css/index.css">

Font loading

typography.css defines the @font-face rules for the variable Public Sans files in ../fonts/ and uses the shared --ds2-* typography tokens.

Under data-ui-theme="ds2", --ds2-font-family resolves to Public Sans. Under data-ui-theme="xna", the same token resolves to Open Sans, Arial, sans-serif.

@bnotk/dsx intentionally does not bundle Open Sans, so consumer apps should load it in the host shell before enabling the XNA theme. The docs site ships a docs-only /open-sans.css for both the shell and live demos so the preview matches the XNA references.

Heading classes

Class	Token mapping
`.dsx-h1`	`3xl`, bold, tight line height
`.dsx-h2`	`2xl`, bold, tight line height
`.dsx-h3`	`xl`, semibold, tight line height
`.dsx-h4`	`lg`, semibold, base line height
`.dsx-h5`	`base`, semibold, base line height
`.dsx-h6`	`sm`, semibold, base line height

Text utilities

Class	Purpose
`.dsx-text`	Base body text
`.dsx-text--sm` / `.dsx-text--xs` / `.dsx-text--lg`	Alternate text sizes
`.dsx-text--bold` / `.dsx-text--semibold`	Weight utilities
`.dsx-text--muted` / `--main` / `--highlight` / `--success` / `--warning` / `--error`	Color utilities
`.dsx-text--center` / `.dsx-text--right`	Alignment utilities
`.dsx-text--truncate`	Single-line ellipsis truncation

Example

<h2 class="dsx-h2">Section heading</h2>
<p class="dsx-text dsx-text--sm dsx-text--muted">Supporting copy</p>

Accessibility notes

Use semantic heading elements in the correct order; the classes are visual helpers, not document structure.
Do not communicate status by color alone.
Add a tooltip or title when truncating essential text with .dsx-text--truncate.
Keep contrast strong when pairing muted text with light backgrounds.