Claromentis Design
Typography
Typography
Claromentis uses two coordinated type systems: Instrument pair (Instrument Sans and Instrument Serif) and Nunito pair (Nunito Sans and Nunito).
Choosing the right pair
While both typeface families are supported, they serve distinct tonal and functional roles. Default to Instrument for new product features and marketing materials requiring a modern look. Retain Nunito for existing friendly interfaces or where a softer, frindlier touch is required.
When to use Instrument
Use the Instrument Sans & Serif pair for a modern and professional aesthetic.
- Primary Use Case: Marketing pages, data-dense UI, or "power user" interfaces where clarity is importnat.
- Tone: Instrument Sans provides a neutral, geometric foundation that feels efficient and trustworthy. While Instrument Serif adds emphasis to key statements.
- Legibility: Instrument Sans high clarity makes it suitable for dense UI components like tables, lists and small text labels.
When to use Nunito
Use the Nunito & Nunito Sans pair when the goal is to convey approachability, warmth, and friendliness.
- Primary Use Case: User-facing interfaces where a softer, welcoming tone is preferred (onboarding, customer portal, etc.).
- Tone: The rounded terminals of Nunito create a casual, human feel that reduces the "corporate" edge of enterprise software.
- Legibility: Nunito Sans is highly legible for long-form reading but retains a subtle softness.
Instrument family
| Typeface | Claromentis Use | Features |
|---|---|---|
| Instrument Sans | Main copy, UI, and section headings | Geometric sans serif |
| Instrument Serif | Display, hero titles, key marketing | Condensed serif |
Use Instrument Sans as the primary typeface, reserving Instrument Serif for hero headings, key marketing statements, and short emphasis text to create contrast without reducing readability.
Resources
- Adobe Fonts Instrument Sans | Instrument Serif
Nunito family
| Typeface | Claromentis Use | Features |
|---|---|---|
| Nunito | Display & Headings | Rounded terminals |
| Nunito Sans | Main copy | Non-rounded terminal version |
Headings should always be set in Nunito, while the main copy should be in Nunito Sans
Typography Tokens
CSS font-family
The following CSS tokens can be used as the CSS font-family. In some cases, a system font may be an acceptable alternative, particularly when demonstrating theming options and preparing mobile app marketing materials.
Font Size
Font Weight
Resources
- Adobe Fonts Nunito | Nunito Sans;
- npm packages Nunito | Nunito Sans;