Typography

Last updated 2025-08-01

Typography is as important of a brand element as the logo, and clear and consistent use establishes the credibility and legitimacy of our communications. Our typographic style creates an easily understandable hierarchy of information, designed in a fluid way to accommodate platforms from digital to print.

Typeface

Our primary brand font is Franklin Gothic. It is a classic, highly legible typeface with strong roots in Americana.

For headlines and display situations, Franklin Gothic Extra Condensed Bold is used. Set in all caps, it creates a strong anchor from which to support content from articles to webpages to social media posts.

Franklin gothic condensed used as a display font.

Franklin Gothic is also used for all other copy, maintaining legibility at all sizes. Type should be primarily set in the medium and bold weights, though others may be used as the situation calls for

For web use and when licensing issues arise, Libre Franklin (available via Google Fonts) is an acceptable alternative.

Type Scale

The core element of our type scale is its flexibility. At smaller screen sizes and applications, the base increment of the scale is 1.2x; as screens and applications get larger, this increases to 1.25x and at the largest screen sizes, it caps out at 1.33x.Use the adjustable scale tool below to calculate exact values for any application, at any type scale value, and to get a preview of the scale in action.

Leading and tracking values are calculated as a ratio based on font size. For example, if you're adding a page heading at 30px, your leading (line-height) value could be 34.5px, 1.15, or 115%. Your tracking (letter-spacing) would be -0.9px, -3%, or -0.03. It is advantageous to use functions to calculate this to adapt to a fluid type scale with minimal coding effort. For example, using calc(var(--font-size) * -0.03) would give you a tracking value of -3%.
Enter your desired base font size to see dynamic values for the full type scale
39.8
Largest font sizeSize: 3XL // Leading: 1.1x // Tracking: -3%
33.2
Page HeadingsSize: 2XL // Leading: 1.15 // Tracking: -3%
27.6
Section HeadingsSize: XL // Leading: 1.2 //Tracking: -2%
23
SubheadingsSize: LG // Leading: 1.5 //Tracking: -1%
19.2
Emphasized contentSize: MD // Leading: 1.5 //Tracking: 1%
16
Standard body copySize: BASE // Leading: 1.5 //Tracking: 1%
13.3
Captions and labelsSize: SM // Leading: 1.5 //Tracking: 1%
11.1
Footnotes and disclaimersSize: XS // Leading: 1.5 //Tracking: 1%

Basic Rules of Type

When setting type it's important to know some basic terms and rules, in order to acheive a unified look and feel across communications created by different parties. The following is meant to be adbvice and a quick reference, and the designer's best judgement should be used whenever setting type for brand communications.

Leading

Also known as line-height, leading is the vertical space between lines of text. It is calculated as a ratio of font size, and is used to create a visual hierarchy and improve readability. A general rule of thumb is that the larger your font size, the tighter your leading can become. Take care to watch your font's ascenders and descenders (elements that extend above and below the baseline) as they can affect your leading.

Tracking

Tracking is the space between letters, and is calculated as a percentage of font size. It is often used to improve readability. A general rule of thumb is that the larger your font size, the tighter your tracking can become.

Note that tracking and kerning are different. Kerning is the space between two individual leters, and typically cannot be adjusted in web use. Tracking is the overall space between all letters, and on the web is adjusted with the CSS letter-spacing property.

Line Length

Line length is the width of the text block. Designers should aim for 11-14 words, or 60 characters, per line for optimal readability.