Typography and font choice carry our brand’s tone into the world. Roboto is the workhorse of our brand platform. We primarily use the standard and condensed alternatives while occasionally throwing down with the serif, slab and mono alternatives when necessary.
Headlines are set in Roboto Black. When using Roboto Black to create headings on embedded or printed collateral, always typeset it with optical kerning, set the tracking to 10, and use sentence case. Do not set headlines in all-caps or all-lowercase. Headings may be set in navy from our primary palette.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9
Typeset all text and paragraph text in Roboto Regular. When using Roboto Regular to set text on embedded or printed collateral, always typeset it with optical kerning and set the tracking to 0. Do not set in all-caps, title case or all-lowercase. Roboto has bold and italics options that you can use as desired.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9
Typeset emphasized text in Roboto Condensed 500. When using emphasis text to set text on embedded or printed collateral, always typeset it with optical kerning and set the tracking to 10. Do not set it in all caps, title caps or all lowercase. An exception to this rule is the buttons on the website.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9
When our brand fonts are not supported, default to these fonts:
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9
Our type scale is built on three different equations depending on screen or print sizes. The formula was created to provide hierarchy for all types of experiences.
To establish a typography scale, start with the base font size (paragraph text). Then, scale it up by consistently multiplying the font size by a fixed ratio “r.” This approach keeps all of the font sizes in harmony.
H1
Lorem ipsum dolor
Roboto Bold
65/51/32 px
H2
Lorem ipsum dolor
Roboto Bold
52/42/29 px
H3
Lorem ipsum dolor
Roboto Bold
42/35/26 px
H4
Lorem ipsum dolor
Roboto Bold
33/29/23 px
H5
Lorem ipsum dolor
Roboto Bold
27/24/20 px
H6
Lorem ipsum dolor
Roboto Bold
21/20/18 px
Content
Lorem ipsum dolor sit amet.
Roboto Normal
17/17/16 px
Emphasis
Lorem ipsum dolor sit amet.
Roboto Condensed 500
17/17/16 px
Roboto and its variations is designed to not be spaced too tightly or loosely. Use optical kerning when possible. We suggest 0–10 tracking when possible.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Whenever possible, left-align copy, even when it’s in a container element. This creates strong vertical alignment with the text, adding legibility, organization and clarity for a user.
The term “belt and suspenders” refers to using multiple styles to emphasize specific words over others in a selection. To keep messaging clean and efficient, keep styles to a minimum unless absolutely necessary.
This is an example without multiple belts and suspenders.
This is an example with multiple belts and suspenders.
Choosing the appropriate leading or line spacing is crucial to reading quality and efficiency. It should never be too open or too tight, which can make reading difficult and unpleasant for the reader.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Looking to update your brand or brand style guide? Reach out to us today. At the end of the day, we love helping brands create distinct identities that set them apart from their competitors.
