Good typography is invisible, enabling users to have a seamless experience while they’re using Thunderbird products.

Typefaces

In Thunderbird products we use the standard typeface for each platform.

List of Segoe UI weights used in Firefox products

Segoe UI is the typeface used on the Windows platform.

List of San Francisco weights used in Firefox products

San Francisco is the standard typeface on Apple macOS.

List of Ubuntu weights used in Firefox products

Ubuntu is the typeface used in Ubuntu, the most common Linux distro.

List of Fira Sans weights used in Firefox products

Fira Sans is the typeface used in Firefox web products.

Despite Open Sans being used on some Mozilla web properties, it is currently not recommended for Firefox products.

Scale

The type scale enables you to indicate content hierarchy. These sizes and styles are designed to balance content density with increased readability.

Name Size Weight Emphasized
36px Light 200
22px Semilight 300
17px Semibold 600
13px Semibold 600
15px Normal 400 Bold 700
13px Normal 400 Bold 700
13px Normal 400 Bold 700
11px Normal 400 Bold 700
Name Size Weight Emphasized
36px Thin 100
22px Light 300
17px Semibold 600
13px Medium 500
15px Regular 400 Bold 700
13px Regular 400 Bold 700
13px Regular 400 Bold 700
11px Regular 400 Bold 700
Name Size Weight Emphasized
36px Light 300
22px Light 300
17px Medium 500
13px Medium 500
15px Regular 400 Bold 700
13px Regular 400 Bold 700
13px Regular 400 Bold 700
11px Regular 400 Bold 700
Name Size Weight Emphasized
36px ExtraLight 200
28px Light 300
22px Light 300
17px Medium 500
13px Medium 500
17px Regular 400 Bold 700
15px Regular 400 Bold 700
13px Regular 400 Bold 700
15px Regular 400 Bold 700
13px Regular 400 Bold 700
11px Regular 400 Bold 700

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

The scaling ratio of body and caption is 1.15

The scaling ratio of body and caption is 1.15.

Title & Display

The scaling ratio of title and display is 1.29

The scaling ratio of title and display is 1.29.

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 usage example

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.

Emphasis example

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.

line length

Line lengths within the light blue range are satisfactory, while entering the dark blue range are tolerant.

Usage

Display

Use display style for delivering primary messages on content pages.

display example

Display 20 in an error page on Desktop

Title

Use title style to summarize content that follows the title. Carefully pairing titles makes content hierarchy obvious and improves readability.

Title example

Title 30 pairing with Title 20 in Thunderbird Preferences on Desktop

Emphasis

Use emphasized style on body text or a caption that needs to stand out from regular content.

Emphasis example

Emphasize on "Thunderbird is up to date" in Thunderbird Preferences on Desktop

Font Pairing

Font styles should typically be paired. But font styles may also be combined to indicate hierarchy or priority.

Pairing example

Style set 10 in Library menu on Desktop