Good typography is invisible, enabling users to have a seamless experience while they’re using Firefox products.
In Firefox products we use the standard typeface for each platform.
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
Choose a text color based on the content’s purpose and priority.
Use a primary color for main titles and body text.
|Light Background||Grey 90
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.
|Light Background||Grey 50
|Dark Background||Grey 10
The number of characters per line influences readability. Studies indicate the following guidelines for English:
45-75 characters (desktop) or 35-40 characters (mobile) per line is widely regarded as a satisfactory line length.
Around 66 characters (desktop) or 39 characters (mobile) is optimal.
More than 90 characters (desktop) or 50 characters (mobile) is likely too long for continuous reading.
Use display style for delivering primary messages on content pages.
Use title style to summarize content that follows the title. Carefully pairing titles makes content hierarchy obvious and improves readability.
Use emphasized style on body text or a caption that needs to stand out from regular content.
Font styles should typically be paired. But font styles may also be combined to indicate hierarchy or priority.