Typography is the foundation for readability and accessibility. Establishing clear hierarchies and thoughtful messaging are at the core of all good user experiences.
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 FontsFor 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.
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 ConversionsOur 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.
Headlines establish hierarchy within content. They are used to grab attention and provide titles to relevant information
Design Highlight: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.
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 paragraphLorem 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.
Text based links have 3 defining features that help them standout from ordinary body text.
Design Highlight: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.
Read More