# Juris PMS typography

The typography foundation is adapted from Figma node `4:2800`, “Typography Mapping.” It uses self-hosted Roboto and does not make runtime requests to Google Fonts or another font service.

## Font files and weights

The application embeds the Latin WOFF2 files supplied by `@fontsource/roboto` for weights 400, 500, and 600 only. Its three `@font-face` declarations use `font-display: swap`. Inlining makes the self-hosted faces independent of the application's local subdirectory and creates no runtime font request.

## Scale

- `text-heading` through `text-heading-5`: 32, 28, 24, 20, 18, and 16px; line height 1.4.
- `text-body-1`, `text-body-2`, and `text-body-3`: 16, 14, and 12px; line height 1.4.
- `text-label`: 10px with line height 1. Use only for compact secondary metadata. Never use it for form labels, validation guidance, or essential instructions.
- Use `font-normal`, `font-medium`, and `font-semibold` for weights 400, 500, and 600.
- All scale tokens use zero letter spacing, matching the reference node.

## Semantic text

- Default content inherits `text-content`.
- Use `text-content-secondary` for supporting copy and `text-content-muted` for de-emphasized copy.
- `type-helper` combines the 12px body scale with secondary text colour.
- `type-muted` combines the 14px body scale with muted text colour.
- `type-link-1` and `type-link-2` provide the underlined 14px and 12px medium link treatments with semantic action colours.

Semantic text and action colours remap automatically through the document root's light or dark theme. Typography consumers must not add duplicate `dark:` variants.

The development-only preview is available at `/dev/ui/typography` in local and testing environments.