Typography

Typography is a fundamental element of the Frequency brand. Our type system balances professionalism with approachability, using two complementary font families.

Font Families

Montserrat — Headings

Frequency

Audio Innovation

The quick brown fox jumps over the lazy dog

Property	Value
Font Family	Montserrat
Weights	Regular (400), Bold (700)
Letter Spacing	-1px (headings), -2px (display)
Usage	Headlines, titles, navigation

Source Sans Pro — Body

Today, audio teams worldwide use Frequency to work faster and smarter. With the freedom and flexibility of the platform, they create captivating audio ads that resonate with listeners while maximizing their revenue potential.

This is semibold body text for emphasis.

Property	Value
Font Family	Source Sans Pro
Weights	Regular (400), Semibold (600)
Letter Spacing	0 (default)
Usage	Body copy, paragraphs, UI text

Type Scale

Font Size

100%

48px / 700

Brand Guidelines

36px / 700

Visual Identity

24px / 600

Our Typography System

Body

16px / 400

Audio teams worldwide use Frequency to create captivating content that resonates with listeners.

Small

14px / 400

Last updated February 2026

Text Colors

Text color defines hierarchy. Use four levels consistently — never invent new grays.

Primary

#212121

The quick brown fox jumps over the lazy dog

Headings, body text, default content

Secondary

#808080

The quick brown fox jumps over the lazy dog

Supporting text, descriptions, captions

Tertiary

#bdbdbd

The quick brown fox jumps over the lazy dog

Metadata, timestamps, subtle labels

Disabled

#e3e3e3

The quick brown fox jumps over the lazy dog

Disabled controls, placeholders

All text colors map to the gray palette. Token format: gray[index] — light mode / dark mode.

Level	Light Mode	Dark Mode	Token
Primary	`#212121` gray[9]	`#fafafa` gray[0]	Headings, body, default
Secondary	`#808080` gray[6]	`#bdbdbd` gray[4]	Descriptions, captions
Tertiary	`#bdbdbd` gray[4]	`#808080` gray[6]	Metadata, timestamps
Disabled	`#e3e3e3` gray[3]	`#757575` gray[7]	Placeholders, disabled

Web Font Implementation


<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Source+Sans+3:wght@400;600&display=swap" rel="stylesheet">


/* CSS Variables */
:root {
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Source Sans 3', sans-serif;
}
 
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  letter-spacing: -1px;
}
 
body {
  font-family: var(--font-body);
}

Typography Guidelines

Don't

Don't use alternative fonts without approval

Use Montserrat for all headings and display text

Don't

Don't stretch or distort letterforms

Use Source Sans Pro for body text and UI elements

Don't

Don't use all caps for body text

Apply tight letter-spacing (-1px to -2px) to large headings

Don't

Don't use weights outside the specified range

Maintain consistent hierarchy throughout designs