Typography

Fonts

Cobalt uses two brand fonts, both free to download/use from Google Fonts:

• Nunito Sans
  https://fonts.google.com/specimen/Nunito+Sans
  
• Karla
  https://fonts.google.com/specimen/Karla
  

Typography

Headings

Heading 1

color: #21312A (Outer Space) or #FFFFFF (white)
font-family: NunitoSans-Bold;
font-size: 30px;
letter-spacing: 0.5px;
line-height: 36px;

Heading 2

color: #21312A (Outer Space) or #FFFFFF (white)
font-family: NunitoSans-Bold;
font-size: 28px;
letter-spacing: 0.5px;
line-height: 32px;

Heading 3

color: #21312A (Outer Space) or #FFFFFF (white)
font-family: NunitoSans-Bold;
font-size: 24px;
letter-spacing: 0.5px;
line-height: 28px;

Heading 4

color: #21312A (Outer Space) or #FFFFFF (white)
font-family: NunitoSans-Bold;
font-size: 18px;
letter-spacing: 0.5px;
line-height: 22px;

Heading 5

color: #21312A (Outer Space) or #FFFFFF (white)
font-family: NunitoSans-Bold;
font-size: 16px;
letter-spacing: 0.5px;
line-height: 20px;

Body

Regular

color: #21312A (Outer Space) or #FFFFFF (white)
font-family: Karla-Regular;
font-size: 15px;
letter-spacing: 0.5px;
line-height: 20px;

Small

color: #21312A (Outer Space) or #FFFFFF (white)
font-family: Karla-Regular;
font-size: 13px;
letter-spacing: 0.5px;
line-height: 28px;

Small Medium

color: #7F978C
font-family: Karla-Regular;
font-size: 13px;
letter-spacing: 0.5px;
line-height: 28px;

Extra Small

color: #21312A (Outer Space) or #FFFFFF (white)
font-family: Karla-Regular;
font-size: 11px;
letter-spacing: 0.5px;
line-height: 14px;

Metadata

Used for labels on content including length of content, type of content, subheaders, etc.


color: #6C7978 (Pewter) or #FFFFFF (White);
font-family: Karla-Bold;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.5px;
line-height: 12px;

Labels

Regular

color: varies
font-family: Karla-Bold;
font-size: 15px;
letter-spacing: 0.5px;
line-height: 20px;

Small

color: #21312A (Outer Space) or #FFFFFF (white)
font-family: Karla-Bold;
font-size: 13px;
letter-spacing: 0.5px;
line-height: 18px;

Buttons

Regular

color: #3551E1 (Royal Blue) or #ADB5BD or #FFFFFF (white)
font-family: NunitoSans-Bold;
font-size: 20px;
letter-spacing: 0.5px;
line-height: 24px;

Small

color: #3551E1 (Royal Blue) or #ADB5BD or #FFFFFF (white)
font-family: NunitoSans-Bold;
font-size: 18px;
letter-spacing: 0.5px;
line-height: 22px;

Tiny

color: #3551E1 (Royal Blue) or #ADB5BD or #FFFFFF (white)
font-family: NunitoSans-Bold;
font-size: 16px;
letter-spacing: 0.5px;
line-height: 22px;

Links

Regular

color: #3551E1 (Royal Blue) or #ADB5BD or #FFFFFF (white)
font-family: Karla-Bold;
font-size: 15px;
letter-spacing: 0.5px;
line-height: 20px;

Small

color: #3551E1 (Royal Blue) or #ADB5BD or #FFFFFF (white)
font-family: Karla-Bold;
font-size: 13px;
letter-spacing: 0.5px;
line-height: 18px;