Brand System

Typography

Sonance uses two primary typefaces: Montserrat for digital and Gotham for print. Select the appropriate font based on your medium.

Primary Font

Montserrat is the primary font for digital—web, apps, and screens.

Font Family

Montserrat

digitalVariable FontGoogle Fonts

Import Statement

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

CSS Variable

var(--font-montserrat)

Available Weights

300 (Light)
400 (Regular)
500 (Medium)
600 (Semibold)
700 (Bold)

Usage Context

Websites & Web Apps
Mobile Applications
Digital Marketing
Email Templates
UI Components

Font Weights

Use light (300) or medium (500) weights for headlines.

Light

300

The quick brown fox

--font-light

Regular

400

The quick brown fox

--font-normal

Medium

500

The quick brown fox

--font-medium

Semibold

600

The quick brown fox

--font-semibold

Bold

700

The quick brown fox

--font-bold

Type Scale

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

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 or Medium weight
  • Never use bold for large text
  • Letter-spacing: -0.02em
  • Line-height: 1.2

Body Text

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

All Caps / Tracking

  • Apply tracking +80-100 for all caps
  • Use for headlines and product names
  • No tracking for long form copy
  • Use for labels and categories

Italic Usage

  • Book Italic for secondary text
  • Use for quotes and emphasis
  • Never use italic for body
  • Prefer medium weight for emphasis

Live Examples

Typography in context with proper hierarchy.

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.

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

Font Downloads

Download Montserrat variable fonts.

Variable font files include all weights in a single file.

Montserrat Variable

All weights • TTF

Montserrat Italic Variable

All weights • TTF

CSS Reference

:root {
  --font-primary: 'Montserrat';
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* 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.825rem + 0.25vw, 1rem);
  --text-lg: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-xl: clamp(1.125rem, 1.075rem + 0.25vw, 1.25rem);
  --text-2xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-3xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
  --text-4xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.25rem);
  --text-5xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
  --text-6xl: clamp(3rem, 2.55rem + 2.25vw, 3.75rem);
}