Typography
Lesli uses Domine and Open Sans. Both variable fonts are packaged by LesliAssets and loaded by the framework stylesheet.
Typefaces
| Role | Typeface | Use |
|---|---|---|
| Headings | Domine | Page titles, section headings, and editorial emphasis |
| Interface | Open Sans | Body text, navigation, labels, buttons, tables, and forms |
Domine gives headings a recognizable editorial character. Open Sans keeps dense application interfaces readable and neutral.
Domine examples
The following specimens explicitly select Domine and set the variable wght axis so they are not affected by the documentation site's inherited typography.
Build useful software for real people.
Regular 400 — The quick brown fox jumps over the lazy dog.
Medium 500 — The quick brown fox jumps over the lazy dog.
Semibold 600 — The quick brown fox jumps over the lazy dog.
Bold 700 — The quick brown fox jumps over the lazy dog.
Open Sans examples
These specimens explicitly select Open Sans and force the same weight variations used throughout the product interface.
Regular 400 — Clear interface copy helps people complete their work.
Medium 500 — Clear interface copy helps people complete their work.
Semibold 600 — Clear interface copy helps people complete their work.
Bold 700 — Clear interface copy helps people complete their work.
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz · 0123456789
Framework behavior
The global Lesli styles apply Open Sans to the document body and Domine to heading elements. Components inherit the correct family without needing a utility class.
Guidance
- Use Domine sparingly inside dense product interfaces.
- Use Open Sans for controls and long-form interface copy.
- Avoid introducing decorative font families into framework components.
- Preserve the browser's ability to synthesize appropriate variable-font weights.
Last Update: 2026/09/14