# Typography > Apply Honest UI's font-family, weight, body, title, and technical-text tokens with readable pairings. Source: https://www.honestui.com/docs/theme/typography --- title: Typography description: Apply Honest UI's font-family, weight, body, title, and technical-text tokens with readable pairings. --- 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. ## Font families 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: ```css :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. ## Font weights 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. ## Body scale 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. ## Title scale 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. ## Technical-text scale The technical scale supplies size, line-height, and tracking pairs. Apply `--hui-font-mono` separately because these tokens do not set the family. ## Tailwind usage Use arbitrary properties for the complete type recipe. This avoids ambiguity between Tailwind's text-color and font-size utilities: ```tsx

Monthly revenue

$42,180

``` 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. ## Readability checks - 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.