Typography
Overview
Primary
Roboto
Glyph
Font style 12
Aa123
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()?+
| Scale Category | Typeface | Weight | Size | Case |
|---|---|---|---|---|
| Caption | Roboto | Medium | 12 | Sentence |
| Header 1 | Roboto | Semibold | 96 | Sentence |
| Header 2 | Roboto | Medium | 60 | Sentence |
| Header 3 | Roboto | Regular | 48 | Sentence |
| Body copy | Roboto | Regular | 16 | Sentence |
| Small text | Roboto | Regular | 12 | Sentence |
| CTA | Roboto | Regular | 16 | Sentence |
Body style · Brand font · 16px / 500
Line length
Keep paragraphs comfortable to scan. Adjust the width for the typeface, text size, and screen; this is a preferred measure, not a fixed character count.
Preferred width · 65ch · narrows to fit the screen
Good typography makes every message easier to understand. Give words room to breathe, keep each line comfortable to follow, and let the reader move naturally from one thought to the next. A clear rhythm helps people focus on what matters.
Preferred measure: 65ch · fits available width
Line height
Give each line enough space to follow the next. Set heading and body spacing independently, and check longer passages at smaller screen sizes.
1.8× line height · 28.8px
Good typography makes every message easier to understand. Give words room to breathe, keep each line comfortable to follow, and let the reader move naturally from one thought to the next. A clear rhythm helps people focus on what matters.
Alignment
Use start alignment for paragraphs. Center alignment can emphasize a short statement; choose exceptions deliberately and check how the text wraps.
Preferred alignment · Left (start)
Good typography makes every message easier to understand. Give words room to breathe, keep each line comfortable to follow, and let the reader move naturally from one thought to the next. A clear rhythm helps people focus on what matters.