Typography

Honest UI separates typography into family roles and coordinated scales. Each size has a matching line height and letter spacing value, so text remains consistent across component labels, body copy, headings, and technical content.

The default family resolves through --font-love-sans and falls back to Arial, then the system sans-serif. You can load LoveSans in your application or point --font-love-sans at a typeface you already own.

Both modern and traditional currently use the same title and body family. The style attribute changes radius, not the typography scale.

To provide an application font without changing component code:

:root {
  --font-love-sans: "Your Product Sans";
  --hui-font-mono: "Your Product Mono", ui-monospace, monospace;
}

If character alignment matters—for code, tabular output, or logs—do not assume the default --hui-font-mono value is monospaced. Override the role with a real monospace family and test the content you display.

Load every weight you use. Honest UI disables synthetic bold and italic through font-synthesis: none, so a missing face will not be fabricated by the browser.

Use the three tokens for a named step together. The base aliases point to the regular body step and are useful where a component needs the default without repeating its specific size name.

The four title steps map to the global h4 through h1 styles included by Honest UI. Those selectors use the title family, medium weight, the matching line height, and balanced wrapping.

The technical scale supplies size, line-height, and tracking pairs. Apply --hui-font-mono separately because these tokens do not set the family.

Use arbitrary properties for the complete type recipe. This avoids ambiguity between Tailwind's text-color and font-size utilities:

<section>
  <p
    className="
      [font-family:var(--hui-font-body)]
      [font-size:var(--hui-font-size-small)]
      [font-weight:var(--hui-font-weight-medium)]
      [letter-spacing:var(--hui-letter-spacing-small)]
      [line-height:var(--hui-line-height-small)]
    "
  >
    Monthly revenue
  </p>
  <p
    className="
      [font-family:var(--hui-font-title)]
      [font-size:var(--hui-font-size-t3)]
      [font-weight:var(--hui-font-weight-medium)]
      [letter-spacing:var(--hui-letter-spacing-t3)]
      [line-height:var(--hui-line-height-t3)]
    "
  >
    $42,180
  </p>
</section>

For Tailwind v4 shorthand, use a type hint when needed: text-(length:--hui-font-size-regular) sets font size, while text-(color:--hui-color-foreground-base-primary) sets color.

• Keep body copy at a readable size for its context; micro and mini steps are for short supporting text, not long instructions.
• Pair each size with its named line height and letter spacing instead of mixing steps casually.
• Do not encode heading structure with size alone. Use semantic heading levels in a logical order, then style them.
• Let text wrap. Avoid fixed heights on labels, buttons, and fields that break when text is enlarged or translated.
• Test at 200% and 400% zoom, with browser text-spacing overrides, and with long unbroken content.
• Use real text rather than text baked into an image, and maintain at least the contrast required by the product's accessibility target.