Typography
Typography creates clarity, builds hierarchy, and carries our brand voice. Every typographic choice supports readability and trust across the Cüte platform.
Approach
We use BR Sonoma as our primary typeface across all touchpoints. Its clean, geometric forms balance friendliness with professionalism, reflecting our approach to circular fashion.
Primary
Headlines, navigation, and UI elements
Aa
BR Sonoma
Weights
Three weights for clear hierarchy
Regular
Medium
Semibold
400 / 500 / 600
International
Full glyph support for global audiences
Ää Öö Üü Çç Ññ
Extended Latin
Type scale
A harmonious scale from display to caption, designed for consistent hierarchy across screens.
Circular fashion
72/1Circular fashion
48/1.1Circular fashion
36/1.2Circular fashion
30/1.2Circular fashion
24/1.3Circular fashion
20/1.4Circular fashion
18/1.6Circular fashion
16/1.6Circular fashion
14/1.5Circular fashion
12/1.5Text styles
Detailed specifications for product interfaces and editorial content.
Product
For app interfaces, navigation, forms, and data-dense layouts.
| Style | Weight | Size | Line height | Tracking | Token |
|---|---|---|---|---|---|
| Display | Semibold | 72px | 1 | -0.02em | display |
| Title 1 | Semibold | 48px | 1.1 | -0.02em | title-1 |
| Title 2 | Semibold | 36px | 1.2 | -0.01em | title-2 |
| Title 3 | Semibold | 30px | 1.2 | -0.01em | title-3 |
| Heading | Semibold | 24px | 1.3 | 0 | heading |
| Subheading | Medium | 20px | 1.4 | 0 | subheading |
| Body Large | Regular | 18px | 1.6 | 0 | body-lg |
| Body | Regular | 16px | 1.6 | 0 | body |
| Body Small | Regular | 14px | 1.5 | 0 | body-sm |
| Caption | Regular | 12px | 1.5 | 0.01em | caption |
| Overline | Medium | 11px | 1.5 | 0.08em | overline |
Editorial
For marketing pages, landing pages, blog posts, and storytelling.
| Style | Weight | Size | Line height | Tracking | Token |
|---|---|---|---|---|---|
| Hero | Semibold | 96px | 1 | -0.03em | hero |
| Feature | Semibold | 60px | 1.05 | -0.02em | feature |
| Pull Quote | Regular | 36px | 1.3 | -0.01em | pull-quote |
| Lead | Regular | 24px | 1.5 | 0 | lead |
| Article Body | Regular | 18px | 1.7 | 0 | article-body |
Font specimen
The complete character set of BR Sonoma, including Latin extended glyphs, numerals, and special characters.
Primary typeface
BR Sonoma
Uppercase
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Lowercase
abcdefghijklmnopqrstuvwxyz
Numbers
0123456789
Currency
€$£¥₹₿¢
Special characters
!@#$%^&*()_+-=[]{}|;':",./<>?~`
Best practices
Guidelines for using typography effectively across the platform.
Do
- Maintain consistent line heights for readability
- Use semibold for emphasis and hierarchy
- Keep body text at 16px minimum for interfaces
- Use proper contrast ratios (4.5:1 minimum)
- Limit line length to 65-75 characters for body text
- Use the overline style for labels and categories
Don't
- Use more than 3 font weights per layout
- Set body copy smaller than 14px
- Use all caps for passages longer than a few words
- Mix conflicting font weights in the same hierarchy level
- Reduce line height below 1.3 for multi-line text
- Use letter-spacing on body text
Accessibility
Typography plays a crucial role in making our platform accessible to everyone. We follow WCAG 2.1 AA standards.
Contrast
4.5:1
Minimum contrast ratio for normal text. Large text (24px+) requires 3:1.
Minimum size
16px
Base font size for body text. All sizes use relative units so users can scale.
Line length
75ch
Maximum characters per line for comfortable reading across devices.