Typography

Typography is foundational to our brand voice. These fonts convey professionalism while remaining approachable and easy to read.

Font Families

Headings
600
700

All headings (H1–H6), display text, brand statements

The quick brown fox

jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz 0123456789

font-family: "Montserrat", Helvetica Neue, Arial, sans-serif;
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap');
View on Google Fonts
Body
400
600

Body text, paragraphs, descriptions, UI elements

The quick brown fox jumps over the lazy dog.

Sphinx of black quartz, judge my vow.

We're your neighbors. Your neighborhood IT shop. Let us take over your IT worries so you can focus on your business.

font-family: "Open Sans", Segoe UI, Roboto, sans-serif;
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');
View on Google Fonts
Monospace
400

Code snippets, technical values, hex codes

const color = "#1D451D";

font-family: "Fira Code";

// Code comments and technical values

font-family: "Fira Code", Menlo, Monaco, monospace;
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400&display=swap');
View on Google Fonts

Type Scale

H1

Page Title

text-5xl md:text-6xlfont-bold
H2

Section Title

text-3xl md:text-4xlfont-semibold
H3

Subsection

text-2xl md:text-3xlfont-semibold
H4

Card Title

text-xl md:text-2xlfont-medium
H5

Label

text-lgfont-medium
H6

Small Heading

text-basefont-semibold
Body

Body text for paragraphs and content.

text-basefont-normal
Small

Captions and helper text

text-smfont-normal

Web Implementation

Google Fonts CDN

Add this link tag to your HTML head to load all brand 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=Open+Sans:wght@400;500;600&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">

CSS Variables

Font Stack Definitions
:root {
  --font-heading: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Open Sans", "Segoe UI", Roboto, sans-serif;
  --font-mono: "Fira Code", Menlo, Monaco, monospace;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

code, pre {
  font-family: var(--font-mono);
}

Typography Guidelines

Line Height
Headings1.2
Body text1.5
Long-form content1.75
Base Sizes
Base font size16px
Minimum body size14px
Maximum line width70ch