Typography
Typography is foundational to our brand voice. These fonts convey professionalism while remaining approachable and easy to read.
Font Families
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');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');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');Type Scale
Page Title
text-5xl md:text-6xlfont-boldSection Title
text-3xl md:text-4xlfont-semiboldSubsection
text-2xl md:text-3xlfont-semiboldCard Title
text-xl md:text-2xlfont-mediumLabel
text-lgfont-mediumSmall Heading
text-basefont-semiboldBody text for paragraphs and content.
text-basefont-normalCaptions and helper text
text-smfont-normalWeb Implementation
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
: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
1.21.51.7516px14px70ch