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)