Noto Sans

Noto fonts are intended to be visually harmonious across multiple languages, with compatible heights and stroke thicknesses. For the currently released Noto fonts see code.google.com/p/noto/

Typeface variants

We use two different weights of Noto:

• Normal (Font weight: 400)
• Bold (Font weight: 700)

Noto Sans Normal – 400

Noto Sans Bold – 700

Typographic pre-sets

Lens uses fluid typography where two different type scales are used depending on viewport size. This allows for larger typography on large devices such as laptops and desktops, and smaller typography on small devices such as phones.

Line Height

Line heights are calculated for each style in a type scale by multiplying the font size by a percentage between 140% - 180% then rounding to the nearest integer.

For example: the line height for the 4XL style in the small breakpoint scale would be 32 x 140% = 44.8, rounded to 45px).

Smaller text tends to use a larger percentage value than larger text

Small Breakpoint

4XL

Font size: 32px, line height: 45px

3XL

Font size: 28px, line height: 39px

2XL

Font size: 24px, line height: 36px

XL

Font size: 21px, line height: 32px

L

Font size: 18px, line height: 27px

M

Font size: 16px, line height: 28px

S

Font size: 14px, line height: 24px

XS

Font size: 12px, line height: 18px

Large Breakpoint

6XL

Font size: 32px, line height: 45px

5XL

Font size: 42px, line height: 59px

4XL

Font size: 36px, line height: 50px

3XL

Font size: 31px, line height: 43px

2XL

Font size: 27px, line height: 41px

XL

Font size: 24px, line height: 36px

L

Font size: 21px, line height: 32px

M

Font size: 18px, line height: 31px

S

Font size: 18px, line height: 31px

XS

Font size: 14px, line height: 21px

External Homepage

The external homepage uses it’s own pre-set typesets. These are split by typesetting, heading, page heading, body copy and pre-set typographic pairings to make sure our pages stay consistent.

• Body Copy - To be used for small print, default body copy and small headings
• Headings - To be used for a variety of heading, including section headings
• Page Headings - To be used for large headings, including the page heading

Body copy

S

Font size: 14px, line height: 23px

M

Font size: 16px, line height: 29px

L

Font size: 18px, line height: 33px

Headings

XXS

Font size: 16px, line height: 26px

XS

Font size: 18px, line height: 28px

S

Font size: 18px, line height: 28px

M

Font size: 24px, line height: 34px

L

Font size: 28px, line height: 38px

Page Headings

S

Font size: 30px, line height: 37px

M

Font size: 34px, line height: 40px

L

Font size: 38px, line height: 43px