06

Typography

Because the internet is mostly made of words

Firefox Sharp Sans is the distinctive font used to create the logo lockups for Firefox products. Product logomarks echo the rounded forms in our product identity system. As images, these load universally across the web.

Metropolis

open-source

Metropolis is the font used for headlines on marketing and product web experiences. It’s available for most world alphabets. Metropolis is a sans geo font very similar to SharpSans. You can find it here.

Please refer to the SIL Open Font License 1.1 for exact details on what the conditions and restrictions are.

Inter

open source too!

Inter is the font we use as our secondary typeface for use in paragraph text and small UI elements. In cases that Metropolis is not available, Inter may be substituted for headlines as well.

Inter is a free font family. You are free to use this font in almost any way imaginable. Refer to the SIL Open Font License 1.1 for exact details on what the conditions and restrictions are. You can follow the github ticket to see when it will be available on Google Fonts.

Type Scale

Metropolis Bold for Headings and Inter Regular for body copy:

Heading – XXL

Font size: 64px (4rem)
Line height: 72px*

Heading – XL

Font size: 56px (3.5rem)
Line height: 64px*

Heading – LG

Font size: 48px (3rem)
Line height: 56px*

Heading – MD

Font size: 40px (2.5rem)
Line height: 44px*

Heading – SM

Font size: 32px (2rem)
Line height: 36px*

Heading – XS

Font size: 24px (1.5rem)
Line height: 28px*

Heading – XXS

Font size: 20px (1.25rem)
Line height: 24px*

Heading – XXXS

Font size: 16px (1rem)
Line height: 20px*

*(110% rounded to a multiple of 4)

Body LG

Font size: 18px (1.125rem)
Line height: 36px*

Body MD

Font size: 16px (1rem)
Line height: 24px*

Body SM

Font size: 14px (.875rem)
Line height: 22px*

Body XS

Font size: 12px (.75rem)
Line height: 18px*

*(110% rounded to a multiple of 4)