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.

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.

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.

Display

Three different sizes are used for diplay headings. All display 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 display headings.

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 2 font weights:

• Noto-Regular 400
• Noto-Italic 400
• Noto Serif-Regular 400
• Noto Serif-Italic 400
• Noto-Bold 700
• Noto-Bold-Italic 700
• Noto Serif-Bold 700
• Noto Serif-Bold 700

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.