- Used exclusively for emphasizing impactful claims or taglines
- Helps to create a strong visual expression and emotional resonance
Visual
Core text styles
Foundation of Trezor's typography—used consistently across products, packaging, and digital experiences. Typography scales are defined for each platform specifically.
This style is built for short, high-impact statements that demand attention. Its bold, all-caps form reinforces the brand's confident voice and is reserved for punchlines and key messages.
- Use for brand taglines and bold claims
- Create a strong visual focal point
- Always use all caps
- Avoid overuse to maintain its impact and clarity
- Not intended for general copy, long headlines, subtitles, or paragraphs
- Don't use for text longer than 4 words
Styling
| Typeface | TT Satoshi |
| Allowed weights | Bold |
| Line height | 80% |
| Letter spacing | -4% |
| Alignment | Left, center, right |
Examples
CONTROL
Punchline — left aligned
CONTROL
Punchline — right aligned
CONTROL
Punchline — center aligned
Optional special features
Overlaps
Punchline text slightly extends beyond its grid or defined layout, creating a bold, dynamic effect. This controlled "rule-breaking" enhances the typography's visual impact and adds depth to the design, resembling a more experimental approach.
- Keep overlaps subtle—avoid disrupting readability (up to 10% of the letter size).
- Ensure sufficient contrast so the text remains legible against backgrounds.
- This special feature is an optional typography treatment — it is not the goal to use it everywhere.
- Overlapping so much that letters or words become illegible.
- Creating clashes with critical design elements like logos, CTAs, or other typography.
- Using overlaps excessively, which can reduce the intended impact.
Examples
#1 Example
No special spacing between words. Slight overlap over the left edge of the format.
#2 Example
Each word is fixed to the top and bottom edge of the screen with slight overlap.
#3 Example
Option with longer text content.
Scattered alignment
Scattered alignment introduces a dynamic, non-linear approach to positioning words within a punchline. By shifting one or more words to different positions across the layout, this technique breaks usual alignment rules to create a sense of energy and motion. It's a bold choice that adds visual interest and playfulness to the design.
- Limit to 1–3 alignment shifts per punchline to avoid excessive chaos.
- Maintain a visual rhythm by balancing alignments within the overall design.
- This special feature is an optional typography treatment — it is not the goal to use it everywhere.
- Misaligning so much that the text becomes difficult to follow.
- Applying this feature to every punchline — reserve for special moments.
- Over-combining with other visually rich elements that might overwhelm the layout.
Examples
#1 Example
The first line is left-aligned and overlaps the left edge. Conversely, the second line is right-aligned and overlaps the right edge.
#2 Example
The first line is right-aligned and overlaps the right edge. Conversely, the second line is left-aligned and overlaps the left edge.
#3 Example
Option with longer text. First part is aligned and overlaps the top edge. Second part is aligned and overlaps the bottom edge.
For all headlines we use the TT Satoshi typeface in the medium weight, followed by the following specifics.
- Creates visual hierarchy to draw attention as the focal point
- Sets the tone for the overall layout and mood
- Ensures quick readability and first impression
- Keep it short, ideally fewer than 8 words for maximum clarity
- Align consistently with the grid or layout system
- Using inconsistent font sizes or weights across headlines
- Using different font weights than Medium
Styling
| Typeface | TT Satoshi |
| Allowed weights | Medium |
| Line height | 100% |
| Letter spacing | -1% |
| Alignment | Left, center |
Examples
made easy
General headline — left aligned
made easy
General headline — center aligned
Subheadlines provide supporting context beneath main headlines, guiding readers deeper into the content while maintaining visual hierarchy and brand tone.
- Adds clarity and detail beneath the primary headline
- Bridges the visual gap between headline and body text
- Helps organize content into digestible sections
- Use below headlines to expand on the main idea
- Keep concise—typically one line
- Pair with headlines on landing pages and product materials
- Don't use as a standalone headline replacement
- Avoid multiple subheadlines stacked without body text
- Don't mix with bold formatting without a clear purpose
Styling
| Typeface | TT Satoshi |
| Allowed weights | Medium |
| Line height | 125% |
| Letter spacing | -0.5% |
| Alignment | Left, center |
Examples
Subheadline — left aligned
your crypto
Subheadline — center aligned
Titles deliver concise, informative messages that orient the reader. Used for section headings, product descriptions, and key interface moments.
- Orients the reader to a new section or topic
- Anchors UI and marketing layouts
- Provides a clear focal point for detailed content blocks
- Use for section titles, product feature headlines, and key callouts
- Can run 1–2 lines
- Works well combined with body text below
- Don't use title style for short punchlines or brand slogans
- Avoid bold weight unless emphasizing a specific word
- Don't use in all caps
Styling
| Typeface | TT Satoshi |
| Allowed weights | Medium, Demibold |
| Line height | 141% |
| Letter spacing | -2% |
| Alignment | Left, center |
Examples
Title — left aligned
Title — center aligned
Subtitles complement headlines and titles by providing additional context or secondary messaging. Compact but readable, they sit comfortably between display and body text.
- Supports primary messages with secondary copy
- Used for product claims, feature callouts, and secondary labels
- Establishes a readable mid-level hierarchy
- Use for supporting taglines and compact section intros
- Left-align for standard layouts; center for marketing materials
- Pair with a headline or title above
- Don't use for running body copy
- Avoid overemphasizing with bold weight in most contexts
- Don't use for captions or metadata
Styling
| Typeface | TT Satoshi |
| Allowed weights | Medium, Demibold |
| Line height | 160% |
| Letter spacing | -1.6% |
| Alignment | Left, center |
Examples
Subtitle — left aligned
Subtitle — center aligned
Body text is used for clear, readable communication — from UI labels and short descriptions to longer-form content across products, marketing, and packaging.
- Provides a clean, legible text for detailed descriptions or explanations
- Balances the layout by supporting headlines with secondary information
- Use in paragraphs, titles, captions, sub-headlines
- Prefer left alignment for a natural reading flow
- Use centre alignment only for shorter texts
- Always use a readable font size
- Using overly tight line spacing or small size that makes text appear illegible
- Mixing too many font weights, which reduces visual cohesion
Styling
| Typeface | TT Satoshi |
| Allowed weights | Regular, Medium, Demibold, Bold |
| Line height | 150% |
| Letter spacing | -1% |
| Alignment | Left, center |
Examples
Body copy — left aligned
Body XL — center aligned
Captions are the smallest text style in the system. Used for supporting details, metadata, fine print, and image labels across all brand touchpoints.
- Provides supplementary context without competing with primary content
- Essential for accessibility and information completeness
- Anchors visual elements with source or descriptive information
- Use for image captions, product labels, metadata, fine print
- Left-align in most cases
- Combine with icons or visual indicators when needed
- Don't use captions as primary body text
- Avoid at sizes below 12px
- Don't rely on captions alone to communicate essential information
Styling
| Typeface | TT Satoshi |
| Allowed weights | Medium, Demibold |
| Line height | 133% |
| Letter spacing | 0% |
| Alignment | Left, center |
Examples
Caption — left aligned
Caption strong — label usage