Typography
Typography informs our Design System to help bring consistency across all platforms and experiences.
Our primary web font is Lato. This sans-serif, open-sourced type has outstanding readability in both small and large font sizes. Lato supports numerous line weights and is available in over 40 languages—six used by USANA. This Free font can be downloaded from Google Fonts or LatoFonts.
Montserrat is another web font used specifically for third-party websites, emails, and newsletters. It is also used for Active Nutrition. Montserrat closely resembles Gothic, USANA's primary business font, and can be downloaded at Google Fonts.
Types
Body text
We use six body sizes. All body styles have a line-height of 1:1.5 relative to its size. Body content should be set in sentence case and, unless noted, have periods at the end.
Body 1
- font-family: Lato-Regular;
- font-size: 16px;
- color: #131E29;
- text-align: left;
- line-height: 24px;
Body 2
- font-family: Lato-Regular;
- font-size: 14px;
- color: #131E29;
- text-align: left;
- line-height: 21px;
Body 3
- font-family: Lato-Regular;
- font-size: 12px;
- color: #131E29;
- text-align: left;
- line-height: 18px;
Body - Blockquote
- font-family: Lato-Regular;
- font-size: 20px;
- color: #131E29;
- text-align: left;
- line-height: 30px;
Body - Lead paragraph
- font-family: Lato-Semibold;
- font-size: 18px;
- color: #131E29;
- text-align: left;
- line-height: 27px;
Body - Italic paragraph
- font-family: Lato-Italic;
- font-size: 12px;
- color: #131E29;
- text-align: left;
- line-height: 18px;
Headings
Six different headings sizes are used—h1 to h6. All heading text has a line-height of 1:1.25 relative to its size and should be set in sentence case. Periods should not be used at the end of any heading. For SEO purposes, all pages should only have one h1 and follow the semantic order for additional heading layout.
Heading 1
- font-family: Lato-Bold;
- font-size: 40px;
- color: #131E29;
- text-align: left;
- line-height: 50px;
tablet & mobile
- font-size: 36px;
- font-height: 45px;
Heading
Heading 2
- font-family: Lato-Bold;
- font-size: 32px;
- color: #131E29;
- text-align: left;
- line-height: 40px;
tablet & mobile
- font-size: 28px;
- font-height: 35px;
Heading
Heading 3
- font-family: Lato-Bold;
- font-size: 24px;
- color: #131E29;
- text-align: left;
- line-height: 30px;
tablet & mobile
- font-size: 20px;
- font-height: 25px;
Heading
Heading 4
- font-family: Lato-Bold;
- font-size: 18px;
- color: #131E29;
- text-align: left;
- line-height: 22.5px;
Heading
Heading 5
- font-family: Lato-Bold;
- font-size: 16px;
- color: #131E29;
- text-align: left;
- line-height: 20px;
Heading
Heading 6
- font-family: Lato-Bold;
- font-size: 14px;
- color: #131E29;
- text-align: left;
- line-height: 17.5px;
Heading
Subheadings
Three different sizes are used for subheadings. All subheading text has a line-height of 1:1.25 relative to its size and should be set in sentence case. Periods should not be used at the end of any headings.
Sub-heading 1
- font-family: Lato-Semibold;
- font-size: 20px;
- color: #131E29;
- text-align: left;
- line-height: 25px;
Sub-heading 2
- font-family: Lato-Bold;
- font-size: 16px;
- color: #131E29;
- text-align: left;
- line-height: 25px;
- text-transform: uppercase;
Sub-heading 3
- font-family: Lato-Bold;
- font-size: 14px;
- color: #131E29;
- text-align: left;
- line-height: 27px;
- text-transform: uppercase;
Special
Three different sizes are used for special headings. All special text has a line-height of 1:1.25 relative to its size and should be set in sentence case. Periods should not be used at the end of special headings.
Special 1
- font-family: Lato-Semibold;
- font-size: 64px;
- color: #131E29;
- text-align: left;
- line-height: 80px;
tablet & mobile
- font-size: 48px;
- font-height: 60px;
Special 2
- font-family: Lato-Bold;
- font-size: 48px;
- color: #131E29;
- text-align: left;
- line-height: 60px;
tablet & mobile
- font-size: 36px;
- font-height: 45px;
Special 3
- font-family: Lato-Bold;
- font-size: 28px;
- color: #131E29;
- text-align: left;
- line-height: 35px;
Guidelines
Type Scale
Our type scale is based on one of the most widely acceptable type scales in the web industry. The scales uses an increase of 2px that increases to 4px and 8px in larger font sizes.
Base font size 16px/1rem and is based on the width of the page: 1060<16px=1rem.
- 12px/.075rem14px/.875rem16px/1rem (base size)
- 18px/1.125rem
- 20px/1.24rem
- 24px/1.5rem
- 28px/1.75rem
- 32px/2rem
- 36px/2.25rem
- 40px/2.5rem
- 48px/3rem
- 56px/3.5rem
- 64px/4rem
Font Weights
Font weights are for creating and maintaining content hierarchy and adding emphasis.
We use 5 font weights:
- Lato-Light 300
- Lato-Regular 400
- Lato-Medium 500
- Lato-Semibold 600
- Lato-Bold 700
Italics
Are available for each font weight but should only used to emphasize certain words in the content.
Line Heights
We use 2 line heights in our typography. 1:1.25 for headings and 1:1.5 for standard line heights.
For example if a body font has a size of 16px/1rem, then the line-height of the font would be 24px/1.5rem.
Line height is only applied to text that is longer than one line such as a paragraph or headlines.
Headings - 1:1.25
- 12px/.075rem - 15px
- 14px/.875rem - 17.5px
- 16px/1rem (base size) - 20px
- 18px/1.125rem - 22.5px
- 20px/1.25rem - 25px
- 24px/1.5rem - 30px
- 28px/1.75rem - 35px
- 32px/2rem - 40px
- 36px/2.25rem - 45px
- 40px/2.5rem - 50px
- 48px/3rem - 60px
- 56px/3.5rem - 70px
- 64px/4rem - 80px
Body - 1:1.5
- 12px/.075rem - 18px
- 14px/.875rem - 21px
- 16px/1rem (base size) - 24px
- 18px/1.125rem - 27px
- 20px/1.25rem - 30px
- 24px/1.5rem - 36px
- 28px/1.75rem - 42px
- 32px/2rem - 48px
- 36px/2.25rem - 54px
- 40px/2.5rem - 60px
- 48px/3rem - 72px
- 56px/3.5rem - 84px
- 64px/4rem - 96px
Line Length
Is the number of characters in a line of text. To improve readability of our content, line length should be between 55-85 characters including spaces.
Text block width/Body copy and or paragraph width should be between 430-635px to also ensure better readability.
Contrast & Color
We follow the WCAG standard that states that to achieve a WCAG 2 level AA, normal text should have a contrast ratio of at least 4.5:1 for normal text(body) and 3:1 for large text(headings). By default our base color for all text is Grey-900.
- Use the defined fonts and font sizes defined in the Design System.
- Adjust and scale font for mobile sizes.
- Observe all capitalization rules and guidelines.
- Keep content concise and to the point.
- Use unique or different fonts that are not defined by the Design System.
- Underline text to call out attention or add emphasis.
- Use unnecessary indentation of paragraphs.
- Fully justify text.