Typography
Typography is a brand’s handwriting. The presentation of text on the page adds to the style and personality we convey through our messaging. It is required that all externally-facing materials be set in the typefaces shown below. It is recommended that internal documents also use these typefaces to maintain consistency when possible.
Tide Sans
The primary brand typeface is Tide Sans, which is available in both desktop and webfont versions. Tide Sans will be the dominant typeface used on all branded materials. There are many weights in the Tide Sans typeface family. The weights shown on this page should be the only versions used within the WHOI brand.
Primary Typeface
Tide Sans
200 lil mondo
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
300 lil kahuna
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
400 lil dude
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
500 dudette
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
600 bunny
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
700 mondo
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
800 kahuna
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
200 lil mondo italic
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
300 lil kahuna italic
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
400 lil dude italic
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
500 dudette italic
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
600 bunny
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
700 mondo
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
800 kahuna
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
NOTE: Tide Sans is not a free font, but can be downloaded at the following link:
https://www.myfonts.com/fonts/kyle-wayne-benson/tide-sans/
Please scroll further down for the fallback version, Red Hat Display.
Dharma Gothic M
Our brand’s typeface system also includes a display typeface: Dharma Gothic M. It should only be used for headlines or larger display type and only used in the light, regular, or bold weight. It should never be used as body copy or as smaller type within a layout. Dharma Gothic M is an Adobe font and can only be used by those with the Adobe Creative Suite.
Alternate Typeface (An Adobe font)
Dharma Gothic M
NOTE: Dharma Gothic M is an Adobe font and can be accessed using the Creative Suite.
Cormorant Garamond
Cormorant Garamond is a serif font that is a secondary typeface within our brand. It’s very similar to the typeface used within the original WHOI seal, which has in turn inspired its use within the new brand. It’s primary use is for body copy within applications with extensive text, such as brochures, reports, magazines, and research publications. It can also be used for callouts and other instances when a serif is needed to contrast the more modern Tide Sans or Dharma Gothic M. Cormorant Garamond is a Google font with both desktop and webfont versions.
Secondary Typeface (a google font)
Cormorant Garamond
light
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
regular
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
medium
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
semibold
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
bold
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
italic
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
italic
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
medium italic
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
bold italic
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
black italic
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
NOTE: Cormorant Garamond can be downloaded at the following link:
https://fonts.google.com/specimen/Cormorant+Garamond?query=cormorant
Red Hat Display
Red Hat Display is a Google font that can be used if Tide Sans is unavailable for a user. It is very similar to Tide Sans and can be substituted and used as the primary brand typeface if needed. It has both desktop and webfont versions.
Alternate Typeface (a google font)
Red Hat Display
regular
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
medium
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
bold
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
black
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
italic
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
medium italic
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
bold italic
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
black italic
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
NOTE: Red Hat Display can be downloaded at the following link:
https://fonts.google.com/specimen/Red+Hat+Display?query=red+hat
Arial
Arial is a system typeface that should be used on all digital branded applications when a system-wide compatible typeface is needed. PowerPoint presentations, Microsoft Word templates, and email signatures are a few examples where a system typeface is required. Arial has visual characteristics that fit within the WHOI brand, but it should never be used as a replacement for the other brand typefaces on printed materials.
System Typeface
Arial
regular
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
bold
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
italic
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
bold italic
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789?!@#$%&*()
Typography usage recommendations
The print spread below serves as an example of typography usage recommendations. The hierarchy and integrity of type within our brand is very important. From headlines and subheads to body copy and captions, the typefaces should work together within an application and be designed with a keen eye to maintain legibility, readability, and a clean layout. The use of the typefaces below are recommendations only and may be adjusted based on your layout requirements.
The print spread below illustrates the flexibility of the brand’s typography system. The use of Dharma Gothic M as a display headline, with Tide Sans as body copy, shows how you may adjust your design to take advantage of various styles of typography within the system.
Large headlines like the one shown on this poster are a good example of how the brand’s display typeface can be used. Along with Cormorant Garamond and Tide Sans as body copy, the relationship between typography and photography can inform and inspire design.
