Typography

Desktop

The font family used on desktop is dependent on the user's operating system. Segoe UI is commonly used on Windows, and SF Pro on macOS. On Linux, the font family highly depends on the desktop environment, with Noto Sans, Cantarell, and Ubuntu being very common. While these work for default choices, it is still important to keep in mind that other font families could be used, especially with regard to languages that use non-Latin characters.

Our type scale makes a distinction between two different UI areas known as chrome and in-content. While the in-content styles are consistent across operating systems, we have three seperate sets of values for the chrome, depending on whether the operating system is Windows, macOS, or Linux.

Refer to the Usage section below for guidance on how to work with typography in your designs.

Browser chrome

The browser chrome type scale is designed to closely mimic the system type sizes. As a result, it's important to note that the scale isn't always consistent. For example, on macOS, the text size for tabs is smaller than the base size in the chrome, whereas on Windows and Linux the size remains the same.

In-content

Type sizes for in-content text remain consistent across systems, with the base type size set to 15px. However, in-content type scaling is applied less consistently across various surfaces.

Notably, our New Tab page currently uses styles that align more closely with the chrome type scale, even though it is an In-content page.

Usage

When designing new surfaces, it is recommended to use the typography styles provided in Figma. If you require additional or different styles than those available in our design system, feel free to reach out to us during office hours.

For existing surfaces, we recommend utilizing the typography styles in Figma as well. However, it is essential to inform engineers to match the existing typography in the product, although slight visual differences to your design may occur.

We aim to align typography between design and code.

Icons

When designing for Desktop, avoid placing icons alongside text to emphasize meaning, particularly in menus and buttons. Instead, opt for descriptive text that clearly communicates the function of a menu item, label or headline. For interactive elements, you can also use an icon button, but ensure it won't confuse users.

This is considered a general guideline — especially for common actions like pinning, printing, deleting — but not a hard rule.

Common exceptions are:

• Favicons next to website names.
• Warning icons next to captions to draw attention to errors or problems.
• As a means of distinguishing text when the other signifier is color.

If you think your user interface could benefit from having both text and icons for an item, talk to us.

Tokens

Right now, we maintain typography styles for Windows and macOS. These tokens are not implemented in Firefox for desktop yet, and are only currently applicable to Figma designs.

Windows

macOS