Brand Typography
The primary fonts used in our branding include Avenir and Fira Sans. These are both sans serif fonts, allowing for great legibility and flexibility as far as usage. Avenir is our heading font; it is seen normally in marketing platforms and print titles, while Fira Sans is our body font, used for paragraphs and lower hierarchy text. Below, our guides provide use cases and alternate options for our fonts.
FONT STACKS
h1, h2, h3, h4, h5 {
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, muli, montserrat, helvetica neue, helvetica, roboto, noto, segoe ui, arial, sans-serif;
}
body {
font-family: -apple-system, BlinkMacSystemFont, Fira Sans, Roboto, Helvetica, GillSans, Calibri, Trebuchet, sans-serif;
}
COLORS
Heading
Hex #222222
R: 34
G: 34
B: 34
C: 0
M: 0
Y: 0
K: 87
Body Type
Hex #5f6365
R: 95
G: 99
B: 101
C: 2
M: 1
Y: 0
K: 60
Alternate Type
While we love our font choice but, we know not all system is the same! In the technology field, there are so many different interfaces among websites, email, design systems, etc. Our stories must be readable, no matter where or what you read them from. Use the font alternates along with our font stacks for when our brand font styles are not available.
Usage, Styles & Format
BRAND TYPE IN ACTION
We love how the Avenir font and Fira Sans font pair together. These pairings can be used beautifully in slide presentations, create new marketing ads, print collateral at events and mailings, or in product design.
We trust you with these guidelines. Your judgment can be applied for better design and better legibility. Our priority is readability and consistency in our branding. With those things in mind while making choices of what type to use and how we are sure your end product will be lovely - we cannot wait to see all you create!
BACKGROUND AND TYPE
Our fonts are flexible, and they are still legible on patterns, photos, and dark backgrounds. Just make sure to change the color of the font for maximum contrast. If the font is on a dark color, image, or pattern, use our fonts in white, or on occasion, you may use our Rally Orange for contrast and hierarchy.
In some cases, an image may not fully provide enough contrast for white text. In these cases, you may use an overlay of the Noble Navy color with an opacity between 80% or 30%.
