Brand Typography
Native Typography
In some cases, we don't use our branded fonts and instead use native typography to improve performance and accessibility. This is typically the case for emails, spreadsheets, and text documents that fall outside of the Marketing scope.
Platform |
Type |
Marketing Email |
Arial |
All Microsoft Apps excluding Powerpoint which embeds Montserrat | Ebrima |
Ebrima or Arial should be used in place of Montserrat for branded assets made outside the scope of the Marketing Team as the primary typeface for headlines and body copy.
Times New Roman Bold should be used in place of Mermaid for branded assets made outside the scope of the Marketing Team as secondary font for accent text. It should not be used for headlines or main body text.
Scale & Sizing
Our heading sizes are based on a 1.250 Scale (Major Third) while body sizes follow the classical scale with a root size of 16px. For additional sizes outside this scope, see Scale Calculator.
Type for print
Type for web
Color & Contrast
To maintain brand consistency and adhere to accessibility standards, we ask that you avoid using any colors on your text that are not listed here. It's crucial to maintain optimal contrast between text and background to ensure readability, and using non-designated colors can compromise this.
Typographic Styling
Heading Styles
For the primary heading on all layouts, Montserrat in either white or Zodiac black is recommended. An accent color can be used sparingly to add emphasis to a part of the headline, but it should be used with care and not overused within the design to maintain its impact.
Body Styling
Montserrat should be styled only in regular, bold, or italic, and each style should be used separately. Do not combine bold + italic for extra emphasis. Do not underline text if it is not a hyperlink. Do not use any color body text other than Zodiac, Grey or white.
Bold text
Use bold words or phrases selectively and sparingly within your body text, as overusing them can be distracting and counterproductive, leading to a dilution of the intended emphasis.
Hyperlinks
Hyperlinked text on a light background should be underlined and in Blue Ribbon (#126cee) color. On a dark background, it should be underlined and in white (#ffffff). No other colors or styling should be used for hyperlinks. They should provide added context for the user but should not be overused within a paragraph as it can disrupt the reading experience.
Capitalization
H1, Labels, Buttons, CTAs, Menu items
Always use title caps. e.g. "Capitalize Each Word With the Exception of Minor Words" An exception to the rule is if your H1 requires punctuation, then use sentence caps. e.g. "Are you ready to go global?" See Detailed APA Rules
H2 - H6, Body Text
Always use sentence caps. e.g. "Capitalize only the first word in the headline." See Detailed APA Rules
ALL CAPS
It can be acceptable to use ALL CAPS in certain labels and pre-headings when used for stylistic variation so long as legibility is maintained and this style is not overused within a layout. Usage is to be determined at the author's discretion. e.g. "RELATED RESOURCES"
Text Alignment
The default alignment should be left. Center and right alignment is also acceptable in certain scenarios. Do not fully justify text. Justified text can negatively impact readability by creating distracting and large spaces between words.
Line Length
Aim for 60-100 characters, including spaces, per paragraph of text. This length is ideal for breaking up content into easily digestible information.
Lists
- Try to avoid lists that are too long
- try to balance the length when using multiple lists in the same layout
- Ideal listed item should be under 50 char
Translating Text
Always design with translation in mind, and this is particularly true when placing typography. Text length can greatly vary from language to language, so ensure adequate spacing is allowed for all scenarios. Using a font that can support all necessary characters in the target languages is also important.
- Do not use Mermaid in your design for languages other than English
- Do use Montserrat as it will support most Western languages. Native fonts are also a safe option.