Claromentis Design
Typography
Typography
Claromentis uses Nunito sans-serif typeface superfamily. It is available in versions both with and without rounded terminals.
| 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
Supported features:
- Weights: 200, 300, 400, 600, 700, 800, 900;
- Styles: italic, normal;
- Supported subsets: cyrillic, cyrillic-ext, latin, latin-ext, vietnamese for Nunito and latin, latin-ext, vietnamese for Nunito Sans;
Resources
- Adobe Fonts Nunito | Nunito Sans;
- npm packages Nunito | 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.
Token
Value
Preview
rounded
'Nunito', sans-serif;
The quick brown fox jumps over the lazy dog
sans
'Nunito Sans', sans-serif;
The quick brown fox jumps over the lazy dog
system
-apple-system, BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"
The quick brown fox jumps over the lazy dog
heading
-apple-system, BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"
The quick brown fox jumps over the lazy dog
body
-apple-system, BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"
The quick brown fox jumps over the lazy dog
Font Size
Token
Size
Preview
0
0.8rem
Size 0
1
1rem
Size 1
2
1.25rem
Size 2
3
1.5rem
Size 3
4
1.75rem
Size 4
5
2rem
Size 5
6
2.5rem
Size 6
Font Weight
Token
Value
Preview
thin
200
The quick brown fox jumps over the lazy dog
light
300
The quick brown fox jumps over the lazy dog
normal
400
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
extrabold
800
The quick brown fox jumps over the lazy dog