Typography
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 FontsMobile 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 reduce 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
PX
14
DP
18.667
SP
19
SP
19
MM
2.963
MM
2.963
PT
8
IN
0.117
PX
14
DP
18.667
SP
19
MM
2.963
PT
8
IN
0.117
Font Colors
Our base font color is #4b4b4b, but our brand color palette gives us the opportunity to support a handful of other font colors for different uses.
Blue Accessibility
Blue5
Blue Primary
Blue1
Green Accessibility
Green Primary
Green1
Orange Accessibility
Orange1
Red Accessibility
Red1
Black
Font Primary
White
Blue Accessibility
Blue5
Blue Primary
Blue1
Green Accessibility
Green Primary
Green1
Orange Accessibility
Orange1
Red Accessibility
Red1
Black
Font Primary
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
The quick brown fox jumps over the lazy dog
2.875em
The quick brown fox jumps over the lazy dog
2.286em
The quick brown fox jumps over the lazy dog
2em
The quick brown fox jumps over the lazy dog
1.714em
The quick brown fox jumps over the lazy dog
1.429em
The quick brown fox jumps over the lazy dog
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.
Links
Text based links have 3 defining features that help them standout from ordinary body text.
Design Highlight:
- 1: They are bold
- 2: They use our blue_primary color #0575e6
- 3: On hover they are underlined and have a pointer cursor
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
Lorem ipsum dolor sit amet, aliquet erat, condimentum felis eu elit suscipit, mauris augue, tempor nisl elit morbi vitae pharetra, ut rhoncus fusce.
Horizontal Rules
Horizontal rules can be used to seperate headlines from copy, and divide sections for better visual organization. Our system employs different widths and colors depending on the situation.
Small Left Aligned
Small Right Aligned
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.