Voice
Typography
Two typefaces, both Google Fonts. Montserrat sets the tone in headings — geometric, confident, deliberate. Roboto carries the body — clean, neutral, easy to read at every size. Two fonts. Two roles. No exceptions.
Montserrat
Display — headings, hero titles, section headers, eyebrows.
Roboto
Body — paragraphs, captions, labels, supporting copy.
Reference grid
The full type ramp. Stick to these and the rest of the system falls into place. Avoid using more than two weights per layout to keep things clean.
| Style | Font | Weight | Size | Line height | Usage |
|---|---|---|---|---|---|
| Heading 1 (H1) | Montserrat | Bold | 36px | 110% | Main titles, hero headers |
| Heading 2 (H2) | Montserrat | SemiBold | 24px | 120% | Section headers |
| Subheading | Montserrat | Regular | 18px | 120% | Supporting headlines |
| Body Text | Roboto | Regular | 16px | 140% | Paragraphs, standard copy |
| Emphasis | Roboto | Medium | 16px | 140% | Highlighted body text |
| Caption/Note | Roboto | Regular | 12–14px | 140–150% | Small labels, footnotes |
In use
Sample layout combining Montserrat headings with Roboto body.
Building Better Digital Experiences
Our approach to strategy, design and technology.
Rooted in clarity. Driven by purpose.
Our team combines creative thinking with technical precision to deliver digital products that are functional, engaging and easy to use. We work closely with clients to uncover challenges, define goals and bring ideas to life through meaningful design. We believe that great user experience is the result of clear communication and purposeful design.
Figure 1: Example of typographic layout using Montserrat and Roboto.
Character case
- • Title Case for main headings and section titles.
- • Sentence case for body and subheadings.
- • Avoid ALL CAPS in paragraphs — it hurts readability.
Alignment
- • Left-align body copy and most headings.
- • Centre alignment sparingly — for short headlines, quotes, callouts.
- • Avoid full justification — uneven spacing reduces legibility.
Tracking & kerning
- • Default tracking for body.
- • All-caps headings and small captions: +10 to +20 tracking.
- • Don't manually kern outside display contexts.
Responsive sizing
- • Body: 14px mobile, 16px desktop.
- • H1: 28px mobile, 36px desktop.
- • Scale headings proportionally between breakpoints.