Brand System

Typography

Montserrat is the official Sonance brand typeface. It's clean, modern, and versatile—available in Regular, Medium, and Bold weights.

Primary Font

Montserrat is used across all Sonance communications—print and digital.

Font Family

Montserrat

Import: @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap')

CSS Variable: var(--font-montserrat)

Weights: Regular (400), Medium (500), Bold (700)

Font Weights

Use light (300) or medium (500) weights for headlines. Never use bold for large text.

Light

300

The quick brown fox jumps over the lazy dog

--font-light

Regular

400

The quick brown fox jumps over the lazy dog

--font-normal

Medium

500

The quick brown fox jumps over the lazy dog

--font-medium

Semibold

600

The quick brown fox jumps over the lazy dog

--font-semibold

Bold

700

The quick brown fox jumps over the lazy dog

--font-bold

Type Scale

Responsive font sizes using CSS clamp() for fluid scaling across devices.

text-xs

10-12px

Small labels and captions

text-sm

12-14px

Button text and small body

text-base

14-16px

Body text and paragraphs

text-lg

16-18px

Large body text

text-xl

18-20px

Small headings

text-2xl

20-24px

Section headings

text-3xl

24-30px

Page headings

text-4xl

30-36px

Hero titles

text-5xl

36-48px

Display text

text-6xl

48-60px

Large display

Typography Rules

Headlines

  • • Use Book (Regular) or Medium weight
  • • Never use bold for large display text
  • • Letter-spacing: -0.02em for display sizes
  • • Line-height: 1.2 for headings

Body Text

  • • Book (Regular) weight
  • • Line-height: 1.6-1.75
  • • Max-width: 65-75 characters
  • • Text should feel airy and spacious

All Caps / Tracking

  • • When using Montserrat in all caps, apply tracking +80-100
  • • All caps for headlines, sub headlines, product names
  • • Tracking should never be applied to secondary or long form copy
  • • Use for labels and categories

Italic Usage

  • • Book Italic for secondary messaging
  • • Use for quotes and emphasis
  • • Never use italic for body copy
  • • Medium weight for emphasis over italic

Live Examples

Typography in context, demonstrating proper hierarchy and spacing.

Category Label

Page Headline

This is a lead paragraph that introduces the content. It should be slightly larger than body text and maintain good readability.

Section Heading

Body text should be comfortable to read with generous line height. The Sonance aesthetic emphasizes breathing room and clarity. Paragraphs should not exceed 65-75 characters per line for optimal readability.

This creates a premium, sophisticated reading experience that aligns with the brand's "Designed to Disappear" philosophy. Content should feel effortless to consume.

CSS Reference

:root {
  /* Font Family */
  --font-primary: 'Montserrat', -apple-system, sans-serif;
  --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  
  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Responsive Type Scale */
  --text-xs: clamp(0.625rem, 0.6rem + 0.125vw, 0.75rem);
  --text-sm: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-base: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --text-lg: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-xl: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  --text-2xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-3xl: clamp(1.5rem, 1.25rem + 1.25vw, 1.875rem);
  --text-4xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.25rem);
  --text-5xl: clamp(2.25rem, 1.75rem + 2.5vw, 3rem);
  --text-6xl: clamp(3rem, 2.25rem + 3.75vw, 3.75rem);
}