Typography

Typography is the foundation for readability and accessibility. Establishing clear hierarchies and thoughtful messaging are at the core of all good user experiences.

Lato our Product Font Family

At the center of all great content is a legible typeface. Our digital products leverage Lato. The Lato font family is a clean sans serif typeface that has great readability at small and large sizes. It supports multiple line weights and has clear professional design. It is available to download for free on Google Fonts

Download Lato on Google Fonts

Mobile Applications, Lato, and i18n

For mobile development, to ensure consistency with our international clients, developers may use whatever native font comes packaged with the platform they are developing on as long as it meets our clients cultural, regional and language needs. This document is to serve as a guide. However, we expect our developers to use their best judgement in situations where our font guidelines cannot, for whatever reason, be applied exactly as documented without impacting the success of the product.

If you have any questions or concerns, please do not hesitate to reach out. Talk to support.

Base Font Sizes

Our base font size on web is 14px. We've reduced the font size down from the standard 16px to 14px because we have a history of content dense interfaces, and since we are a client driven product, we often get requests to reduce the height of pages as much as possible. We've found by reducing the font size by 2px on web we were able to reduce the page height substantially.

Pixel Unit Conversions
Pixel

PX

14

Density-independent Pixels

DP

18.667

Scale-independent Pixels

SP

19

Millimeters

MM

2.963

Points

PT

8

Inches

IN

0.117

Font Colors

Our base font color is #1b1b1b, but our brand color palette gives us the opportunity to support a handful of other font colors for different uses.

#1b1b1b
Font Primary
#001b38
Font Accent
#be3a34
Red1
#ffffff
White

Headlines

Headlines establish hierarchy within content. They are used to grab attention and provide titles to relevant information

Design Highlight:
  • All headlines use Bold as their font weight
  • All headlines use a line-height of 1.2em
H1

The quick brown fox jumps over the lazy dog

Font Size
2.857em

H2

The quick brown fox jumps over the lazy dog

Font Size
2.286em

H3

The quick brown fox jumps over the lazy dog

Font Size
2em

H4

The quick brown fox jumps over the lazy dog

Font Size
1.714em

H5
The quick brown fox jumps over the lazy dog
Font Size
1.429em

H6
The quick brown fox jumps over the lazy dog
Font Size
1.143em

Paragraphs

body copy can be applied using a standard paragraph or a leading paragraph, depending on your design needs. Leading paragraphs are best for shorter text copy that's no more than 2-3 sentences.

standard paragraph

Lorem ipsum dolor sit amet, aliquet erat, condimentum felis eu elit suscipit, mauris augue, tempor nisl elit morbi vitae pharetra, ut rhoncus fusce. Nec congue nonummy condimentum duis sollicitudin. Nulla ut vivamus magna eleifend id, potenti ante vitae, ut velit pulvinar. Sociosqu laborum mauris porta sociis ullamcorper, penatibus luctus arcu morbi tellus amet mauris, delectus vulputate vel urna in justo, justo iaculis, cras elit non sapien. Vivamus orci mauris risus, auctor harum deserunt massa. Nulla mauris sociosqu eum. Quisque gravida ut sed porta quam, convallis dolores consectetuer et mauris, aut lorem mauris eu integer porta velit, amet vel, suspendisse mauris.

leading paragraph

Lorem ipsum dolor sit amet, aliquet erat, condimentum felis eu elit suscipit, mauris augue, tempor nisl elit morbi vitae pharetra, ut rhoncus fusce. Nec congue nonummy condimentum duis sollicitudin. Nulla ut vivamus magna eleifend id, potenti ante vitae, ut velit pulvinar. Sociosqu laborum mauris porta sociis ullamcorper, penatibus luctus arcu morbi tellus amet mauris, delectus vulputate vel urna in justo, justo iaculis, cras elit non sapien. Vivamus orci mauris risus, auctor harum deserunt massa.

Tags

Tags are great ways to highlight text. They can be mixed into all different types of content to add impact or draw the user's attention.

Tags come in multiple color options

Default Font Accent Blue Primary Blue1 Blue2 Blue3 Blue4 Purple1 Purple2 Purple3 Red Access Red1 Red2 Orange Access Orange1 Green Access Green1 Green2