Typography
Good typography is invisible, enabling users to have a seamless experience while they’re using Firefox products.
Typefaces
In Firefox products we use the standard typeface for each platform.
Scale
The type scale enables you to indicate content hierarchy. These sizes and styles are designed to balance content density with increased readability.
The Scaling Ratio
The recommended font sizes, which are listed in the table above, are multiplied by a specific ratio for building the typographic hierarchy. In the very rare cases, there may be a need of having a bigger/ smaller font size which is not documented. Use the dedicated ratio to create new ones.
Body & Caption
Title & Display
Color
Choose a text color based on the content’s purpose and priority.
Primary Color
Use a primary color for main titles and body text.
| Primary color | |
|---|---|
| Light Background | Grey 90 #0c0c0d |
| Dark Background | White #ffffff |
Secondary Color
Use a secondary color for accompanying text that adds further information, details, or features to the primary content. Examples include caption text and menu subtitles.
| Secondary color | |
|---|---|
| Light Background | Grey 50 #737373 |
| Dark Background | Grey 10 #f9f9fa |
Line Length
The number of characters per line influences readability. Studies indicate the following guidelines for English:
-
Satisfactory
45-75 characters (desktop) or 35-40 characters (mobile) per line is widely regarded as a satisfactory line length. -
Optimal
Around 66 characters (desktop) or 39 characters (mobile) is optimal. -
Too long
More than 90 characters (desktop) or 50 characters (mobile) is likely too long for continuous reading.
Usage
Display
Use display style for delivering primary messages on content pages.
Title
Use title style to summarize content that follows the title. Carefully pairing titles makes content hierarchy obvious and improves readability.
Emphasis
Use emphasized style on body text or a caption that needs to stand out from regular content.
Font Pairing
Font styles should typically be paired. But font styles may also be combined to indicate hierarchy or priority.
