Typography
A disciplined type system that balances precision, readability, and brand personality. Built for clarity across digital and legal documentation.
Primary & Secondary Typefaces
We pair a humanist sans-serif for UI and body copy with an elegant serif for display headings and brand moments.
Primary: Inter
Highly legible, modern sans-serif optimized for screen readability. Used for body text, UI components, and data tables.
Secondary: Playfair Display
Refined serif with high contrast and elegant proportions. Reserved for H1/H2 headings, quotes, and brand storytelling.
Modular Sizing System
A 1.250 minor third scale ensures visual hierarchy while maintaining rhythm across all breakpoints.
| Level | Preview | Size / Weight / Line-Height |
|---|---|---|
| H1 | Heading One | 3.75rem / 900 / 1.1 |
| H2 | Heading Two | 3rem / 800 / 1.15 |
| H3 | Heading Three | 2.25rem / 700 / 1.2 |
| H4 | Heading Four | 1.875rem / 700 / 1.25 |
| H5 | Heading Five | 1.5rem / 600 / 1.3 |
| H6 | Heading Six | 1.25rem / 600 / 1.35 |
| Body | Body text (16px) | 1rem / 400 / 1.6 |
| Small | Small text (14px) | 0.875rem / 400 / 1.5 |
| Caption | Caption text (12px) | 0.75rem / 500 / 1.4 |
Weight Spectrum
Inter provides a comprehensive weight range. Use lighter weights for extended text and heavier weights for emphasis and headings.
Rhythm & Readability
Line height directly impacts readability. Tighter ratios work for headings, while body text requires more breathing room.
Headings (1.1 – 1.2)
Body Text (1.6 – 1.8)
UI Components (1.4 – 1.5)
Applied Typography
How our type system behaves across interactive elements and content blocks.
Buttons & CTAs
Buttons use 600 weight, 0.95rem size, and 1.4 line-height. Uppercase is avoided for better legibility.
Forms & Labels
Labels: 0.875rem / 600. Inputs: 1rem / 400 with clear focus states.
Tags & Badges
Tags use 0.8rem / 600 weight with subtle background tint for semantic grouping.
Quotes & Legal Notes
"Brand naming is not just about creativity; it's about legal defensibility and market positioning."
— Isdomain Legal GuidelinesBlockquotes use 1.125rem, italic style, and accent border for emphasis.
Do's & Don'ts
Maintain consistency across all Isdomain touchpoints.
✓ Do
- Use Inter for all UI, body copy, and data tables
- Reserve Playfair Display for H1/H2 and brand storytelling
- Maintain 1.6+ line-height for paragraphs over 3 lines
- Use semantic weights (400 body, 600 labels, 700+ headings)
- Keep heading line-height tight (1.1–1.25) for visual cohesion
- Ensure sufficient color contrast (WCAG AA minimum)
✕ Don't
- Never use more than 2 font families on a single page
- Avoid ALL CAPS for long paragraphs or legal text
- Don't stretch, condense, or distort typefaces
- Never use italic for UI labels or critical legal terms
- Avoid mixing serif and sans-serif in the same hierarchy level
- Don't override the scale with arbitrary pixel sizes