Typography
Type tokens: three font families, a six-step type scale, four weights, and three line heights.
Font families
Each family is a system stack, so nothing is downloaded. Pick a family and weight and the full type scale re-renders below in place.
| Token | Stack |
|---|---|
--hz-font-family-sans | system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif |
--hz-font-family-serif | ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif |
--hz-font-family-mono | ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace |
--hz-font-family-sans: The default UI face. The reference theme sets it on the page, so every component inherits it. A system stack; no webfont ships.
sm · 0.875rem base · 1rem lg · 1.4rem xl · 1.65rem 2xl · 2.75rem 3xl · 3.5rem Font size scale
--hz-font-size-sm 0.875rem The quick brown fox--hz-font-size-base 1rem The quick brown fox--hz-font-size-lg 1.4rem The quick brown fox--hz-font-size-xl 1.65rem The quick brown fox--hz-font-size-2xl 2.75rem The quick brown fox--hz-font-size-3xl 3.5rem The quick brown foxFont weights
| Token | Value | Preview |
|---|---|---|
--hz-font-weight-normal | 400 | Typography preview |
--hz-font-weight-medium | 500 | Typography preview |
--hz-font-weight-semibold | 600 | Typography preview |
--hz-font-weight-bold | 700 | Typography preview |
Line heights
| Token | Value | Preview |
|---|---|---|
--hz-line-height-tight | 1.2 | Wind pushed the drive wide on seventeen, but a smooth forehand upshot and a confident putt saved par from the rough. |
--hz-line-height-base | 1.5 | Wind pushed the drive wide on seventeen, but a smooth forehand upshot and a confident putt saved par from the rough. |
--hz-line-height-loose | 1.75 | Wind pushed the drive wide on seventeen, but a smooth forehand upshot and a confident putt saved par from the rough. |
Using your own fonts
Every family, size, weight, and line height is a plain CSS custom property. Override one
directly, or set typography in the hyzer config; see Theming → Tokens & Overrides.
Load a webfont, point the family token at it, and every component follows:
/* app.css, after the library sheets */
@import '@fontsource-variable/inter';
:root {
--hz-font-family-sans: 'Inter Variable', system-ui, sans-serif;
}